How to divide screen size into six parts Twitter Bootstrap?

behzadrazzaqi
January 16, 2017
132 views
0 votes
2 Answers

I want to divide the screen into six part with bootstrap like the shape below

Answers

You can use vh css unit to specify the viewport height for each column.

HTML:

<div class="container-fluid">
  <div class="row">
    <div class="col-sm-6">1</div>
    <div class="col-sm-6">2</div>
    <div class="col-sm-6">3</div>
    <div class="col-sm-6">4</div>
    <div class="col-sm-6">5</div>
    <div class="col-sm-6">6</div>
  </div>
</div>

CSS:

@media (min-width: 768px) {
  .col-sm-6 {
    height: 33.33vh;
  }
}

.container-fluid .col-sm-6 {
  border: 1px solid black;
  background: green;
  height: 100vh;
  color: white;
}
@media (min-width: 768px) {
  .container-fluid .col-sm-6 {
      height: 33.33vh;  
  } 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
  <div class="row">
    <div class="col-sm-6">1</div>
    <div class="col-sm-6">2</div>
    <div class="col-sm-6">3</div>
    <div class="col-sm-6">4</div>
    <div class="col-sm-6">5</div>
    <div class="col-sm-6">6</div>
  </div>
</div>

<div class="container-fluid">
  <div class="row">
    <div class="col-md-6 sameHeight">
      
    </div>
    <div class="col-md-6 sameHeight">
      
    </div>
    <div class="col-md-6 sameHeight">
      
    </div>
    <div class="col-md-6 sameHeight">
      
    </div>
    <div class="col-md-6 sameHeight">
      
    </div>
    <div class="col-md-6 sameHeight">
      
    </div>
  </div>
 </div>

You can use twitter bootstrap classes like this and give each div same height.

.sameHeight{
  height:30px;
}

Please signup or login to give your own answer.

Click here to cancel reply.