CODEWITHSUNDEEP
csstwitter-bootstrap
Hasan
Hasan

Reputation: 35

Bootstrap Column Grid Conversion

<div class="col-sm-6 col-sx-12">
    <div class="top-share pull-right">
        <a href="#"><i class="fa fa-facebook"></i></a>
        <a href="#"><i class="fa fa-facebook"></i></a>
        <a href="#"><i class="fa fa-facebook"></i></a>
        <a href="#"><i class="fa fa-facebook"></i></a>
        <a href="#"><i class="fa fa-pinterest"></i></a>
        <a href="#"><i class="fa fa-twitter"></i></a>
   </div>
</div>

I'm using bootstrap framework. How to use bootstrap column or grid system?

I'm using col-md-3, col-md-4, col-md-6, col-md-8, col-md-9, etc. in various situation. I want to know what column will have when I'll use col-sm, and col-xs respectively for col-md-3, col-md-4, col-md-6, col-md-8, and col-md-9. Basically conversion of grid.

Upvotes: 0

Views: 2065

Answers (3)

TM Dinesh
TM Dinesh

Reputation: 210

Refer this link to know about bootstrap grid system and how to use it.

Upvotes: 0

Igor Ivancha
Igor Ivancha

Reputation: 3451

xs /* Extra small devices (phones, less than 768px) */ /* No media query since this is the default in Bootstrap */

sm /* Small devices (tablets, 768px and up) */ @media (min-width: @screen-sm-min) { ... }

md /* Medium devices (desktops, 992px and up) */ @media (min-width: @screen-md-min) { ... }

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

In fact, Bootstrap is mobile first.
For example, you have two blocks of content on large screens:

<div class="col-lg-6">
  // your code here...
</div>
<div class="col-lg-6">
  // your code here...
</div>

on small screens devices it'll look weird! in this case xs-class helps you! 

<div class="col-xs-12 col-lg-6">
  // your code here...
</div>
<div class="col-xs-12 col-lg-6">
  // your code here...
</div>

it means, before screen-width is 1200px, each block takes full width of screen. when screen-width is 1200px and more, each block takes half of full screen-width 

<div class="col-xs-12 col-md-6">
  // your code here...
</div>
<div class="col-xs-12 col-md-6">
  // your code here...
</div>

in this case, each block takes half of full screen-width when screen-width is 992px or more

Upvotes: 2

Codeone
Codeone

Reputation: 1201

Bootstrap Grid System Bootstrap's grid system allows up to 12 columns across the page.

If you do not want to use all 12 column individually, you can group the columns together to create wider columns:

Grid Classes The Bootstrap grid system has four classes:

xs (for phones)

sm (for tablets)

md (for desktops)

lg (for larger desktops)

The classes above can be combined to create more dynamic and flexible layouts.

Basic Structure of a Bootstrap Grid

<div class="container">
  <div class="row">
    <div class="col-*-*"></div>
  </div>
  <div class="row">
    <div class="col-*-*"></div>
    <div class="col-*-*"></div>
    <div class="col-*-*"></div>
  </div>
  <div class="row">
    ...
  </div>
</div>

Learn more about it

Upvotes: 0

Related Questions