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

AngularJS Toggle Directive tutorial: Building a toggle directive in Angular

Do CSS Stylesheets load asynchronously?

How can jQuery determine the amount of line breaks within a div element?

Understanding the concept of for loops in JavaScript and incorporating them in CSS styling

What causes images to unexpectedly expand to fill the entire screen upon switching routes in Next.js?

Navigate quickly to different sections using jump links and adjust the positioning with the style attribute, such as "padding-top

Attempting to connect JQuery to a different page through a data attribute connection

Troubleshooting problems with resizing images using CSS

Prevent users from clicking by using a CSS class in HTML and JavaScript

Move a Div to be positioned directly underneath another DIV

Click to reveal additional images once the "show more" button is pressed

Problem with CSS creating the Typewriter effect when the third line of text is added

Is there a way to gradually reveal an element as I scroll to a specific position?

Ways to create a self-contained video viewer

Python Selenium cannot locate button within an iframe

Generating values in a loop - mastering the art of creating data points

Intercepting 401 with Angular 5 HTTP Interceptor recognizes it as status code 0

Tips on how to align a wrapper-div in the center without affecting the positioning of the

Side Menu with Fixed Position Created with Tailwind CSS

When padding is added on an MVC 5 page, the Bootstrap 4.1.1 class option for rounded-circle becomes distorted