Bd Grid Large

Bootstrap Grid - Large Devices

---

Bootstrap Grid Example: Large Devices

	Extra small	Small	Medium	Large
Class prefix	.col-xs	.col-sm	.col-md	.col-lg
Screen width	<576px	>=768px	>=992px	>=1200px

In the previous chapter, nosotros presented a grid lawsuit alongside classes for pocket-size in addition to medium devices. We used 2 divs (columns) in addition to nosotros gave them a 25%/75% separate on pocket-size devices, in addition to a 50%/50% separate on medium devices:

<div class="col-sm-3 col-md-6">....</div>
<div class="col-sm-9 col-md-6">....</div>

But on large devices the blueprint may live on improve equally a 33%/66% split.
Tip: Large devices are defined equally having a covert width from 1200 pixels in addition to above.
For large devices nosotros volition purpose the .col-lg-* classes.
So straight off nosotros volition add together the column widths for large devices:

<div class="col-sm-3 col-md-6 col-lg-4">....</div>
<div class="col-sm-9 col-md-6 col-lg-8">....</div>

Now Bootstrap is going to say "at the pocket-size size, await at classes alongside -sm- inwards them in addition to purpose those. At the medium size, await at classes alongside -md- inwards them in addition to purpose those. At the large size, await at classes alongside the discussion -lg- inwards them in addition to purpose those".
The next lawsuit volition lawsuit inwards a 25%/75% separate on pocket-size devices, a 50%/50% separate on medium devices, in addition to a 33%/66% separate on large devices:

Labels

Example

<div class="container-fluid">
  <h1>Hello World!</h1>
  <div class="row">
    <div class="col-sm-3 col-md-6 col-lg-4" style="background-color:yellow;">
      <p>Lorem ipsum...</p>
    </div>
    <div class="col-sm-9 col-md-6 col-lg-8" style="background-color:pink;">
      <p>Sed ut perspiciatis...</p>
    </div>
  </div>
</div>

Note: Make certain that the marrow ever adds upwards to 12.

---

Using Only Large

In the lawsuit below, nosotros exclusively specify the .col-lg-6 degree (without .col-md-* and/or .col-sm-*). This agency that large devices volition separate 50%/50%. However, for medium AND pocket-size devices, it volition stack vertically (100% width):

Example

<div class="container-fluid">
  <h1>Hello World!</h1>
  <div class="row">
    <div class="col-lg-6" style="background-color:yellow;">
      <p>Lorem ipsum...</p>
    </div>
    <div class="col-lg-6" style="background-color:pink;">
      <p>Sed ut perspiciatis...</p>
    </div>
  </div>
</div>

---