7 Equal Columns in Bootstrap

7 equal columns in bootstrap

Well, IMO you probably need to override the width of the columns by using CSS3 @media query.

Here is my attempt to create a 7-col grid system:

<div class="container">
  <div class="row seven-cols">
    <div class="col-md-1">Col 1</div>
    <div class="col-md-1">Col 2</div>
    <div class="col-md-1">Col 3</div>
    <div class="col-md-1">Col 4</div>
    <div class="col-md-1">Col 5</div>
    <div class="col-md-1">Col 6</div>
    <div class="col-md-1">Col 7</div>
  </div>
</div>
@media (min-width: 768px){
  .seven-cols .col-md-1,
  .seven-cols .col-sm-1,
  .seven-cols .col-lg-1  {
    width: 100%;
    *width: 100%;
  }
}

@media (min-width: 992px) {
  .seven-cols .col-md-1,
  .seven-cols .col-sm-1,
  .seven-cols .col-lg-1 {
    width: 14.285714285714285714285714285714%;
    *width: 14.285714285714285714285714285714%;
  }
}

/**
 *  The following is not really needed in this case
 *  Only to demonstrate the usage of @media for large screens
 */    
@media (min-width: 1200px) {
  .seven-cols .col-md-1,
  .seven-cols .col-sm-1,
  .seven-cols .col-lg-1 {
    width: 14.285714285714285714285714285714%;
    *width: 14.285714285714285714285714285714%;
  }
}

The value of width comes from:

width = 100% / 7 column-number = 14.285714285714285714285714285714%

WORKING DEMO - (jsbin)

Run the code snippet and click on the "Full page".

.col-md-1 {  background-color: gold;}
@media (min-width: 768px){  .seven-cols .col-md-1,  .seven-cols .col-sm-1,  .seven-cols .col-lg-1  {    width: 100%;    *width: 100%;  }}

@media (min-width: 992px) {  .seven-cols .col-md-1,  .seven-cols .col-sm-1,  .seven-cols .col-lg-1 {    width: 14.285714285714285714285714285714%;    *width: 14.285714285714285714285714285714%;  }}

@media (min-width: 1200px) {  .seven-cols .col-md-1,  .seven-cols .col-sm-1,  .seven-cols .col-lg-1 {    width: 14.285714285714285714285714285714%;    *width: 14.285714285714285714285714285714%;  }}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">  <div class="row seven-cols">    <div class="col-md-1">Col 1</div>    <div class="col-md-1">Col 2</div>    <div class="col-md-1">Col 3</div>    <div class="col-md-1">Col 4</div>    <div class="col-md-1">Col 5</div>    <div class="col-md-1">Col 6</div>    <div class="col-md-1">Col 7</div>  </div></div>

Bootstrap - How to fit 7 columns in a div row with equal width and no wastage

Well, IMO you probably need to extend the default bootstrap rules to add a seven columns grid by using CSS3 @media query.

Here is my attempt to create a 7-col grid system:

Html

<div class="container">
  <div class="row seven-cols">
    <div class="col-md-1">Col 1</div>
    <div class="col-md-1">Col 2</div>
    <div class="col-md-1">Col 3</div>
    <div class="col-md-1">Col 4</div>
    <div class="col-md-1">Col 5</div>
    <div class="col-md-1">Col 6</div>
    <div class="col-md-1">Col 7</div>
  </div>
</div>

Media query

@media (min-width: 768px){
  .seven-cols .col-md-1,
  .seven-cols .col-sm-1,
  .seven-cols .col-lg-1  {
    width: 100%;
    *width: 100%;
  }
}

@media (min-width: 992px) {
  .seven-cols .col-md-1,
  .seven-cols .col-sm-1,
  .seven-cols .col-lg-1 {
    width: 14.285714285714285714285714285714%;
    *width: 14.285714285714285714285714285714%;
  }
}

/**
 *  The following is not really needed in this case
 *  Only to demonstrate the usage of @media for large screens
 */    
@media (min-width: 1200px) {
  .seven-cols .col-md-1,
  .seven-cols .col-sm-1,
  .seven-cols .col-lg-1 {
    width: 14.285714285714285714285714285714%;
    *width: 14.285714285714285714285714285714%;
  }
}

Bootstrap 3: how to 7 images in 12 columns

How about this?

  • Instead of calculating and allocating each item a width, using flex display on seven-cols and flex:1 on the seven-cols divs to make it flexibly grow and shrink.
  • When the max-width reaches a certain width threshold, change the flex-direction to column and hide the arrows.

.arrow1 {  padding-top: 75px;}
@media only screen and (max-width: 768px) {  .seven-cols {    display: flex;    flex-direction: column;  }  .arrow1,  .arrow2 {    display:none;  }}
@media (min-width: 769px) {  .seven-cols {    display: flex;    justify-content: center;  }  .seven-cols>* {    flex: 1;    max-width: 14%;  }  .no-padding .arrow1,  .no-padding .arrow2 {    width: 80%;  }}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"><link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css"><script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script><script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div id="whyus" class="container-fluid text-center">  <h2>Why Us?</h2>  <div class="row seven-cols">    <div class="no-padding">      <img src="http://via.placeholder.com/100x100">      <h4>Passion</h4>    </div>    <div class="no-padding">      <img src="https://i.stack.imgur.com/QqJno.png" class="arrow1">    </div>    <div class="no-padding">      <img src="http://via.placeholder.com/100x100">      <h4>Ideas</h4>    </div>    <div class="no-padding">      <img src="https://i.stack.imgur.com/17ox3.png" class="arrow2">    </div>    <div class="no-padding">      <img src="http://via.placeholder.com/100x100">      <h4>Work</h4>    </div>    <div class="no-padding">      <img src="https://i.stack.imgur.com/QqJno.png" class="arrow1">    </div>    <div class="no-padding">      <img src="http://via.placeholder.com/100x100">      <h4>Amazing Results</h4>    </div>  </div>
  CSS:

Five equal columns in twitter bootstrap

Use five divs with a class of span2 and give the first a class of offset1.

<div class="row-fluid">
    <div class="span2 offset1"></div>
    <div class="span2"></div>
    <div class="span2"></div>
    <div class="span2"></div>
    <div class="span2"></div>
</div>

Voila!
Five equally spaced and centered columns.

In bootstrap 3.0, this code would look like

<div class="row">
    <div class="col-md-2 col-md-offset-1"></div>
    <div class="col-md-2"></div>
    <div class="col-md-2"></div>
    <div class="col-md-2"></div>
    <div class="col-md-2"></div>
</div>

UPDATE

Since bootstrap 4.0 uses Flexbox by default:

<div class="row">
    <div class="col"></div>
    <div class="col"></div>
    <div class="col"></div>
    <div class="col"></div>
    <div class="col"></div>
</div>

How to divide Bootstrap row to same size five columns?

Use col-*-2 to each column

Also use justify-content-center to center the columns (because the one unnecessary column(12/2=6))

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>  <div class="container">  <div class="row justify-content-center">    <div class="col-sm-2">      1    </div>    <div class="col-sm-2">      2    </div>    <div class="col-sm-2">      3    </div>        <div class="col-sm-2">      4    </div>    <div class="col-sm-2">      5    </div>  </div></div>

How can I make Bootstrap columns all the same height?

LATEST SOLUTION (2022)

Solution 4 using Bootstrap 4 or 5

Bootstrap 4 and 5 use Flexbox by default, so there is no need for extra CSS.

Demo

<div class="container">
    <div class="row ">
        <div class="col-md-4" style="background-color: red">
          some content
        </div>
        <div class="col-md-4" style="background-color: yellow">
          catz
          <img width="100" height="100" src="https://placekitten.com/100/100/">
        </div>
        <div class="col-md-4" style="background-color: green">
          some more content
        </div>
    </div>
</div>

Solution 1 using negative margins (doesn't break responsiveness)

Demo

.row{
    overflow: hidden; 
}

[class*="col-"]{
    margin-bottom: -99999px;
    padding-bottom: 99999px;
}

Solution 2 using table

Demo

.row {
    display: table;
}

[class*="col-"] {
    float: none;
    display: table-cell;
    vertical-align: top;
}

Solution 3 using flex added August 2015. Comments posted before this don't apply to this solution.

Demo

.row {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display:         flex;
  flex-wrap: wrap;
}
.row > [class*='col-'] {
  display: flex;
  flex-direction: column;
}

Bootstrap - 5 column layout

UPDATE, 2021: for modern Bootstrap (4+), I recommend Zim's answer due to it's natural way of using Bootstrap flex classes

.col-xs-2{
    background:#00f;
    color:#FFF;
}
.col-half-offset{
    margin-left:4.166666667%
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
    <div class="row" style="border: 1px solid red">
        <div class="col-xs-2" id="p1">One</div>
        <div class="col-xs-2 col-half-offset" id="p2">Two</div>
        <div class="col-xs-2 col-half-offset" id="p3">Three</div>
        <div class="col-xs-2 col-half-offset" id="p4">Four</div>
        <div class="col-xs-2 col-half-offset" id="p5">Five</div>
        <div>lorem</div>
    </div>
</div>

Bootstrap 5 columns per row on desktop, 3 on table, 2 on mobile?

<div class="row row-cols-lg-5">
    <div class="col-md-4 col-sm-6 col-6">
        1
    </div>
    <div class="col-md-4 col-sm-6 col-6">
        2
    </div>
    <div class="col-md-4 col-sm-6 col-6">
        3
    </div>
    <div class="col-md-4 col-sm-6 col-6">
        4
    </div>
    <div class="col-md-4 col-sm-6 col-6">
        5
    </div>
</div>

Bootstrap 5 columns with equal-width only from breakpoint md

As I recently answered here, this is a bug that was introduced in 5.0.2.

Until it's fixed, a workaround in your case would be to use row-cols-* instead...

<div class="container">
  <div class="row row-cols-1 row-cols-md-5">
    <div class="col">
      1 of 2
    </div>
    <div class="col">
      2 of 2
    </div>
    <div class="col">
      3 of 3
    </div>
    <div class="col">
      4 of 4
    </div>
    <div class="col">
      5 of 5
    </div>
  </div>
</div>

https://codeply.com/p/BusA6Eyw8K


Related Topics

How to Center the Contents of a Div

Is It Semantically Incorrect to Put a <Div> or <Span> Inside of a <Button>

How to Escape HTML in Node.Js Ejs View

HTML Table Cell Width for Different Rows

P-End-Tag (</P>) Is Not Needed in HTML

Bootstrap Print CSS Removes Background Color

Apply CSS to Area Map

Google Bot Crawling on Angularjs Site with HTML5 Mode Routes

Table Tbody Scroll in IE8

<Video> Plays in Other Browsers, But Not Safari

CSS for Changing Color of Last Word in H1

How to Set Height for the Drop Down of Select Box

Get Content Between a Pair of HTML Tags Using Bash

Creating a 'New' Spiky Label with 24 or Above Point Burst

File Url Cross Domain Issue in Chrome- Unexpected

How to Select First Element via Xpath

CSS Only Solution to Set Multiple "Same Height" Row Sections on a Responsive Grid

How to Decode HTML Entities in C


Leave a reply



Submit