@extends('layout.master') @section('title', 'Helper Classes') @section('parentPageTitle', 'Pages') @section('content')
.align-left, .align-center, .align-right, .align-justify
Align Left
Align Center
Align Right
Align Justify
.m-t-10, .m-t--10, .m-r-5, .p-t-10, .p-b-5
Margins
.m-t-10
.m-t-0
.m-t--10
.m-l-35
.m-l-0
.m-l--35
.m-b-15
.m-b-0
.m-b--20
.m-r-30
.m-r-0
.m-r--30
.margin-0
Paddings
.p-t-10
.p-t-0
.p-l-35
.p-l-0
.p-b-15
.p-b-0
.p-r-30
.p-r-0
.padding-0
Extra small <576px |
Small ≥576px |
Medium ≥768px |
Large ≥992px |
Extra large ≥1200px |
|
---|---|---|---|---|---|
Max container width | None (auto) | 540px | 720px | 960px | 1140px |
Class prefix | .col- |
.col-sm- |
.col-md- |
.col-lg- |
.col-xl- |
# of columns | 12 | ||||
Gutter width | 30px (15px on each side of a column) | ||||
Nestable | Yes | ||||
Column ordering | Yes |
<img src="..." alt="..." class="rounded">
<imgsrc="..." alt="..." class="rounded-top">
<imgsrc="..." alt="..." class="rounded-right">
<imgsrc="..." alt="..." class="rounded-bottom">
<imgsrc="..." alt="..." class="rounded-left">
<imgsrc="..." alt="..." class="rounded-circle">
<imgsrc="..." alt="..." class="rounded-0">
<span class="border border-primary"></span>
<span class="border border-secondary"></span>
<span class="border border-success"></span>
<span class="border border-danger"></span>
<span class="border border-warning"></span>
<span class="border border-info"></span>
<span class="border border-light"></span>
<span class="border border-dark"></span>
<span class="border border-white"></span>