Carousel bootstrap does not fit the container

Question

Carousel bootstrap does not fit the container

Navigation

#1 by (0 votes)

0

I'm doing my portfolio in codepen.Created a carousel to show photos but the problem is that this does not fit the width of your container when I change the size of the browser window and it comes out the sides.

$('nav li').on('click', function(e){
   $('nav li').removeClass("active");
   $(this).addClass('active')});

.navbar-header{
  
  
  padding-left:15px;
  padding-right:15px;
  
}

 .navbar-inverse .navbar-nav > .active > a, 
 .navbar-inverse .navbar-nav > .active > a:hover, 
 .navbar-inverse .navbar-nav > .active > a:focus {
      color: white;
      background:  #BDAEC6;
 }


.navbar, .navbar-inverse {
  box-shadow:10px 10px 10px #888888;
  color:white;
  background:#2E0854;
  border-width:0px;
}

.navbar .navbar-brand {
   color:white;
}




 .navbar-inverse > li > a {
    color:white;
    
}





#img1{
  width:60%;
  height:60%;
  position:relative;
  right:60px;
  
}

#p1{
  
  font-family:Bad Script;
  position:relative;
  left:40px;
 
  
}

	
.title{
  
  font-family:Lobster;
  font-size:40px;
  text-align:center;

}

.img-thumbnail {
  
    box-shadow:10px 10px 5px #888888;
    width: 458px; 
    height: 200px;
    margin-bottom:20px;
  
}

footer{
  background-color:#2E0854;
  margin:0px;
  padding:30px;
  height:2%;
  width:100%;
  float:bottom;
  text-align:center;
  
  
}

.btn-round{
  
  color:white;
  border-width:4px;
  margin:5px 5px 0px 6px;
  padding:5px;
  background-color:#2E0854;
  border-style:solid;
  border-color:white;
  border-radius:50%;
  width:40px;
  height:40px;
  text-align:center;
}

.fixedbutton {
    position: fixed;
    bottom: 30px;
    right: 0px; 
}

span{
  
  font-weight:bold;
  
}

#section2{
  border-radius:1%;
  padding-top:20px;
  background:#f9f9f9;
  width:80%;
  margin:20px auto;
}

form {
  padding-bottom: 1em;
}

.form-group {
  padding: .5em 0 .5em;
  
}

.form-control {
  border-top: 0 !important;
  border-right: 0 !important;
  border-left: 0 !important;
  box-shadow: none !important;
  background-color: inherit !important;
}


.container-fluid{
  
  padding:0;
  
}

.jumbotron{
  margin:auto;
  margin-top:10px;
  width:80%;
  
}

.text-white{

  color:#BDAEC6;;
  font-size:20px;
  font-family:Bad Script; 
  
}

#title2{
  
  font-family:Lobster;
  font-size:40px;
  margin-bottom:15px;
  color:#6b6b6b;
  
}


#title3{
  
  font-size:40px;
  color:#6b6b6b;
  
}


.section1{
 
  width:80%;
  margin:auto;
  background:#f9f9f9;
  margin-top:0px;
  

}

h4{
  
  text-align:center;
  position:relative;
  left:60px;
  top:40px;
  
}



#img-profile{
  
  border-radius:50%;
  vertical-align: middle;
  padding:3% 0;
  
}

#desc{
  
  margin-top:80px;
  margin-left:30px;
  font-family:Poiret One;
  font-size:25px;
}



#career{
  
  font-family:Orbitron;
  
  
}


.carousel-inner > .item > img {
    margin: 0 auto;
    
}


.carousel-caption{
 
 padding-top:0px; 
 bottom:-25px;
 color:black;
 background:white;
 opacity: 0.5;
  
}

#myCarousel{
  
  max-width:580px;
  margin:auto;
  
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css"/>

<link href="https://fonts.googleapis.com/css?family=Bad+Script|Lobster|Orbitron|Poiret+One" rel="stylesheet">


<body>

<nav class="navbar navbar-inverse">
  
  <div class="container-fluid">
 
    <div class="navbar-header">
      
      <a class="navbar-brand" id="titles" href="index.html">MyWebSite</a>
      <button id="collapseBtn"type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#mainNav">
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    </button>
    
    </div>
    
    
    
    <div class="collapse navbar-collapse" id="mainNav">
    <ul class="nav navbar-nav navbar-right">
   
      <li class="active">
        <a href="#portfolio">Home <span class="glyphicon glyphicon-home"></span></a>       
      </li>
      <li id="portfolio">
        <a href="#title2">Portfolio <span class="glyphicon glyphicon-th-list"></span></a>
      </li>
      <li><a href="#title3">Contact <span class="glyphicon glyphicon-envelope"></span></a></li> 
      
    </ul>
 </div> 
  </div>
  </nav>
  
  
  
<div class="container-fluid">  
 
<div class="section1">
  
  <div class="row">
    <div class="col-xs-8"> 
   <p id="desc">&lt;&gt;Informatics Engineering student at National University of la Matanza, interested in Web development.&lt;/&gt;</p>
      
    </div>
    <div class="col-xs-4">
    
     <img id="img-profile" src="http://blog.ramboll.com/fehmarnbelt/wp-content/themes/ramboll2/images/profile-img.jpg"alt="profile-photo"class="img-responsive"/>
    </div>
  
    </div>
  
    <div class="row text-center">
    <p id="career"> Informatics Engineering<p>
    </div>
  
  
</div>
  
  
<div id="section2" class="text-center">
<div class="row"> 
<div class="col-xs-12">      
  
  
<h2 id="title2" class="title">Projects</h2>

 
<div class="container">
  <br>
  <div id="myCarousel" class="carousel slide" data-ride="carousel">
    <!-- Indicators -->
    <ol class="carousel-indicators">
      <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
      <li data-target="#myCarousel" data-slide-to="1"></li>
      <li data-target="#myCarousel" data-slide-to="2"></li>
      <li data-target="#myCarousel" data-slide-to="3"></li>
      <li data-target="#myCarousel" data-slide-to="4"></li>
      <li data-target="#myCarousel" data-slide-to="5"></li>
    </ol>

    <!-- Wrapper for slides -->
    <div class="carousel-inner" role="listbox">

      <div class="item active">
        <img src="https://i.imgsafe.org/d31fbeb113.jpg" alt="Flower" width="460" height="345">
        <div class="carousel-caption">
          <h3>Tribute page: Alexander Fleming</h3>
          <p>#HTML #CSS<br></p>
        </div>
      </div>
      
      <div class="item">
        <img src="https://i.imgsafe.org/cd5b0bae62.png" alt="Chania" width="460" height="345">
        <div class="carousel-caption">
          <h3>Random quote generator</h3>
          <p>#HTML #CSS #BOOTSTRAP #JAVASCRIPT #AJAX #FORISMATIC'S API<br></p>
        </div>
      </div>
      
      <div class="item">
        <img src="https://i.imgsafe.org/483f82648f.png" alt="Chania" width="460" height="345">
        <div class="carousel-caption">
          <h3>Wikipedia search page</h3>
          <p>#HTML #CSS #BOOTSTRAP #JAVASCRIPT #AJAX #WIKIPEDIA'S API<br></p>
        </div>
      </div>

      <div class="item">
        <img src="https://i.imgsafe.org/483f8c776e.png" alt="Chania" width="460" height="345">
        <div class="carousel-caption">
          <h3>Twitch page</h3>
          <p>#HTML #CSS #BOOTSTRAP #JAVASCRIPT #AJAX #TWITCH'S API<br></p>
        </div>
      </div>
    
      <div class="item">
        <img src="https://i.imgsafe.org/4870f4ff6d.png" alt="Flower" width="460" height="345">
        <div class="carousel-caption">
          <h3>Weather page</h3>
          <p>#HTML #CSS #BOOTSTRAP #JAVASCRIPT #AJAX #OPEN WEATHER'S API<br></p>
        </div>
      </div>
      
      
      <div class="item">
        <img src="https://s11.postimg.org/71f8jld1f/Sin_t_tulo.png" alt="Chania" width="460" height="345">
        <div class="carousel-caption">
          <h3>Calculator</h3>
          <p>#HTML #CSS #BOOTSTRAP #JAVASCRIPT<br></p>
        </div>
      </div>
      
      
      

    </div>

    <!-- Left and right controls -->
    <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
      <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
      <span class="sr-only">Previous</span>
    </a>
    <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
      <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
      <span class="sr-only">Next</span>
    </a>
  </div>
</div>  
  

</div>
</div>
</div>
  
<div class="jumbotron">
  
<p id="title3" class="title">Contact me</p>    
    
 <form action="mailto:[email protected]" method="post" enctype="text/plain">
            <div class="form-group">
              <label for="contact-name" class="sr-only">Name</label>
              <input id="contact-name" type="text" class="form-control no-border" placeholder="Name">
            </div>

            <div class="form-group">
              <label for="contact-email" class="sr-only">Email Address</label>
              <input id="contact-email" type="email" class="form-control" placeholder="Email Address">
            </div>

            <div class="form-group">
              <label for="contact-phone-number" class="sr-only">Phone Number</label>
              <input id="contact-phone-number" type="text" class="form-control" placeholder="Phone Number">
            </div>

     <div class="row">
        <div class="col-xl-7 col-lg-7 col-md-12 col-sm-12 col-xs-12">
            <div class="form-group">
              <label for="contact-message" class="sr-only">Message</label>
              <textarea id="contact-message" class="form-control" placeholder="Message"></textarea>
  
        </div>
      <button type="submit" class="btn">Submit</button>
   
     </div>  
  </div>             
</div>
  
  
  <footer>
      
      <div class="row text-white" >
      ABOUT THIS PAGE<br>
        
      Created by me.<br><br>
        
      </div>
      <div class="row text-white">
      
      <p class="text-white">SOCIAL MEDIA</p>
      
      <a href="http://www.facebook.com" target='_blank' class="btn btn-lg btn-round"><i class="fa fa-facebook-square" aria-hidden="true" ></i></a>
      
       <a href="http://codepen.io/Juan1417/" target='_blank' class="btn btn-lg btn-round"><i class="fa fa-codepen" aria-hidden="true" ></i></a> 
            
      <a href="http://www.twitter.com" target='_blank' class="btn btn-lg btn-round"><i class="fa fa-twitter-square" aria-hidden="true" ></i></a>
      
 </div>  

<a href="#titles"class="btn btn-lg btn-round fixedbutton"><i class="fa fa-level-up" aria-hidden="true" ></i>
      </a>

</footer>
  
    
  
</div>

css bootstrap

asked by Juan 28.11.2016 в 00:46

source

1 answer

Problem with if and else when using Firebase in Javascript How to implement the following code to a structure?

score 0 · Accepted Answer

The carousel does not fit the width of the container because you are indicating it .

This is your class MyCarousel :

#myCarousel{

  max-width:580px;
  margin:auto;

}

Do you see that attribute max-width ? With that you are giving your carousel a maximum size of 580 px, if your viewport is smaller, you will see that it is adjusted, but if it is bigger it only reaches 580 px.

Also, the images of your carousel have a fixed height and width, they can not be adjusted! .

In short, your carousel behaves as expected. Do not you want that behavior? Change it! .

TIP: The easiest thing to do is to erase it

Plus

It is not recommended that you have more than one container on your page, and it is discouraged to use nested containers, look .

Bonus

My CodePen: link