Need to design 8 boxes in two rows

Question

How to design 8 boxes like following using bootstrap?

Please ignore the colors each box would be similar to a visit card.
They should only be 8 boxes in two rows.
With specific margins to the right and left in big screens and no margin in small screens. So in tablet should be 2 and in mobile version only 1 per row. Also need to make sure the size of boxes are all in the same size.

<div class="container-fluid">
                    <div style="border-style: solid;padding:1%;" class="col-md-2 col-md-offset-1">
                        <div class="row">
                            <div class="col-md-7">
                                <h4>Title</h4>
                                <p>Name</p>
                                <p>Family</p>
                            </div>
                            <div class="col-md-5">
                                <img class="img-responsive" src="www.example.com/photo">
                            </div>
                        </div>
                        <div class="row">
                            <p>
                                Description
                            </p>
                        </div>
                    </div>
                    <div style="border-style: solid;padding:1%" class="col-md-2">
                        <div class="row">
                            <div class="col-md-7">
                                <h4>Title</h4>
                                <p>Name</p>
                                <p>Family</p>
                            </div>
                            <div class="col-md-5">
                                <img class="img-responsive" src="www.example.com/photo">
                            </div>
                        </div>
                        <div class="row">
                            <p>
                                Description
                            </p>
                        </div>
                    </div>
                    <div style="border-style: solid;padding:1%" class="col-md-2">
                        <div class="row">
                            <div class="col-md-7">
                                <h4>Title</h4>
                                <p>Name</p>
                                <p>Family</p>
                            </div>
                            <div class="col-md-5">
                                <img class="img-responsive" src="www.example.com/photo">
                            </div>
                        </div>
                        <div class="row">
                            <p>
                                Description
                            </p>
                        </div>
                    </div>
                    <div style="border-style: solid;padding:1%" class="col-md-2">
                        <div class="row">
                            <div class="col-md-7">
                                <h4>Title</h4>
                                <p>Name</p>
                                <p>Family</p>
                            </div>
                            <div class="col-md-5">
                                <img class="img-responsive" src="www.example.com/photo">
                            </div>
                        </div>
                        <div class="row">
                            <p>
                                Description
                            </p>
                        </div>
                    </div>
                </div>

@JasonLydon not necessarily, bootstrap is just the preferred option. — Jack, May 31 '15 at 05:21

Jason Lydon · Accepted Answer · 2015-06-24T15:20:42.310

I know the question was about Bootstrap, but I thought it would be helpful for people to see it done with just html and css. I hate seeing people work real hard to make ugly solutions with Bootstrap, when this so basic if you didn't use Bootstrap.

CODEPEN

HTML:
just a list of business cards

<ul>
    <li>
      <img src="http://lorempixel.com/50/50/sports/" alt="John Doe"/>
      <span class="content">
        <strong>Johnny Realestate</strong>
        <a href="mailto:johnny@realestate.io" title="Email Johnny">johnny@realestate.io</a> 
        <a href="tel:2223334444" title="Call Johnny">222.333.4444</a> 
        <address>
          1 Real Estate Court<br>
          suite 101<br>
          Real, AZ 10101
        </address>
      </span>
    </li>
    ... REPEAT
  </ul>

CSS:

mobile first
display:flex;
0 to 599px => mobile layout |=| 1 item across
599px to 1024px => tablet layout |=|=| 2 items across

1024px and greater => desktop layout |=|=|=|=| 4 items across

ul {
  list-style:none;
  display:flex;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  max-width:1024px; // should match the page width, this value is also reflected in the media queries
  width:100%;
  margin: 0 auto; // auto can be replaced with any value
  padding: 1em 0;
  background: orange;
}
ul li {
  width: 100%;
  margin: 0 0 1em 0;
  box-shadow:0px 0px 1px 1px black;
  background: white;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}
ul li img {
  height:50px;
  width: 50px;
  margin: 0 5px 0 0;
}
ul li span {
  width: calc(100% - 55px);
}
@media (min-width:599px){
  ul li {
    width: 49%;
    margin: 0 2% 1em 0;
  }
}
@media (min-width:599px) and (max-width:1024px){
  ul li:nth-child(2n + 2){
    margin: 0 0 1em 0;
  }
}
@media (min-width:1024px){
  ul li {
    width: 24%;
    margin: 0 1.3333333333% 1em 0;
  }
  ul li:nth-child(4n + 4){
    margin: 0 0 1em 0;
  }
}

There are lots of ways to optimize this example or tweak it to reach your goals. I hope this helps.

[UPDATE] I added the prefixes for display:flex; and flex-wrap: wrap;, but if you can, you should add AutoPrefixer to your workflow!

Great thanks,the only issue is that I am not sure how to put a
title for the section. The title should be located above the section on the top left corner. — Jack, May 29 '15 at 00:17
There is an issue with the code please check following question http://stackoverflow.com/questions/31018323/my-design-is-not-consitent-in-firefox-and-safari — Jack, Jun 24 '15 at 05:33
There needs to be prefixes for `flex`, I'll add it to the sample. — Jason Lydon, Jun 24 '15 at 15:14

matthewelsom · Answer 2 · 2015-05-29T05:30:08.243

My understanding from your question is that you want the container margin-left and right to be removed on smaller screens, so the cards touch the edge of the screen.

The demo below has the 8 cards in two rows. I have added some padding and margin to even up the spacing of the cards, the nth-child rule is used to apply that to the correct card.

If you want to keep the left and right margin, you can just exclude my media queries.

DEMO HERE

.card-row {
  background: lightsalmon;
}

.card .inner {
  height: 100px;
  padding: 10px;
  background: whitesmoke;
  color: grey;
  box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.2);
  margin: 15px 0;
}

@media screen and (max-width: 991px) {
  .container {
    width: 100%;
  }
  .card:nth-child(odd) {
    background: orange;
    padding-left: 0;
  }
  .card:nth-child(even) {
    background: darkorange;
    padding-right: 0;
  }
}

@media screen and (max-width: 767px) {
  .card:nth-child(odd), .card:nth-child(even) {
    background: coral;
    padding: 0;
  }
}

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

<div class="container">
  <h3>Heading</h3>
  <div class="row card-row">
    <div class="card col-xs-12 col-sm-6 col-md-3">
      <div class="inner">
        <p>hello</p>
      </div>
    </div>
    <div class="card col-xs-12 col-sm-6 col-md-3">
      <div class="inner">
        <p>hello</p>
      </div>
    </div>
    <div class="card col-xs-12 col-sm-6 col-md-3">
      <div class="inner">
        <p>Hello, I am beautiful content... please change me!</p>
      </div>
    </div>
    <div class="card col-xs-12 col-sm-6 col-md-3">
      <div class="inner">
        <p>hello</p>
      </div>
    </div>
  </div>
  <div class="row card-row">
    <div class="card col-xs-12 col-sm-6 col-md-3">
      <div class="inner">
        <p>hello</p>
      </div>
    </div>
    <div class="card col-xs-12 col-sm-6 col-md-3">
      <div class="inner">
        <p>hello</p>
      </div>
    </div>
    <div class="card col-xs-12 col-sm-6 col-md-3">
      <div class="inner">
        <p>Hello, I am beautiful content... please change me!</p>
      </div>
    </div>
    <div class="card col-xs-12 col-sm-6 col-md-3">
      <div class="inner">
        <p>hello</p>
      </div>
    </div>
  </div>
</div>

I have also added some background-color - but you can remove that it's just to help you see the breakpoints and changes when you resize the browser.

Thanks the problem is I should have a
title above the section. It should be located on the top left corner of the section. Also in big screens there should be left and right margins for the section. — Jack, May 29 '15 at 00:22
Thats it, I just found a new issue, if you add more content to each box the sizes would be the same. for example adding this to the first box
Name

49 585 585 585

d fsdf sdfsdfsdfdsf

XX XXX XXXX XXXX XXXXX XXXX
I am working on it. — Jack, May 29 '15 at 05:07
Good, glad the first part is there! Obviously you want the card height to respond to the content, but if you change 1 box (with the content you added) do you want all the others in the row to match in height? — matthewelsom, May 29 '15 at 05:27
Yeah, thanks, Jason Lydon's answer is also correct, although it has a few issues, for example if you type a lengthy text for one of the boxes the height of other ones increases but their width is always the same. If you type a lengthy text and do not use
it would go beyond the border of the box. It is a simple question but has many details. — Jack, May 29 '15 at 05:44
**Jack**, Generally it would be expected that most business cards would be the same given size. As some as you allow different heights for some of these divs you are going to get an uneven look and a problem with how bootstrap can handle these to flow to different screen sizes. Why not just keep the **height FIXED** and just adjust the **FONT SIZE** of a div where you need a little more text. This will look more even having all the divs the same size and allow bootstrap to do it's thing. — AngularJR, May 31 '15 at 03:25

score 0 · Answer 3 · answered May 04 '15 at 06:08

you need to add col-lg-3 to your Div some like code Below.

    <div class="row">

        <div class="col-lg-12">
            <h1 class="page-header">Thumbnail Gallery</h1>
        </div>

        <div class="col-lg-3 col-md-4 col-xs-6 thumb">
            <a href="#" class="thumbnail">
                <img alt="" src="http://placehold.it/400x300" class="img-responsive">
            </a>
        </div>
        <div class="col-lg-3 col-md-4 col-xs-6 thumb">
            <a href="#" class="thumbnail">
                <img alt="" src="http://placehold.it/400x300" class="img-responsive">
            </a>
        </div>
        <div class="col-lg-3 col-md-4 col-xs-6 thumb">
            <a href="#" class="thumbnail">
                <img alt="" src="http://placehold.it/400x300" class="img-responsive">
            </a>
        </div>
        <div class="col-lg-3 col-md-4 col-xs-6 thumb">
            <a href="#" class="thumbnail">
                <img alt="" src="http://placehold.it/400x300" class="img-responsive">
            </a>
        </div>
        <div class="col-lg-3 col-md-4 col-xs-6 thumb">
            <a href="#" class="thumbnail">
                <img alt="" src="http://placehold.it/400x300" class="img-responsive">
            </a>
        </div>
        <div class="col-lg-3 col-md-4 col-xs-6 thumb">
            <a href="#" class="thumbnail">
                <img alt="" src="http://placehold.it/400x300" class="img-responsive">
            </a>
        </div>
        <div class="col-lg-3 col-md-4 col-xs-6 thumb">
            <a href="#" class="thumbnail">
                <img alt="" src="http://placehold.it/400x300" class="img-responsive">
            </a>
        </div>
        <div class="col-lg-3 col-md-4 col-xs-6 thumb">
            <a href="#" class="thumbnail">
                <img alt="" src="http://placehold.it/400x300" class="img-responsive">
            </a>
        </div>
        <div class="col-lg-3 col-md-4 col-xs-6 thumb">
            <a href="#" class="thumbnail">
                <img alt="" src="http://placehold.it/400x300" class="img-responsive">
            </a>
        </div>
        <div class="col-lg-3 col-md-4 col-xs-6 thumb">
            <a href="#" class="thumbnail">
                <img alt="" src="http://placehold.it/400x300" class="img-responsive">
            </a>
        </div>
        <div class="col-lg-3 col-md-4 col-xs-6 thumb">
            <a href="#" class="thumbnail">
                <img alt="" src="http://placehold.it/400x300" class="img-responsive">
            </a>
        </div>
        <div class="col-lg-3 col-md-4 col-xs-6 thumb">
            <a href="#" class="thumbnail">
                <img alt="" src="http://placehold.it/400x300" class="img-responsive">
            </a>
        </div>
    </div>




</div>

OR See Link Below
http://ironsummitmedia.github.io/startbootstrap-thumbnail-gallery/

thanks, that makes the boxes a bit bigger but does not solve the other issues. As I said they are not containing images only, they are like business cards. Another issue is I do not want them to be in the middle of the page, they should have a specific margin from left and right. — Jack, May 04 '15 at 06:15
you can customize this code according to your choice,
is the only container. you can put anything in that. and you can overwrite the margin on "col-md-4". — khurram, May 04 '15 at 06:22

Francis Ezengige · Answer 4 · 2015-05-04T12:24:07.087

Use the following markup

<div class="container">

    <div class="row">
        <div class="col-sm-12 col-md-6 col-lg-3">
            <div style="border-style: solid; padding: 1%;">
                <div class="row">
                    <div class="col-xs-6">
                        <h4>Title</h4>
                        <p>Name</p>
                        <p>Family</p>
                        <p>
                            Description
                        </p>
                    </div> 
                    <div class="col-xs-6">
                    <img class="img-responsive" src="www.example.com/photo">
                </div>
                </div>

            </div>
        </div>

         <div class="col-sm-12 col-md-6 col-lg-3">
            <div style="border-style: solid; padding: 1%;">
                <div class="row">
                    <div class="col-xs-6">
                        <h4>Title</h4>
                        <p>Name</p>
                        <p>Family</p>
                        <p>
                            Description
                        </p>
                    </div> 
                    <div class="col-xs-6">
                    <img class="img-responsive" src="www.example.com/photo">
                </div>
                </div>

            </div>
        </div>

         <div class="col-sm-12 col-md-6 col-lg-3">
            <div style="border-style: solid; padding: 1%;">
                <div class="row">
                    <div class="col-xs-6">
                        <h4>Title</h4>
                        <p>Name</p>
                        <p>Family</p>
                        <p>
                            Description
                        </p>
                    </div> 
                    <div class="col-xs-6">
                    <img class="img-responsive" src="www.example.com/photo">
                </div>
                </div>

            </div>
        </div>

         <div class="col-sm-12 col-md-6 col-lg-3">
            <div style="border-style: solid; padding: 1%;">
                <div class="row">
                    <div class="col-xs-6">
                        <h4>Title</h4>
                        <p>Name</p>
                        <p>Family</p>
                        <p>
                            Description
                        </p>
                    </div> 
                    <div class="col-xs-6">
                    <img class="img-responsive" src="www.example.com/photo">
                </div>
                </div>

            </div>
        </div>


    </div>
      <div class="row" >
        <div  class="col-sm-12 col-md-6 col-lg-3">
            <div style="border-style: solid; padding: 1%; ">
                <div class="row">
                    <div class="col-xs-6">
                        <h4>Title</h4>
                        <p>Name</p>
                        <p>Family</p>
                        <p>
                            Description
                        </p>
                    </div> 
                    <div class="col-xs-6">
                    <img class="img-responsive" src="www.example.com/photo">
                </div>
                </div>

            </div>
        </div>

         <div class="col-sm-12 col-md-6 col-lg-3">
            <div style="border-style: solid; padding: 1%;">
                <div class="row">
                    <div class="col-xs-6">
                        <h4>Title</h4>
                        <p>Name</p>
                        <p>Family</p>
                        <p>
                            Description
                        </p>
                    </div> 
                    <div class="col-xs-6">
                    <img class="img-responsive" src="www.example.com/photo">
                </div>
                </div>

            </div>
        </div>

         <div class="col-sm-12 col-md-6 col-lg-3">
            <div style="border-style: solid; padding: 1%;">
                <div class="row">
                    <div class="col-xs-6">
                        <h4>Title</h4>
                        <p>Name</p>
                        <p>Family</p>
                        <p>
                            Description
                        </p>
                    </div> 
                    <div class="col-xs-6">
                    <img class="img-responsive" src="www.example.com/photo">
                </div>
                </div>

            </div>
        </div>

         <div class="col-sm-12 col-md-6 col-lg-3">
            <div style="border-style: solid; padding: 1%;">
                <div class="row">
                    <div class="col-xs-6">
                        <h4>Title</h4>
                        <p>Name</p>
                        <p>Family</p>
                        <p>
                            Description
                        </p>
                    </div> 
                    <div class="col-xs-6">
                    <img class="img-responsive" src="www.example.com/photo">
                </div>
                </div>

            </div>
        </div>


    </div>
</div>

thanks, the issue is you put them in a container, they should not be in the middle, please read the last bullet point, another issue is if you type lengthy texts they go beyond the box border. — Jack, May 04 '15 at 22:23

score 0 · Answer 5 · answered May 04 '15 at 12:17

You can use a simple method is using the clear:both concept after every 4 elements in a row

<style>
.clear{clear: both;}
</style>

            <div class="container-fluid">
                <div style="border-style: solid;padding:1%;" class="col-md-2 col-md-offset-1">
                    <div class="row">
                        <div class="col-md-7">
                            <h4>Title</h4>
                            <p>Name</p>
                            <p>Family</p>
                        </div>
                        <div class="col-md-5">
                            <img class="img-responsive" src="www.example.com/photo">
                        </div>
                    </div>
                    <div class="row">
                        <p>
                            Description
                        </p>
                    </div>
                </div>
                <div style="border-style: solid;padding:1%" class="col-md-2">
                    <div class="row">
                        <div class="col-md-7">
                            <h4>Title</h4>
                            <p>Name</p>
                            <p>Family</p>
                        </div>
                        <div class="col-md-5">
                            <img class="img-responsive" src="www.example.com/photo">
                        </div>
                    </div>
                    <div class="row">
                        <p>
                            Description
                        </p>
                    </div>
                </div>
                <div style="border-style: solid;padding:1%" class="col-md-2">
                    <div class="row">
                        <div class="col-md-7">
                            <h4>Title</h4>
                            <p>Name</p>
                            <p>Family</p>
                        </div>
                        <div class="col-md-5">
                            <img class="img-responsive" src="www.example.com/photo">
                        </div>
                    </div>
                    <div class="row">
                        <p>
                            Description
                        </p>
                    </div>
                </div>
                <div style="border-style: solid;padding:1%" class="col-md-2">
                    <div class="row">
                        <div class="col-md-7">
                            <h4>Title</h4>
                            <p>Name</p>
                            <p>Family</p>
                        </div>
                        <div class="col-md-5">
                            <img class="img-responsive" src="www.example.com/photo">
                        </div>
                    </div>
                    <div class="row">
                        <p>
                            Description
                        </p>
                    </div>
                </div>
               <div class="clear"></div>
              <div style="border-style: solid;padding:1%;" class="col-md-2 col-md-offset-1">
                    <div class="row">
                        <div class="col-md-7">
                            <h4>Title</h4>
                            <p>Name</p>
                            <p>Family</p>
                        </div>
                        <div class="col-md-5">
                            <img class="img-responsive" src="www.example.com/photo">
                        </div>
                    </div>
                    <div class="row">
                        <p>
                            Description
                        </p>
                    </div>
                </div>
                <div style="border-style: solid;padding:1%" class="col-md-2">
                    <div class="row">
                        <div class="col-md-7">
                            <h4>Title</h4>
                            <p>Name</p>
                            <p>Family</p>
                        </div>
                        <div class="col-md-5">
                            <img class="img-responsive" src="www.example.com/photo">
                        </div>
                    </div>
                    <div class="row">
                        <p>
                            Description
                        </p>
                    </div>
                </div>
                <div style="border-style: solid;padding:1%" class="col-md-2">
                    <div class="row">
                        <div class="col-md-7">
                            <h4>Title</h4>
                            <p>Name</p>
                            <p>Family</p>
                        </div>
                        <div class="col-md-5">
                            <img class="img-responsive" src="www.example.com/photo">
                        </div>
                    </div>
                    <div class="row">
                        <p>
                            Description
                        </p>
                    </div>
                </div>
                <div style="border-style: solid;padding:1%" class="col-md-2">
                    <div class="row">
                        <div class="col-md-7">
                            <h4>Title</h4>
                            <p>Name</p>
                            <p>Family</p>
                        </div>
                        <div class="col-md-5">
                            <img class="img-responsive" src="www.example.com/photo">
                        </div>
                    </div>
                    <div class="row">
                        <p>
                            Description
                        </p>
                    </div>
                </div>
               <div class="clear"></div>

Thanks, I used it but there is no space between boxes and in small size screen the text (description) goes out of box border. — Jack, May 04 '15 at 22:22

score 0 · Answer 6 · answered May 27 '15 at 07:28

Try with this code: Demo

Update Link Demo with background color class

HTML:

<div class="container-fluid">
    <div class="row pb10">
        <div class="col-md-3 mt20">
            <div class="card">
                <div class="col-md-7">
                    <h4>Title</h4>
                    <p>Name</p>
                    <p>Family</p>
                </div>
                <div class="col-md-5 pt5">
                    <img class="img-responsive" src="http://placehold.it/150x150">
                </div>
                <div class="col-md-12">
                    <p class="desc">
                        Description
                    </p>
                </div>
                <div class="clearfix"></div>
            </div>
        </div>
        <div class="col-md-3 mt20">
            <div class="card">
                <div class="col-md-7">
                    <h4>Title</h4>
                    <p>Name</p>
                    <p>Family</p>
                </div>
                <div class="col-md-5 pt5">
                    <img class="img-responsive" src="http://placehold.it/150x150">
                </div>
                <div class="col-md-12">
                    <p class="desc">
                        Description
                    </p>
                </div>
                <div class="clearfix"></div>
            </div>
        </div>
        <div class="col-md-3 mt20">
            <div class="card">
                <div class="col-md-7">
                    <h4>Title</h4>
                    <p>Name</p>
                    <p>Family</p>
                </div>
                <div class="col-md-5 pt5">
                    <img class="img-responsive" src="http://placehold.it/150x150">
                </div>
                <div class="col-md-12">
                    <p class="desc">
                        Description
                    </p>
                </div>
                <div class="clearfix"></div>
            </div>
        </div>
        <div class="col-md-3 mt20">
            <div class="card">
                <div class="col-md-7">
                    <h4>Title</h4>
                    <p>Name</p>
                    <p>Family</p>
                </div>
                <div class="col-md-5 pt5">
                    <img class="img-responsive" src="http://placehold.it/150x150">
                </div>
                <div class="col-md-12">
                    <p class="desc">
                        Description
                    </p>
                </div>
                <div class="clearfix"></div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-md-3 mt20">
            <div class="card">
                <div class="col-md-7">
                    <h4>Title</h4>
                    <p>Name</p>
                    <p>Family</p>
                </div>
                <div class="col-md-5 pt5">
                    <img class="img-responsive" src="http://placehold.it/150x150">
                </div>
                <div class="col-md-12">
                    <p class="desc">
                        Description
                    </p>
                </div>
                <div class="clearfix"></div>
            </div>
        </div>
        <div class="col-md-3 mt20">
            <div class="card">
                <div class="col-md-7">
                    <h4>Title</h4>
                    <p>Name</p>
                    <p>Family</p>
                </div>
                <div class="col-md-5 pt5">
                    <img class="img-responsive" src="http://placehold.it/150x150">
                </div>
                <div class="col-md-12">
                    <p class="desc">
                        Description
                    </p>
                </div>
                <div class="clearfix"></div>
            </div>
        </div>
        <div class="col-md-3 mt20">
            <div class="card">
                <div class="col-md-7">
                    <h4>Title</h4>
                    <p>Name</p>
                    <p>Family</p>
                </div>
                <div class="col-md-5 pt5">
                    <img class="img-responsive" src="http://placehold.it/150x150">
                </div>
                <div class="col-md-12">
                    <p class="desc">
                        Description
                    </p>
                </div>
                <div class="clearfix"></div>
            </div>
        </div>
        <div class="col-md-3 mt20">
            <div class="card">
                <div class="col-md-7">
                    <h4>Title</h4>
                    <p>Name</p>
                    <p>Family</p>
                </div>
                <div class="col-md-5 pt5">
                    <img class="img-responsive" src="http://placehold.it/150x150">
                </div>
                <div class="col-md-12">
                    <p class="desc">
                        Description
                    </p>
                </div>
                <div class="clearfix"></div>
            </div>
        </div>
    </div>
</div>

CSS:

.card {
    border: 1px solid #333;
    padding:1%;
}
.mt20 {
    margin-top: 20px;
}
.pt5 {
    padding-top:8px;
}
.pb10 {
    padding-bottom:10px;
}
.desc {
    border-top: 1px solid #999;
    padding-top: 10px;
    margin-top: 10px;
}

Thanks the problem is if for example you have a lengthy content for the top left box the size of the other boxes wont change. In this way the boxes wont be always the same, regardless of the size of their content. — Jack, May 29 '15 at 00:24

score 0 · Answer 7 · answered May 27 '15 at 09:22

Assuming that you are using bootstrap:-

<div class="row">
  <div class="col-md-12">
  <div class="col-md-3">
      hello
  </div>

  <div class="col-md-3">
      hello
  </div>

 <div class="col-md-3">
      hello
  </div>

 <div class="col-md-3">
      hello
  </div>
  </div>
 </div>



  <!--second row-->

 <div class="row">
    <div class="col-md-12">
  <div class="col-md-3">
      hello
  </div>

  <div class="col-md-3">
      hello
  </div>

 <div class="col-md-3">
      hello
  </div>

 <div class="col-md-3">
      hello
    </div>
   </div>
 </div>

Suraj Mevada · Answer 8 · 2015-05-29T12:07:32.727

Use the following markup:

<div class="container-fluid">
    <div class="row">
        <div class="col-xs-12 col-sm-6 col-md-3 col-lg-3">
            <div class="card">Text</div>
        </div>
        <div class="col-xs-12 col-sm-6 col-md-3 col-lg-3">
            <div class="card">Text</div>
        </div>
        <div class="col-xs-12 col-sm-6 col-md-3 col-lg-3">
            <div class="card">Text</div>
        </div>
        <div class="col-xs-12 col-sm-6 col-md-3 col-lg-3">
            <div class="card">Text</div>
        </div>
    </div>

    <div class="row">
        <div class="col-xs-12 col-sm-6 col-md-3 col-lg-3">
            <div class="card">Text</div>
        </div>
        <div class="col-xs-12 col-sm-6 col-md-3 col-lg-3">
            <div class="card">Text</div>
        </div>
        <div class="col-xs-12 col-sm-6 col-md-3 col-lg-3">
            <div class="card">Text</div>
        </div>
        <div class="col-xs-12 col-sm-6 col-md-3 col-lg-3">
            <div class="card">Text</div>
        </div>
    </div>
</div>

css:

.container-fluid{
    overflow: hidden;
}
.row{margin: 0 -30px;}

.card{
    border: 1px solid red;
    margin: 15px 0;
    padding: 15px;
    background: #f0f0f0;
}

JSFiddle Demo

score 0 · Answer 9 · answered May 28 '15 at 13:50

This one might help

Bootstrap Grid System

Html:

<div class="container-fluid">
    <div class="col-md-3 col-sm-6 col-xs-12">
        <img class="img-responsive" src="www.example.com/photo">
    </div>
    <div class="col-md-3 col-sm-6 col-xs-12">
        <img class="img-responsive" src="www.example.com/photo">
    </div>
    <div class="col-md-3 col-sm-6 col-xs-12">
        <img class="img-responsive" src="www.example.com/photo">
    </div>
    <div class="col-md-3 col-sm-6 col-xs-12">
        <img class="img-responsive" src="www.example.com/photo">
    </div>
    <div class="col-md-3 col-sm-6 col-xs-12">
        <img class="img-responsive" src="www.example.com/photo">
    </div>
    <div class="col-md-3 col-sm-6 col-xs-12">
        <img class="img-responsive" src="www.example.com/photo">
    </div>
    <div class="col-md-3 col-sm-6 col-xs-12">
        <img class="img-responsive" src="www.example.com/photo">
    </div>
    <div class="col-md-3 col-sm-6 col-xs-12">
        <img class="img-responsive" src="www.example.com/photo">
    </div>
</div>

score 0 · Answer 10 · answered May 28 '15 at 14:07

This one might help

Bootstrap Grid System

Html:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container-fluid">
    <div class="col-md-3 col-sm-6 col-xs-12">
        <img class="img-responsive" src="http://www.hutchhouse.com/wp-content/uploads/2013/08/whats-changed-in-boostrap.jpg">
    </div>
    <div class="col-md-3 col-sm-6 col-xs-12">
        <img class="img-responsive" src="http://www.hutchhouse.com/wp-content/uploads/2013/08/whats-changed-in-boostrap.jpg">
    </div>
    <div class="col-md-3 col-sm-6 col-xs-12">
        <img class="img-responsive" src="http://www.hutchhouse.com/wp-content/uploads/2013/08/whats-changed-in-boostrap.jpg">
    </div>
    <div class="col-md-3 col-sm-6 col-xs-12">
        <img class="img-responsive" src="http://www.hutchhouse.com/wp-content/uploads/2013/08/whats-changed-in-boostrap.jpg">
    </div>
    <div class="col-md-3 col-sm-6 col-xs-12">
        <img class="img-responsive" src="http://www.hutchhouse.com/wp-content/uploads/2013/08/whats-changed-in-boostrap.jpg">
    </div>
    <div class="col-md-3 col-sm-6 col-xs-12">
        <img class="img-responsive" src="http://www.hutchhouse.com/wp-content/uploads/2013/08/whats-changed-in-boostrap.jpg">
    </div>
    <div class="col-md-3 col-sm-6 col-xs-12">
        <img class="img-responsive" src="http://www.hutchhouse.com/wp-content/uploads/2013/08/whats-changed-in-boostrap.jpg">
    </div>
    <div class="col-md-3 col-sm-6 col-xs-12">
        <img class="img-responsive" src="http://www.hutchhouse.com/wp-content/uploads/2013/08/whats-changed-in-boostrap.jpg">
    </div>
</div>

Need to design 8 boxes in two rows

10 Answers10

title for the section. The title should be located above the section on the top left corner.

title above the section. It should be located on the top left corner of the section. Also in big screens there should be left and right margins for the section.

Name

Linked