Bootstrap 3 Grid, Does It *Really* Matter How Many Columns Are in a Row

Bootstrap 3 grid, does it *really* matter how many columns are in a row?

No, there's nothing to mandate that the bootstrap grid must add up to 12 columns.

It's just a preference / stylistic thing.

Less than 12 Columns -> Aligns Left:

If you have less than twelve of the columns filled, by default they will left align, leaving empty space to the right.

The following code:

<div class='row'>
<div class="col-xs-2">Hi</div>
<div class="col-xs-2">Hi</div>
</div>
.row > div {
background: lightgrey;
border: 1px solid grey;
}

Results in this: (Demo in Fiddle)

screenshot

More than 12 Columns -> Wraps:

If the total adds to more than 12 columns, as long as the columns are within a row class, they will just wrap to additional rows. A good use case would be a photo grid system where you would like to add tons of photos but don't know how many rows you'll have and would still like to define the number of columns.

The following code:

<div class='row'>
<div class="col-xs-6">Hi</div>
<div class="col-xs-6">Hi</div>
<div class="col-xs-6">Hi</div>
<div class="col-xs-6">Hi</div>
</div>

Results in this: (Demo in Fiddle)

screenshot2

Other than that, sometimes it's the case that 12 column layouts look better, but you don't have to use them; it's not a sudoku :)

It is necessary to fill all 12 columns of a row of bootstrap's grid system?

Since you're adding a new row it really doesn't matter. If you were using column wrapping where col units in each row may exceed 12 you would need the placeholder col-sm-10.

http://www.codeply.com/go/D1RLpfT8pD

IMO, the first one is preferred since it requires less markup. Also, if you're nesting columns the docs specifically state..

"it is not required that you use all 12 available columns"

Bootstrap grid not breaking down into even columns

Try removing each individual row like this:

Also adding a width value to your column could really help you achieve the layout you want.

<div class="container">
<div class="row">
<div class="col-lg-4 col-md-3">
<div class="tile"></div>
</div>
<div class="col-lg-4 col-md-3">
<div class="tile"></div>
</div>
<div class="col-lg-4 col-md-3">
<div class="tile"></div>
</div>
<div class="col-lg-4 col-md-3">
<div class="tile"></div>
</div>
<div class="col-lg-4 col-md-3">
<div class="tile"></div>
</div>
<div class="col-lg-4 col-md-3">
<div class="tile"></div>
</div>
<div class="col-lg-4 col-md-3">
<div class="tile"></div>
</div>
<div class="col-lg-4 col-md-3">
<div class="tile"></div>
</div>
<div class="col-lg-4 col-md-3">
<div class="tile"></div>
</div>
</div>
</div>

Fiddle example:

.tile {  height: 200px;  width: 150px;  background-color: green;  margin-bottom: 20px;}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/><div class="container">  <div class="row">    <div class="col-lg-4 col-md-3">      <div class="tile"></div>    </div>    <div class="col-lg-4 col-md-3">      <div class="tile"></div>    </div>    <div class="col-lg-4 col-md-3">      <div class="tile"></div>    </div>    <div class="col-lg-4 col-md-3">      <div class="tile"></div>    </div>    <div class="col-lg-4 col-md-3">      <div class="tile"></div>    </div>    <div class="col-lg-4 col-md-3">      <div class="tile"></div>    </div>    <div class="col-lg-4 col-md-3">      <div class="tile"></div>    </div>    <div class="col-lg-4 col-md-3">      <div class="tile"></div>    </div>    <div class="col-lg-4 col-md-3">      <div class="tile"></div>    </div>  </div></div>

Nested rows in Bootstrap 3 fail to respect the grid?

1) Pick the proportions

Nested row also uses a 12-columns grid. So you asked Bootstrap to take 5/12 from 10 parent columns. But this is a fractional number. Because of this column boundaries do not coincide with each other.

Pick the proportions between the columns. For example:

  • 4/12 from 9 parent columns is exactly 3 parent columns
  • 3/12 from 8 parent columns is exactly 2 parent columns

div {  outline: 1px solid gray;}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/><div class="container">  <div class="row">    <div class="col-xs-1">col</div><div class="col-xs-1">col</div><div class="col-xs-1">col</div><div class="col-xs-1">col</div><div class="col-xs-1">col</div><div class="col-xs-1">col</div><div class="col-xs-1">col</div><div class="col-xs-1">col</div><div class="col-xs-1">col</div><div class="col-xs-1">col</div><div class="col-xs-1">col</div><div class="col-xs-1">col</div>  </div>  <div class="row">    <div class="col-xs-1">col</div>    <div class="col-xs-1">col</div>    <div class="col-xs-1">col</div>    <div class="col-xs-8">      <div class="row">        <div class="col-xs-3">nested 4</div>        <div class="col-xs-9">nested 8</div>      </div>    </div>    <div class="col-xs-1">col</div>  </div>  <div class="row">    <div class="col-xs-1">col</div>    <div class="col-xs-1">col</div>    <div class="col-xs-9">      <div class="row">        <div class="col-xs-4">nested 3</div>        <div class="col-xs-8">nested 9</div>      </div>    </div>    <div class="col-xs-1">col</div>  </div></div>

Understanding grid system in bootstrap

Combining Angular and Bootstrap can be quite a challenge. Since you're just mentioning the bootstrap grid system, I'll start off with that.

Bootstrap grid

Docs

The simplest grid is as follows

<div class="container">
<div class="row">
<div class="col-md-6">
<button class="btn btn-primary">Primary button</button>
</div>
<div class="col-md-6">
<button class="btn btn-secondary">Secondary button</button>
</div>
</div>
</div>

I'm using the .container, so respectively to the window width, the grid will keep a fixed size:

Bootstrap grid with gutters

The bootstrap breakpoints are listed here

Bootstrap breakpoints

So if the window is wider than 1200px (XL), then the container will have a fixed width of 1200px.

.container-fluid indicates that you don't want gutters, but prefer the container to expand to full-width:

Bootstrap grid without gutters

Columns

The bootstrap grid uses the 12-column grid system ideology. You can specify the width of each column (1 to 12), and alltogether they should come to 12 (or fewer).

Wrapping

<div class="col-md-6"> indicates that the cells of the grid will move below one another when the window is smaller than 768px. You may as well tell the browser that cells should wrap sooner (eg. col-xs-6) or later (eg. col-lg-6).

Nested grid

As you've indicated, you want to have subgrids too. @Sean already explained how to do this:

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

<div class="row">
<div class="col-xs-4">Cell 1</div>
<div class="col-xs-4">Cell 2</div>
<div class="col-xs-4">Cell 3</div>
</div>

<div class="row">
<div class="col-xs-4">Cell 1</div>
<div class="col-xs-4">Cell 2</div>
<div class="col-xs-4">Cell 3</div>
</div>

</div>
</div>
</div>

Spoiler

As I already mentioned, using bootstrap with angular is another challenge. In order to use the bootstrap grid in angular, you can add the bootstrap styles through angular.json (or off course only use _grid.scss...):

{
"projects": {
"example": {
...,
"architect": {
"build": {
"options": {
...,
"styles": [
{ "input": "node_modules/bootstrap/scss/bootstrap.scss", "bundleName": "style.css" },
{ "input": "src/styles.scss", "bundleName": "style.css" }
],
"scripts": [
...
]
}
}
}
}
}
}

However, doing the same for the scripts doesn't really work properly, and isn't recommended too. Scripts registered through angular.json aren't tree-shakable and will end up entirely in the main bundle.

So for advanced bootstrap components that require javascript, you have to arrange this by creating angular components for them. But this in turn poses a challenge as well. There are already multiple angular-bootstrap libraries out there:

  • ng-bootstrap: only rewrites the typescript code, and the css is referenced globally, which increases the bundlesize with 180 kB
  • ngx-bootstrap, also using global css

Writing your own ng-bootstrap library

I've been in the process of writing a library myself. The idea was to extract the styles into the specific components, in order to prevent styles from being bundled in the main bundle while you actually don't need them. Usually you would do the following:

:host ::ng-deep {
// Configuration
@import "~bootstrap/scss/functions";
@import "~bootstrap/scss/variables";
@import "~bootstrap/scss/mixins";

// Layout & components
@import "~bootstrap/scss/alert";

// Custom SCSS
.alert .btn {
bottom: 0;
display: inline-flex;
align-items: center;
}
}

However I found out that from the moment a selector contains ::ng-deep, angular will create a javascript chunk in the main bundle containing this style, even for :host ::ng-deep. I've created a github issue for this, hoping that they'll fix this...

Conclusion

If you don't care about your bundle size, you may use ng-bootstrap, ngx-bootstrap, or if there's no javascript magic to what you're writing, simply reference _bootstrap.scss from angular.json.

If bundle size matters to you, you'll probably have to wait until the angular team resolves this issue, and use or build a library like this one.

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>

Nested rows with bootstrap grid system?

Bootstrap Version 3.x

As always, read Bootstrap's great documentation:

3.x Docs: https://getbootstrap.com/docs/3.3/css/#grid-nesting

Make sure the parent level row is inside of a .container element. Whenever you'd like to nest rows, just open up a new .row inside of your column.

Here's a simple layout to work from:

<div class="container">
<div class="row">
<div class="col-xs-6">
<div class="big-box">image</div>
</div>
<div class="col-xs-6">
<div class="row">
<div class="col-xs-6"><div class="mini-box">1</div></div>
<div class="col-xs-6"><div class="mini-box">2</div></div>
<div class="col-xs-6"><div class="mini-box">3</div></div>
<div class="col-xs-6"><div class="mini-box">4</div></div>
</div>
</div>
</div>
</div>

Bootstrap Version 4.0

4.0 Docs: http://getbootstrap.com/docs/4.0/layout/grid/#nesting

Here's an updated version for 4.0, but you should really read the entire docs section on the grid so you understand how to leverage this powerful feature

<div class="container">
<div class="row">
<div class="col big-box">
image
</div>

<div class="col">
<div class="row">
<div class="col mini-box">1</div>
<div class="col mini-box">2</div>
</div>
<div class="row">
<div class="col mini-box">3</div>
<div class="col mini-box">4</div>
</div>
</div>

</div>
</div>

Demo in Fiddle jsFiddle 3.x | jsFiddle 4.0

Which will look like this (with a little bit of added styling):

screenshot



Related Topics



Leave a reply



Submit