For ones new to the term, Bootstrap 4 is a free front-end framework for faster and easier web development.
Bootstrap includes HTML and CSS based design templates for typography, forms, buttons, tables, navigation, modals, image carousels and many other, as well as optional JavaScript plugins.
Bootstrap also gives you the ability to easily create responsive designs.
Utilities for layout:
For faster mobile-friendly and responsive development, Bootstrap 4 includes dozens of utility classes for showing, hiding, aligning, and spacing content. All of them are categorized and listed with examples below:
- Colors:
- They are used to convey meaning through colors with a handful of color utility classes. Bootstrap 4 includes support for styling links with hover states (state when you move cursor over item) too.
Example 1:<!DOCTYPE html><htmllang="en"><head><linkrel="stylesheet"href=</head><body><divclass="container"><pclass="text-primary">.text-primary</p><pclass="text-secondary">.text-secondary</p><pclass="text-success">.text-success</p><pclass="text-danger">.text-danger</p><pclass="text-warning">.text-warning</p><pclass="text-info">.text-info</p><pclass="text-light bg-dark">.text-light</p><pclass="text-dark">.text-dark</p><pclass="text-muted">.text-muted</p><pclass="text-white bg-dark">.text-white</p></div></body></html>Output:
- Contextual text classes can also be used on links, which will add a darker hover color.
Example 2:<!DOCTYPE html><htmllang="en"><head><linkrel="stylesheet"href=</head><body><divclass="container"><h2>Contextual Link Colors</h2><p>Hover over the links.</p><ahref="#"class="text-muted">Muted link.</a><ahref="#"class="text-primary">Primary link.</a><ahref="#"class="text-success">Success link.</a><ahref="#"class="text-info">Info link.</a><ahref="#"class="text-warning">Warning link.</a><ahref="#"class="text-danger">Danger link.</a><ahref="#"class="text-secondary">Secondary link.</a><ahref="#"class="text-dark">Dark grey link.</a><ahref="#"class="text-body">Body/black link.</a><ahref="#"class="text-light">Light grey link.</a></div></body></html>Output:
- Here, when we hover above the text (links) in the code above, a darker color appears.
We can also add 50% opacity for black or white text with the .text-black-50 or .text-white-50 classes, as shown below:
Example 3:<!DOCTYPE html><htmllang="en"><head><linkrel="stylesheet"href=</head><body><divclass="container"><pclass="text-black-50">Black text with 50% opacity on white background</p><pclass="text-white-50 bg-dark">White text with 50% opacity on black background</p></div></body></html>Output:
- They are used to convey meaning through colors with a handful of color utility classes. Bootstrap 4 includes support for styling links with hover states (state when you move cursor over item) too.
- Background colours :
Similar to the contextual text color classes, we can easily set the background of an element to any contextual class. The classes for background colors are: .bg-primary, .bg-success, .bg-info, .bg-warning, .bg-danger, .bg-secondary, .bg-dark and .bg-light.Note: background colors do not set the text color, so in some cases you’ll want to use them together with a .text-* class.
Example:
<!DOCTYPE html><htmllang="en"><head><linkrel="stylesheet"href=</head><body><divclass="container"><pclass="bg-primary text-white">This text is important.</p><pclass="bg-success text-white">This text indicates success.</p><pclass="bg-info text-white">This text represents some information.</p><pclass="bg-warning text-white">This text represents a warning.</p><pclass="bg-danger text-white">This text represents danger.</p><pclass="bg-secondary text-white">Secondary background color.</p><pclass="bg-dark text-white">Dark grey background color.</p><pclass="bg-light text-dark">Light grey background color.</p></div></body></html>Output:
- Border utilities:
They are used to add or remove an element’s borders. Use border utilities to quickly style the border and border-radius of an element. Works good for images, buttons, or any other element(s). Use class ‘Border’ here.- Additive Borders: Use to ‘add’ borders.
Example:<!DOCTYPE html><htmllang="en"><head><linkrel="stylesheet"href=<style>.border {display: inline-block;width: 70px;height: 70px;margin: 6px;}</style></head><body><divclass="container"><spanclass="border"></span><spanclass="border border"></span><spanclass="border border-top"></span><spanclass="border border-right"></span><spanclass="border border-bottom"></span><spanclass="border border-left"></span></div></body></html>Output:
As one can see, all 4 borders are added to the first square, then the top, right, bottom and left borders have been added to the subsequent squares, as per the code above. (the border is light, observe closely)
- Subtractive Borders : Use to ‘remove’ borders:
Example:<!DOCTYPE html><htmllang="en"><head><linkrel="stylesheet"href=<style>.border {display: inline-block;width: 70px;height: 70px;margin: 6px;}</style></head><body><divclass="container"><spanclass="border"></span><spanclass="border border-0"></span><spanclass="border border-top-0"></span><spanclass="border border-right-0"></span><spanclass="border border-bottom-0"></span><spanclass="border border-left-0"></span></div></body></html>Output:
Again clear from the pictures provided above that all 4 borders are removed from the first square, then the top, right, bottom and left borders have been removed from the subsequent squares (from an initial 4-sides bordered square), as per the code above. (the border is light, observe closely)
Note that we simply add a ‘-0’ to our code (after the ‘border’) to make it subtractive. - Border colour: Use to give a particular colour to the border.
Example:<!DOCTYPE html><htmllang="en"><head><linkrel="stylesheet"href=<style>.border {display: inline-block;width: 70px;height: 70px;margin: 6px;}</style></head><body><divclass="container"><spanclass="border border-primary"></span><spanclass="border border-secondary"></span><spanclass="border border-success"></span><spanclass="border border-danger"></span><spanclass="border border-warning"></span><spanclass="border border-info"></span><spanclass="border border-light"></span><spanclass="border border-dark"></span><spanclass="border border-white"></span></div></body></html>Output:
Above example is simple enough, having border colors with their usual indications such as danger for red, warning for yellow (as in caution street signs), success for green and so forth.
- Border radius: Use to give a particular radius type: (like being circular edged)
Example:<!DOCTYPE html><htmllang="en"><head><linkrel="stylesheet"href=<style>span {display: inline-block;width: 70px;height: 70px;margin: 6px;background-color: #555;}</style></head><body><divclass="container"><spanclass="rounded-sm"></span><spanclass="rounded"></span><spanclass="rounded-lg"></span><spanclass="rounded-top"></span><spanclass="rounded-right"></span><spanclass="rounded-bottom"></span><spanclass="rounded-left"></span><spanclass="rounded-circle"></span><spanclass="rounded-0"></span></div></body></html>Output:
In the above example, we added rounded corners to all 4-sides on the first three squares (with the corners being small, normal and large respectively), then to only the top, right, bottom and left sides of the subsequent squares as evident from the code above. Then a completely circular border (not a square, a circle) and a non-circular border (a square, no circular edges) is implemented.
- Additive Borders: Use to ‘add’ borders.
- Text :
Bootstrap 4 includes documentation and examples for common text utilities to control alignment, wrapping, weight, and more.- Text Alignment: For left, right, and center alignment, responsive classes are available that use the same viewport width breakpoints as the grid system.
Example:<!DOCTYPE html><html><head><linkrel="stylesheet"href=</head><body><divclass="container"><pclass="text-left">Left aligned text on all viewport sizes.</p><pclass="text-center">Center aligned text on all viewport sizes.</p><pclass="text-right">Right aligned text on all viewport sizes.</p><pclass="text-sm-left">Left aligned text on viewports sized SM(small) or wider.</p><pclass="text-md-left">Left aligned text on viewports sized MD(medium) or wider.</p><pclass="text-lg-left">Left aligned text on viewports sized LG(large) or wider.</p><pclass="text-xl-left">Left aligned text on viewports sized XL(extra-large) or wider.</p></div></body></html>Output:
- Text Transform: We can transform text in components with text capitalization classes.
Example:<!DOCTYPE html><html><head><linkrel="stylesheet"href=</head><body><divclass="container"><pclass="text-lowercase">Lowercased text.</p><pclass="text-uppercase">Uppercased text.</p><pclass="text-capitalize">Capitalized text.</p></div></body></html>Output:
- Font Weight/Italics: We can change the weight/boldness of text or italicize text.
Example:<!DOCTYPE html><htmllang="en"><head><linkrel="stylesheet"href=</head><body><divclass="container"><h1>Font weight and italics</h1><pclass="font-weight-bold">Bold text.</p><pclass="font-weight-normal">Normal weight text.</p><pclass="font-weight-light">Light weight text.</p><pclass="font-italic">Italic text.</p></div></body></html>Output:
- Text Alignment: For left, right, and center alignment, responsive classes are available that use the same viewport width breakpoints as the grid system.
- Floats and Clearfix Utility:
We can float an element to the right with the .float-right class or to the left similarly with .float-left class.
Example:<!DOCTYPE html><htmllang="en"><head><linkrel="stylesheet"href=</head><body><divclass="container"><divclass="clearfix"><spanclass="float-left">Float left</span><spanclass="float-right">Float right</span></div></div></body></html>Output:
We can clear floats with the .clearfix class.- Responsive Floats:
We can 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 (>=576px), md (>=768px), lg (>=992px) or xl (>=1200px)). The sizes for these different categories (small, medium, large, extra large) are fixed.Example:
<!DOCTYPE html><htmllang="en"><head><linkrel="stylesheet"href=</head><body><divclass="container"><divclass="clearfix"><divclass="float-sm-right">Float right on small screens or wider</div><br><divclass="float-md-right">Float right on medium screens or wider</div><br><divclass="float-lg-right">Float right on large screens or wider</div><br><divclass="float-xl-right">Float right on extra large screens or wider</div><br><divclass="float-none">Float none</div></div></div></body></html>Output:
- Responsive Floats:
- Position:
There are shorthand utilites for quickly configuring the position of an element. Some quick positioning classes are “position-static“, “position-relative“, “position-absolute“, “position-fixed” and “position-sticky“.For example, we can use the .fixed-top class to make any element fixed/stay at the top of the page.
Similarly, .fixed-bottom class positions an element at the bottom of the viewport, from edge to edge.
Sticky-top would position an element at the top of the viewport, from edge to edge, but only after you scroll past it. The .sticky-top utility uses CSS’s position: sticky, which isn’t fully supported in all browsers. likewise, the sticky bottom would do the same for the bottom face. - Sizing:
Bootstrap 4 enables us to easily make an element as wide or as tall (relative to its parent) with their width and height utilities.- Width: Set the width of an element with the w-* classes (.w-25, .w-50, .w-75, .w-100, .mw-100).
Example:<!DOCTYPE html><htmllang="en"><head><linkrel="stylesheet"href=</head><body><divclass="container"><divclass="w-25 bg-success">Width 25%</div><divclass="w-50 bg-success">Width 50%</div><divclass="w-75 bg-success">Width 75%</div><divclass="w-100 bg-success">Width 100%</div><divclass="mw-100 bg-success">Max Width 100%</div></div></body></html>Output:
- Height: Set the height of an element with the h-* classes (.h-25, .h-50, .h-75, .h-100, .mh-100).
Example:<!DOCTYPE html><htmllang="en"><head><linkrel="stylesheet"href=</head><body><divclass="container"><divstyle="height:200px;background-color:#ddd"><divclass="h-25 d-inline-block p-2 bg-success">Height 25%</div><divclass="h-50 d-inline-block p-2 bg-success">Height 50%</div><divclass="h-75 d-inline-block p-2 bg-success">Height 75%</div><divclass="h-100 d-inline-block p-2 bg-success">Height 100%</div><divclass="mh-100 d-inline-block p-2 bg-success"style="height:500px">Max Height 100%</div></div></div></body></html>Output:
- Width: Set the width of an element with the w-* classes (.w-25, .w-50, .w-75, .w-100, .mw-100).
- Spacing :
Bootstrap 4 has a wide range of responsive margin and padding utility classes. They work for all breakpoints (have no breakpoint abbreviation in them): xs (=576px), md (>=768px), lg (>=992px) or xl (>=1200px)):The classes are used in the format: {property}{sides}-{size} for xs (extra small) and {property}{sides}-{breakpoint}-{size} for sm, md, lg, and xl.
Where property is one of:
m – sets margin
p – sets padding
Where sides is one of:t – sets margin-top or padding-top
b – sets margin-bottom or padding-bottom
l – sets margin-left or padding-left
r – sets margin-right or padding-right
x – sets both padding-left and padding-right or margin-left and margin-right
y – sets both padding-top and padding-bottom or margin-top and margin-bottom
blank – sets a margin or padding on all 4 sides of the element
Where size is one of:0 – sets margin or padding to 0
1 – sets margin or padding to .25rem (4px if font-size is 16px)
2 – sets margin or padding to .5rem (8px if font-size is 16px)
3 – sets margin or padding to 1rem (16px if font-size is 16px)
4 – sets margin or padding to 1.5rem (24px if font-size is 16px)
5 – sets margin or padding to 3rem (48px if font-size is 16px)
auto – sets margin to auto
Note: margins can also be negative, by adding an “n” in front of size.n1 – sets margin to -.25rem (-4px if font-size is 16px)
n2 – sets margin to -.5rem (-8px if font-size is 16px)
n3 – sets margin to -1rem (-16px if font-size is 16px)
n4 – sets margin to -1.5rem (-24px if font-size is 16px)
n5 – sets margin to -3rem (-48px if font-size is 16px)Example:
<!DOCTYPE html><htmllang="en"><head><linkrel="stylesheet"href=</head><body><divclass="container"><divclass="pt-4 bg-info">I only have a top padding (1.5rem = 24px)</div><divclass="p-5 bg-success">I have a padding on all sides (3rem = 48px)</div><divclass="m-5 pb-5 bg-info">I have a margin on all sides (3rem = 48px)and a bottom padding (3rem = 48px)</div></div></body></html>Output:
More examples on spacing:
.m-# / m-*-# margin on all sides .mt-# / mt-*-# margin top .mb-# / mb-*-# margin bottom .ml-# / ml-*-# margin left .mr-# / mr-*-# margin right .mx-# / mx-*-# margin left and right .my-# / my-*-# margin top and bottom .p-# / p-*-# padding on all sides .pt-# / pt-*-# padding top .pb-# / pb-*-# padding bottom .pl-# / pl-*-# padding left .pr-# / pr-*-# padding right .py-# / py-*-# padding top and bottom .px-# / px-*-# .px-# / px-*-# Shadows: Use the shadow- classes to add shadows to an element.
Example:<!DOCTYPE html><htmllang="en"><head><linkrel="stylesheet"href=</head><body><divclass="container"><divclass="shadow-none p-4 mb-4 bg-light">No shadow</div><divclass="shadow-sm p-4 mb-4 bg-white">Small shadow</div><divclass="shadow p-4 mb-4 bg-white">Default shadow</div><divclass="shadow-lg p-4 mb-4 bg-white">Large shadow</div></div></body></html>Output:
- Vertical Align:
Bootstrap 4 uses the align- classes to change the alignment of elements (only works on inline, inline-block, inline-table and table cell elements). We can choose from .align-baseline, .align-top, .align-middle, .align-bottom, .align-text-bottom, and .align-text-top as needed.
For example:- Vertical Align with inline-elements:
<!DOCTYPE html><htmllang="en"><head><linkrel="stylesheet"href=</head><body><divclass="container"><spanclass="align-baseline">baseline</span><spanclass="align-top">top</span><spanclass="align-middle">middle</span><spanclass="align-bottom">bottom</span><spanclass="align-text-top">text-top</span><spanclass="align-text-bottom">text-bottom</span></div></body></html>Output:
- Vertical Align with table-cells:
<!DOCTYPE html><htmllang="en"><head><linkrel="stylesheet"href=</head><body><divclass="container"><tablestyle="height: 100px;"><tbody><tr><tdclass="align-baseline">baseline</td><tdclass="align-top">top</td><tdclass="align-middle">middle</td><tdclass="align-bottom">bottom</td><tdclass="align-text-top">text-top</td><tdclass="align-text-bottom">text-bottom</td></tr></tbody></table></div></body></html>Output:
- Vertical Align with inline-elements:
- Embeds:
Bootstrap 4 enables us to create responsive video or slideshow embeds based on the width of the parent by creating an intrinsic ratio that scales on any device. We simply need to add the .embed-responsive-item to any embed elements in a parent element with .embed-responsive and an aspect ratio of our choice.
Example:<!DOCTYPE html><htmllang="en"><head><linkrel="stylesheet"href=</head><body><divclass="container mt-3"><p>Create a responsive videoand scale it nicely to the parent element.</p><h2>Aspect ratio 1:1</h2><divclass="embed-responsive embed-responsive-1by1"><iframeclass="embed-responsive-item"src=</iframe></div><br><h2>Aspect ratio 4:3</h2><divclass="embed-responsive embed-responsive-4by3"><iframeclass="embed-responsive-item"src=</iframe></div><br><h2>Aspect ratio 16:9</h2><divclass="embed-responsive embed-responsive-16by9"><iframeclass="embed-responsive-item"src=</iframe></div><br><h2>Aspect ratio 21:9</h2><divclass="embed-responsive embed-responsive-21by9"><iframeclass="embed-responsive-item"src=</iframe></div></div></body></html>Output:
In the code above, replace tag ‘tgbNymZ7vqY’ with your desired youtube video or video URL of your choice, in case you want a different video. (or change complete URL for other video hosting/sharing website)
- Visibility:
We can control the visibility, without modifying the display, of elements with visibility utilities.
Simply use the .visible or .invisible classes to control the visibility of elements.
Example:<!DOCTYPE html><htmllang="en"><head><linkrel="stylesheet"href=</head><body><divclass="container"><divclass="visible bg-success">I am visible</div><divclass="invisible bg-warning">I am invisible</div></div></body></html>Output:
- Close Icon:
We can use the .close class to style a close icon. This is often used for dismissing alerts and modals.Note: We use the × symbol to create the actual icon (a better looking “x”). Also note that it floats right by default:
Example:
(It appears blank/white for being closed)<!DOCTYPE html><htmllang="en"><head><linkrel="stylesheet"href=</head><body><divclass="container"><divclass="clearfix"><buttontype="button"class="close">×</button></div></div></body></html>Output:
- Screenreaders:
We can use screenreader utility (.sr-only) to hide elements on all devices except screen readers.
Example:<!DOCTYPE html><htmllang="en"><head><linkrel="stylesheet"href=</head><body><divclass="container mt-3"><p>Use the .sr-only class to hide an element onall devices, except screen readers:</p><spanclass="sr-only">I will be hidden on all screensexcept for screen readers.</span></div></body></html>Output:
- Blocks:
To make an element into a block element, add the .d-block class. We can use any of the d-*-block classes to control when the element should be a block element on a specific screen width.
Example:<!DOCTYPE html><htmllang="en"><head><linkrel="stylesheet"href=</head><body><divclass="container mt-3"><spanclass="d-block bg-success">d-block</span><spanclass="d-sm-block bg-success">d-sm-block</span><spanclass="d-md-block bg-success">d-md-block</span><spanclass="d-lg-block bg-success">d-lg-block</span><spanclass="d-xl-block bg-success">d-xl-block</span></div></body></html>Output:
- Flex:
Bootstrap 4 helps us to quickly manage the layout, alignment, and sizing of grid columns, navigation, components, and more with a full suite of responsive flexbox utilities. For more complex implementations, custom CSS may be necessary. We can use .flex-* classes to control the layout with flexbox.- Flex Behaviours:
We can apply display utilities to create a flexbox container and transform direct children elements into flex items. Flex containers and items are able to be modified further with additional flex properties.Examples:
<!DOCTYPE html><htmllang="en"><head><linkrel="stylesheet"href=</head><body><divclass="container mt-3"><divclass="d-flex p-2">I'm a flexbox container!</div><divclass="d-inline-flex p-2">I'm an inline flexbox container!</div></div></body></html>Output:
Direction:
We can set the direction of flex items in a flex container with direction utilities. In most cases, you can omit the horizontal class here as the browser default is a row. However, you may encounter situations where you needed to explicitly set this value (like responsive layouts).
Use .flex-row to set a horizontal direction (the browser default), or .flex-row-reverse to start the horizontal direction from the opposite side.
Example:<!DOCTYPE html><htmllang="en"><head><linkrel="stylesheet"href=</head><body><divclass="container mt-3"><divclass="d-flex flex-row"><divclass="p-2">Flex item 1</div><divclass="p-2">Flex item 2</div><divclass="p-2">Flex item 3</div></div><divclass="d-flex flex-row-reverse"><divclass="p-2">Flex item 1</div><divclass="p-2">Flex item 2</div><divclass="p-2">Flex item 3</div></div></div></body></html>Output:
- Likewise, we can use .flex-column to set a vertical direction, or .flex-column-reverse to start the vertical direction from the opposite side.
Example:<!DOCTYPE html><htmllang="en"><head><linkrel="stylesheet"href=</head><body><divclass="container mt-3"><divclass="d-flex flex-column"><divclass="p-2">Flex item 1</div><divclass="p-2">Flex item 2</div><divclass="p-2">Flex item 3</div></div><divclass="d-flex flex-column-reverse"><divclass="p-2">Flex item 1</div><divclass="p-2">Flex item 2</div><divclass="p-2">Flex item 3</div></div></div></body></html>Output:
- Justify:
We can use justify-content utilities on flexbox containers to change the alignment of flex items on the main axis (the x-axis to start, y-axis if flex-direction: column). Choose from start (browser default), end, center, between, or around.
Examples:<!DOCTYPE html><htmllang="en"><head><linkrel="stylesheet"href=</head><body><divclass="container mt-3"><divclass="d-flex justify-content-start bg-secondary mb-3"><divclass="p-2 bg-success">Flex item 1</div><divclass="p-2 bg-success">Flex item 2</div><divclass="p-2 bg-success">Flex item 3</div></div><divclass="d-flex justify-content-end bg-secondary mb-3"><divclass="p-2 bg-success">Flex item 1</div><divclass="p-2 bg-success">Flex item 2</div><divclass="p-2 bg-success">Flex item 3</div></div><divclass="d-flex justify-content-center bg-secondary mb-3"><divclass="p-2 bg-success">Flex item 1</div><divclass="p-2 bg-success">Flex item 2</div><divclass="p-2 bg-success">Flex item 3</div></div><divclass="d-flex justify-content-between bg-secondary mb-3"><divclass="p-2 bg-success">Flex item 1</div><divclass="p-2 bg-success">Flex item 2</div><divclass="p-2 bg-success">Flex item 3</div></div><divclass="d-flex justify-content-around bg-secondary mb-3"><divclass="p-2 bg-success">Flex item 1</div><divclass="p-2 bg-success">Flex item 2</div><divclass="p-2 bg-success">Flex item 3</div></div></div></body></html>Output:
Order:
We can also change the visual order of specific flex items with a handful of order utilities. We only provide options for making an item first or last, as well as a reset to use the DOM order. As order takes any integer value (e.g., 5), add custom CSS for any additional values needed.
Example:<!DOCTYPE html><htmllang="en"><head><linkrel="stylesheet"href=</head><body><divclass="container mt-3"><divclass="d-flex mb-3"><divclass="p-2 order-3 bg-success">Flex item 1</div><divclass="p-2 order-2 bg-success">Flex item 2</div><divclass="p-2 order-1 bg-success">Flex item 3</div></div></div></body></html>Output:
- Display:
Lastly, we can change the value of the display property with our responsive display utility classes. Bootstrap 4 purposely support only a subset of all possible values for display. Classes can be combined for various effects as we need.
As such, the classes are named using the format:
.d-{value} for xs
.d-{breakpoint}-{value} for sm, md, lg, and xl.Where value is one of:
- none
- inline
- inline-block
- block
- table
- table-cell
- table-row
- flex
- inline-flex
Examples:
<!DOCTYPE html><htmllang="en"><head><linkrel="stylesheet"href=</head><body><divclass="d-inline p-2 bg-primary text-white">d-inline</div><divclass="d-inline p-2 bg-dark text-white">d-inline</div></body></html>Output:
<!DOCTYPE html><htmllang="en"><head><linkrel="stylesheet"href=</head><body><spanclass="d-block p-2 bg-primary text-white">d-block</span><spanclass="d-block p-2 bg-dark text-white">d-block</span></body></html>Output:
Also, to hide elements we simply use the .d-none class or one of the .d-{sm, md, lg, xl}-none classes for any responsive screen variation.
Likewise, to show an element only on a given interval of screen sizes we can combine one .d-*-none class with a .d-*-* class, for example, .d-none, .d-md-block, .d-xl-none will hide the element for all screen sizes except on medium and large devices.
- Flex Behaviours:
