Using Bootstrap 3 to implement various grid systems within a single website

Question

Using Bootstrap 3 to implement various grid systems within a single website

For a current project I am working on, my goal is to fill the entire .container with 7 columns within my grid system. To achieve this, I plan on adjusting the Less variable (@grid-columns) before compiling a bootstrap.css file at http://getbootstrap.com/customize/#grid-system.

However, what if I need to revert back to the standard 12 column grid system for another section of the same site?

If I were to create a separate bootstrap.css file while keeping the @grid-columns at 12, I would run into issues when loading it in a browser because it would conflict with the previously created bootstrap.css. This is due to the fact that both files will contain similar class references such as .col-md-7.

I am struggling to find a solution to this problem, but there must be a way to address it, right? Or perhaps I am overlooking something.

css twitter-bootstrap twitter-bootstrap-3

Answer 1

Answer №1

One option is to consider utilizing 84 columns in your layout. In this scenario, if you require 7 columns, each column would have a width equivalent to 12 bootstrap columns: 12 12 12 12 12 12 12 = 84

Alternatively, if you need 12 columns, each column should be set to the size of 7 bootstrap columns: 7 7 7 7 7 7 7 7 7 7 7 = 84

This approach can be effective, although it may involve some initial calculations.

If all else fails, resorting to basic math could provide a solution.

Another alternative is to customize the SASS or LESS version of Bootstrap by creating your personalized version. This involves adding classes akin to col-7-xs-.... Upon inspection of the SASS version, I found mixins within the _grid-framework.scss file that are modifiable and usable for integrating your own grid classes effortlessly.

There shouldn't be any reason why this method wouldn't be successful.

Answer 2

One option is to consider utilizing 84 columns in your layout. In this scenario, if you require 7 columns, each column would have a width equivalent to 12 bootstrap columns: 12 12 12 12 12 12 12 = 84

Alternatively, if you need 12 columns, each column should be set to the size of 7 bootstrap columns: 7 7 7 7 7 7 7 7 7 7 7 = 84

This approach can be effective, although it may involve some initial calculations.

If all else fails, resorting to basic math could provide a solution.

Another alternative is to customize the SASS or LESS version of Bootstrap by creating your personalized version. This involves adding classes akin to col-7-xs-.... Upon inspection of the SASS version, I found mixins within the _grid-framework.scss file that are modifiable and usable for integrating your own grid classes effortlessly.

There shouldn't be any reason why this method wouldn't be successful.

Answer 3

Answer №2

Before deciding to implement another grid system for just a couple of instances with 7 columns, consider the approach taken by Bootstrap on their components page http://getbootstrap.com/components/. They creatively use custom CSS without relying on the grid system to create 8 "columns" for icons using an unordered list.

Here's a suggestion:

https://jsbin.com/pofofe/1/

https://jsbin.com/pofofe/1/edit?html,css,output

HTML (comments prevent extra space from inline-block)

 <div class="container">
  <div class="row seven-col">
    
    <div>1</div><!-- do not remove 
    --><div>2</div><!-- do not remove 
    --><div>3</div><!-- do not remove 
    --><div>4</div><!-- do not remove 
    --><div>5</div><!-- do not remove 
    --><div>6</div><!-- do not remove 
    --><div>7</div>
    
  </div>
</div>

CSS:

.row.seven-col {
    text-align: center
}
.row.seven-col > div {
    border: 1px solid red;
    padding-left: 15px;
    padding-right: 15px;
    min-height: 30px;
}
@media (min-width:480px) { 
    .row.seven-col > div {
        display: inline-block;
        width: 50%;
    }
}
@media (min-width:600px) { 
    .row.seven-col > div {
        width: 25%
    }
}
@media (min-width:992px) { 
    .row.seven-col > div {
        width: 14.285%
    }
}

This method reduces the amount of CSS needed compared to adding another grid system solely for a few instances with 7 columns.

NOTE:

The .img-responsive class may not work within inline-block elements or tables with display: table, etc. In such cases, use:

.row.seven-col img {width:100%;height:auto;}

Answer 4

Before deciding to implement another grid system for just a couple of instances with 7 columns, consider the approach taken by Bootstrap on their components page http://getbootstrap.com/components/. They creatively use custom CSS without relying on the grid system to create 8 "columns" for icons using an unordered list.

Here's a suggestion:

https://jsbin.com/pofofe/1/

https://jsbin.com/pofofe/1/edit?html,css,output

HTML (comments prevent extra space from inline-block)

 <div class="container">
  <div class="row seven-col">
    
    <div>1</div><!-- do not remove 
    --><div>2</div><!-- do not remove 
    --><div>3</div><!-- do not remove 
    --><div>4</div><!-- do not remove 
    --><div>5</div><!-- do not remove 
    --><div>6</div><!-- do not remove 
    --><div>7</div>
    
  </div>
</div>

CSS:

.row.seven-col {
    text-align: center
}
.row.seven-col > div {
    border: 1px solid red;
    padding-left: 15px;
    padding-right: 15px;
    min-height: 30px;
}
@media (min-width:480px) { 
    .row.seven-col > div {
        display: inline-block;
        width: 50%;
    }
}
@media (min-width:600px) { 
    .row.seven-col > div {
        width: 25%
    }
}
@media (min-width:992px) { 
    .row.seven-col > div {
        width: 14.285%
    }
}

This method reduces the amount of CSS needed compared to adding another grid system solely for a few instances with 7 columns.

NOTE:

The .img-responsive class may not work within inline-block elements or tables with display: table, etc. In such cases, use:

.row.seven-col img {width:100%;height:auto;}

Using Bootstrap 3 to implement various grid systems within a single website

Answer №1

Answer №2

https://jsbin.com/pofofe/1/

Similar questions

Is there a way to stop Bootstrap from automatically bolding the font?

Tips for creating a submission alert using bootstrap and react.js?

The appearance of the page varies when viewed on different computers using the same version of Firefox

What is the best way to coordinate text and photos within Bootstrap?

Is it possible to use an SVG image as a border with a variable height in CSS

How can CSS be utilized to style the visited links that are hovered over

Does Vue.js interfere with classList.remove functionality?

Achieve full height in Grid component of material UI by eliminating margins

What causes the navbar-brand to be hidden on Chrome mobile browsers?

What methods can I use to achieve a stylish and responsive design for my images?

Listening for an event or using a CSS pseudo-class to detect when the scrollbar becomes

Radio buttons are not having the :invalid pseudo class properly applied

The height and rows of a textarea element do not adjust properly to the content in FireFox

- Prefixing with -webkit-transform and overlooking z-index

Height of border not being displayed accurately

Displaying a loading screen while a jQuery ajax request is in progress

Strategies for aligning a link on top of another div with absolute positioning

Why is the column width on this Tumblr page constantly flickering?

I'm still trying to figure out the property position. Why won't my page scroll? (My first time using HTML)

Modifying the CSS class of an element does not produce the desired effect after altering its styles using JavaScript