Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Need to design 8 boxes in two rows

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.

Demo enter image description here

<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>
like image 220
Jack Avatar asked May 04 '15 06:05

Jack


People also ask

How do I make 3 div horizontally in HTML?

Three or more different div can be put side-by-side using CSS. Use CSS property to set the height and width of div and use display property to place div in side-by-side format. float:left; This property is used for those elements(div) that will float on left side.

How do I split a page into two sections in HTML?

In HTML, we can divide a whole webpage into sections by using <div> tag along with the CSS. By default, a <div> tag divides a webpage into horizontal sections. However, you can use the float property of CSS to make the vertical sections of the webpage.

What is bootstrap row?

The Bootstrap row is an essential element in the bootstrap grid system to hold the column class. It is used for horizontal partition in the container class of the web application. The bootstrap row class is used to make a horizontal layout to contain the column class on the web page.


2 Answers

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:[email protected]" title="Email Johnny">[email protected]</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!

like image 120
Jason Lydon Avatar answered Oct 12 '22 19:10

Jason Lydon


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.

like image 42
matthewelsom Avatar answered Oct 12 '22 18:10

matthewelsom