@extends('backend.master') @section('title') {{ ___('common.Content Grid') }} @endsection @section('content')

{{ ___('common.grid_options') }}

{{ ___('common.bootstrap_grid') }}

xs
<576px 		sm
≥576px 		md
≥768px 		lg
≥992px 		xl
≥1200px 		xxl
≥1400px
Container max-width None (auto) 540px 720px 960px 1140px 1320px
Class prefix .col- .col-sm- .col-md- .col-lg- .col-xl- .col-xxl-
# of columns 12
Gutter width 1.5rem (.75rem on left and right)
Custom gutters Yes
Nestable Yes
Column ordering Yes

Order

Use .order- classes for controlling the visual order of your content. These classes are responsive, so you can set the order by breakpoint (e.g., .order-1.order-md-2). Includes support for 1 through 5 across all six grid tiers.

First in DOM,
with a larger order
with an order of 1 
    
        <div class="container text-center">
          <div class="row">
            <div class="col">
              First in DOM, no order applied
            </div>
            <div class="col order-5">
              Second in DOM, with a larger order
            </div>
            <div class="col order-1">
              Third in DOM, with an order of 1
            </div>
          </div>
        </div>

Offset

Move columns to the right using .offset-md-* classes. These classes increase the left margin of a column by * columns. For example, .offset-md-4 moves .col-md-4 over four columns.

.col-md-4
.col-md-4 .offset-md-4
.col-md-3 .offset-md-3
.col-md-3 .offset-md-3 

<div class="container text-center">
  <div class="row">
    <div class="col-md-4">.col-md-4</div>
    <div class="col-md-4 offset-md-4">.col-md-4 .offset-md-4</div>
  </div>
  <div class="row">
    <div class="col-md-3 offset-md-3">.col-md-3 .offset-md-3</div>
    <div class="col-md-3 offset-md-3">.col-md-3 .offset-md-3</div>
  </div>

</div>
@endsection