CODEWITHSUNDEEP
twitter-bootstrap
Blankman
Blankman

Reputation: 267040

Understanding bootstrap's grid breakpoints

So I have this row that looks like this:

<div class="row">
  <div class="col-lg-3 col-sm-6"></div>
  <div class="col-lg-3 col-sm-6"></div>
  <div class="col-lg-3 col-sm-6"></div>
  <div class="col-lg-3 col-sm-6"></div>
</div>

So to understand this it is basically saying, on large screens it will have 4 columns.

But for some screens I don't get it, it says 6 so that is 2 columns. But it also goes down to a single column when you shrink the screen.

I would have though you have to declare it as:

col-sm-12

So that would make it a single column on the smallest viewport, and then define col-med-6 to make it 2 columns.

For some reason I am not 100% clear when trying to write my own grid layout.

What am I missing?

Upvotes: 0

Views: 299

Answers (1)

Tommy
Tommy

Reputation: 2453

Basics

First of all it depends on the bootstrap version you are using. In the following i will talk about the current version bootstrap v4.1.3.

Think about your page divided in 12 columns. As you already said on large screens it will have 4 columns. That's correct because if you define columns with col-lg-3 means nothing else than use this class if i have a large screen or a even larger screen.

To visualize it let's have a look at a corresponding media query:

// Large devices (desktops, 992px and up)
@media (min-width: 992px) { ... }

This means your page will use col-lg-3 (4 columns) for every page larger 992px.

To override this you can use col-xl-2 (6 columns). Have a look at the corresponding media query:

// Extra large devices (large desktops, 1200px and up)
@media (min-width: 1200px) { ... }

If you append both col-lg-3 and col-xl-2 to your elements your page will use 4 columns for screens between 992px and 1199px and 6 columns for screen larger 1200px.

How to develop my application (Example)

1) Start with your smallest screen (mobile first). What you want to achieve are mostly each column (full width) below each column. To achieve this add col-12 to your elements or define nothing (col-12 is default).

2) This defined class will now used as long as a new @media query got active. For example if we only define col-12 col-lg-3 (or only col-lg-3) it will use col-12 (full width columns) for the whole page until we reach a screen width of 992px.

3) Just try around. Following the documentation you will get an expert in days. For example you can also center cols or some stuff like this but start with the basics and try to build your own bootstrap page.

I have created a fiddle that you can take as a starting example:

<div class="container">
  <div class="row">
    <div class="col-12 col-sm-6 col-lg-3" style="background: #6502d8">
      <h1>
        Article 1
      </h1>
      <p>
        Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
      </p>
    </div>
    <div class="col-12 col-sm-6 col-lg-3" style="background: #02d865">
      <h1>
        Article 2
      </h1>
      <p>
        Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
      </p>
    </div>
    <div class="col-12 col-sm-6 col-lg-3" style="background: #d86502">
      <h1>
        Article 3
      </h1>
      <p>
        Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
      </p>
    </div>
    <div class="col-12 col-sm-6 col-lg-3" style="background: #0275d8">
      <h1>
        Article 4
      </h1>
      <p>
        Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
      </p>
    </div>
  </div>  
</div>

< 768px - one full width column - all elements below each other

>= 768px && < 1200px - two columns

>= 1200px - four columns

Good luck!

Upvotes: 1

Related Questions