Use the border classes to add or remove borders from an element:
Borders
Use a contextual border color to add a color to the border:
Borders
Round the corner of an element with the rounded classes:
Float
Float an element to the right with the .float-right class or to the left with .float-left, and clear floats with the
.clearfix class.
Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left
Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left
Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left
Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left
Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left
Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left
Float left
Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum
Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum
Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum
Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum
Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum
Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum
Float right
Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right
Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right
Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right
Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right
Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right
Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right Right
Responsive Floats
Float an element to the left or to the right depending on screen width, with the responsive float classes
.float-*-left|right (where * is sm, md, lg or xl).
Resize the browser window to see the effect.
Float right on small screens or wider
Float right on medium screens or wider
Float right on large screens or wider
Float right on extra large screens or wider
Float none
Horizontal Centering
Center an element with the .mx-auto class:
Centered
Width Utilities
Set the width of an element with the w-* classes:
Width 25%
Width 50%
Width 75%
Width 100%
Max Width 100%
Centered Width Utilities
Set the width of an element with the w-* classes:
Width 25%
Width 50%
Width 75%
Width 100%
Max Width 100%
Height Utilities
Set the height of an element with the w-* classes:
Height 25%
Height 50%
Height 75%
Height 100%
Max Height 100%
Spacing Utilities
Set the spacing of an element with the {property}{sides}-{breakpoint}-{size} classes. Omit breakpoint if you want the
padding or margin to work on all screen sizes.
I only have a top padding (1.5rem = 24px)
I have a padding on all sides (3rem = 48px)
I have a margin on all sides (3rem = 48px) and a bottom padding (3rem = 48px)
Vertical Align
Change the alignment of elements with the align classes (only works on inline, inline-block, inline-table and table
cell elements):
baselinetopmiddlebottomtext-toptext-bottom
<
Top Fixed Navbar
A fixed navigation bar stays visible in a fixed position (top or bottom) independent of the page scroll.
Scroll this page to see the effect
Bottom Fixed Navbar
A fixed navigation bar stays visible in a fixed position (top or bottom) independent of the page scroll.