// // Grid system // ————————————————–

// Container widths // // Set the container width, and override it for fixed navbars in media queries.

.container {

.container-fixed();

@media (min-width: @screen-sm-min) {
  width: @container-sm;
}
@media (min-width: @screen-md-min) {
  width: @container-md;
}
@media (min-width: @screen-lg-min) {
  width: @container-lg;
}

}

// Fluid container // // Utilizes the mixin meant for fixed width containers, but without any defined // width for fluid, full width layouts.

.container-fluid {

.container-fixed();

}

// Row // // Rows contain and clear the floats of your columns.

.row {

.make-row();

}

// Columns // // Common styles for small and large grid columns

.make-grid-columns();

// Extra small grid // // Columns, offsets, pushes, and pulls for extra small devices like // smartphones.

.make-grid-columns-float(xs); .make-grid(@grid-columns, xs, width); .make-grid(@grid-columns, xs, pull); .make-grid(@grid-columns, xs, push); .make-grid(@grid-columns, xs, offset);

// Small grid // // Columns, offsets, pushes, and pulls for the small device range, from phones // to tablets.

@media (min-width: @screen-sm-min) {

.make-grid-columns-float(sm);
.make-grid(@grid-columns, sm, width);
.make-grid(@grid-columns, sm, pull);
.make-grid(@grid-columns, sm, push);
.make-grid(@grid-columns, sm, offset);

}

// Medium grid // // Columns, offsets, pushes, and pulls for the desktop device range.

@media (min-width: @screen-md-min) {

.make-grid-columns-float(md);
.make-grid(@grid-columns, md, width);
.make-grid(@grid-columns, md, pull);
.make-grid(@grid-columns, md, push);
.make-grid(@grid-columns, md, offset);

}

// Large grid // // Columns, offsets, pushes, and pulls for the large desktop device range.

@media (min-width: @screen-lg-min) {

.make-grid-columns-float(lg);
.make-grid(@grid-columns, lg, width);
.make-grid(@grid-columns, lg, pull);
.make-grid(@grid-columns, lg, push);
.make-grid(@grid-columns, lg, offset);

}