Mateus Luiz Mateus Luiz - 6 months ago 9
HTML Question

Bootstrap .row getting out

I was studing Bootstrap grid system, so i made a row with some images, but when i reduce de resolution of the screen, my images are going below the container.

<div class="container main" id="second-box">

<h2 class="font-montserrat text-center"> Projects <i class="fa fa-file-code-o"></i>
</h2>
<div>
<div class="row">
<img src= "http://jackson.armylive.dodlive.mil/files/2014/05/StandBy.jpg" class="projects-img img-responsive img-rounded col-md-4">
<img src= "http://jackson.armylive.dodlive.mil/files/2014/05/StandBy.jpg" class="projects-img img-responsive img-rounded col-md-4">
<img src= "http://jackson.armylive.dodlive.mil/files/2014/05/StandBy.jpg" class="projects-img img-responsive img-rounded col-md-4">
<img src= "http://jackson.armylive.dodlive.mil/files/2014/05/StandBy.jpg" class="projects-img img-responsive img-rounded col-md-4">
</div>
</div> </div>


Here is the css:

#second-box{
margin: 1px auto;
height: 700px;
}
.main {
background-color: #e0f0e2;
width: 70%;
box-shadow: 0px 0px 5px 0px;
}
.projects-img{
width: 360px;
margin-left: 20px;
margin-bottom: 20px;}


Images:

Normal

Getting out

Answer

Can I remove height: 700px;? `Try this:

#second-box {
  margin: 1px auto;
}
.main {
  background-color: #e0f0e2;
  width: 70%;
  box-shadow: 0px 0px 5px 0px;
}
.projects-img {
  width: 360px;
  margin: 0 auto 20px;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">

<div class="container main" id="second-box">

  <h2 class="font-montserrat text-center"> Projects <i class="fa fa-file-code-o"></i></h2>

  <div class="row">
    <div class="col-md-6"><img src="http://jackson.armylive.dodlive.mil/files/2014/05/StandBy.jpg " class="projects-img img-responsive img-rounded"></div>
    <div class="col-md-6"><img src="http://jackson.armylive.dodlive.mil/files/2014/05/StandBy.jpg" class="projects-img img-responsive img-rounded"></div>
    <div class="col-md-6"><img src="http://jackson.armylive.dodlive.mil/files/2014/05/StandBy.jpg " class="projects-img img-responsive img-rounded"></div>
    <div class="col-md-6"><img src="http://jackson.armylive.dodlive.mil/files/2014/05/StandBy.jpg" class="projects-img img-responsive img-rounded"></div>
  </div>
</div>

Comments