Grid options
While Bootstrap u ses or for defining most sizes,are used for grid breakpoints and container widths. This is because the viewport width is in pixels and does not change with the font size. See how aspects of the Bootstrap grid system work across multiple devices with a handy table.
|
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 | 24px (12px on each side of a column) | ||||
| Nestable | Yes | ||||
| Column ordering | Yes | ||||
Grid Column
Using a single set of grid classes, you can create a default grid system that starts out stacked on mobile devices and tablet devices (the extra small to small range) before becoming horizontal on desktop (medium) devices. Place grid columns in any
Typography
Use tags h1 to h6 for get desire heading.
h1. Bootstrap heading
h2. Bootstrap heading
h3. Bootstrap heading
h4. Bootstrap heading
h5. Bootstrap heading
h6. Bootstrap heading
Paragraph with justify
Use tags text-justify for get desire paragraph.
Ambitioni dedisse scripsisse iudicaretur. Cras mattis iudicium purus sit amet fermentum. Donec sed odio operae, eu vulputate felis rhoncus. Praeterea iter est quasdam res quas ex communi. At nos hinc posthac, sitientis piros Afros. Petierunt uti sibi concilium totius Galliae in diem certam indicere. Cras mattis iudicium purus sit amet fermentum.
Alignment text
Use tags text-start, text-center, text-end for get desire text.
Left aligned text on all viewport sizes.
Center aligned text on all viewport sizes.
Right aligned text on all viewport sizes.
View port text
Use tags text-sm-start, text-md-start, text-lg-start, text-xl-start for get desire text.
Left aligned text on viewports sized SM (small) or wider.
Left aligned text on viewports sized MD (medium) or wider.
Left aligned text on viewports sized LG (large) or wider.
Left aligned text on viewports sized XL (extra-large) or wider.
Font weight and italics
Use tags , fw-normal, fw-italic for get desire text.
Bold text.
Normal weight text.
Italic text.
Text colors
Use tags below class for get desire text.
This is an example of muted text. Add classtext-muted
This is an example of primary text. Add classtext-primary
This is an example of success text. Add classtext-success
This is an example of info text. Add classtext-info
This is an example of warning text. Add classtext-warning
This is an example of danger text. Add classtext-danger
Address
Use address for get desire address.
795 Folsom Ave, Suite 600
San Francisco, CA 94107
P:(123) 456-7890 George Belly
info@example.com
Blockquotes
Use blockquote for get desire address.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
- Someone famous in Source Title
Ol Listing
Use tags ol > li for get desire ol list.
- Lorem ipsum dolor sit amet
- Consectetur adipiscing elit
- Integer molestie lorem at massa
Ul Listing
Use tags ul > li for get desire ol list.
- Lorem ipsum dolor sit amet
- Consectetur adipiscing elit
- Integer molestie lorem at massa
Description Text
Use tags dl > dt for get desire ol list.
- Standard Description List
- Description Text
- Description List Title
- Description List Text
Fancy Listing 1
Use class list-icons to ul for get desire ol list.
Fancy Listing with href
Use class list-icons to ul for get desire ol list.
Fancy Listing with href
Use class list-icons to ul for get desire ol list.