Bootstrap3 Grid

Grid

table like UI.
x / 12, total width is 12, the more number we add, the wider the UI is.
col-xs-1, col-xs-2, col-xs-12.

Fist Example

Use row class and col-

<div class="container">
   <div class="row">
      <div class="col-xs-6" style="border:solid 1px #000;">A</div>
      <div class="col-xs-6" style="border:solid 1px #000;">B</div>
   </div>
   <div class="row">
      <div class="col-xs-4" style="border:solid 1px #000;">C</div>
      <div class="col-xs-4" style="border:solid 1px #000;">D</div>
      <div class="col-xs-4" style="border:solid 1px #000;">E</div>
   </div>
</div>

More complicated

<div class="row">
   <div class="col-xs-6" style="border:solid 1px #000;">F</div>
   <div class="col-xs-6" style="border:solid 1px #000;">
   <div class="row">
      <div class="col-xs-4" style="border:solid 1px #000;">G</div>
      <div class="col-xs-4" style="border:solid 1px #000;">H</div>
      <div class="col-xs-4" style="border:solid 1px #000;">I</div>
   </div>
</div>

Offset

Make blank space in grid.
col-xs-offset-1

<div class="row">
   <div class="col-xs-6" style="border:solid 1px #000;">J</div>
   <div class="col-xs-offset-1 col-xs-5" style="border:solid 1px #000;">K</div>
</div>

Device and responsible

Device

1. Extra small

less than 768px

2. Small

768px – 992px

3. Medium

992px – 1200px

4. Large

1200px

Browser and Grid

Add prefix of col-

<div class="col-xs-12 col-sm-6"></div>

Replace(Move)

push, pull

<div class="row">
   <div class="col-xs-6 col-sm-push-6" style="border:solid 1px #000;">A</div>
   <div class="col-xs-6 col-sm-pull-6" style="border:solid 1px #000;">B</div>
</div>

Hidden, Invisible

• hidden
• invisible

<div class="row">
   <div class="col-xs-6 hidden" style="border:solid 1px #000;">A</div>
   <div class="col-xs-6" style="border:solid 1px #000;">B</div>
</div>
<div class="row">
   <div class="col-xs-6 invisible" style="border:solid 1px #000;">A</div>
   <div class="col-xs-6" style="border:solid 1px #000;">B</div>
</div>