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 others, 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 the cursor over the item) too.Â
Example 1:Â
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<p class="text-primary">.text-primary</p>
<p class="text-secondary">.text-secondary</p>
<p class="text-success">.text-success</p>
<p class="text-danger">.text-danger</p>
<p class="text-warning">.text-warning</p>
<p class="text-info">.text-info</p>
<p class="text-light bg-dark">.text-light</p>
<p class="text-dark">.text-dark</p>
<p class="text-muted">.text-muted</p>
<p class="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:Â
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<h2>Contextual Link Colors</h2>
<p>Hover over the links.</p>
<a href="#" class="text-muted">
Muted link.
</a>
<a href="#" class="text-primary">
Primary link.
</a>
<a href="#" class="text-success">
Success link.
</a>
<a href="#" class="text-info">
Info link.
</a>
<a href="#" class="text-warning">
Warning link.
</a>
<a href="#" class="text-danger">
Danger link.
</a>
<a href="#" class="text-secondary">
Secondary link.
</a>
<a href="#" class="text-dark">
Dark grey link.
</a>
<a href="#" class="text-body">
Body/black link.
</a>
<a href="#" 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:Â
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<p class="text-black-50">
Black text with 50% opacity on white background
</p>
<p class="text-white-50 bg-dark">
White text with 50% opacity on black background
</p>
</div>
</body>
</html>
Output:
 
- 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:Â
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<p class="bg-primary text-white">
This text is important.
</p>
<p class="bg-success text-white">
This text indicates success.
</p>
<p class="bg-info text-white">
This text represents some information.
</p>
<p class="bg-warning text-white">
This text represents a warning.
</p>
<p class="bg-danger text-white">
This text represents danger.
</p>
<p class="bg-secondary text-white">
Secondary background color.
</p>
<p class="bg-dark text-white">
Dark grey background color.
</p>
<p class="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 well for images, buttons, or any other element(s). Use class 'Border' here.
Additive Borders: Use to 'add' borders.Â
Example:Â
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<style>
.border {
display: inline-block;
width: 70px;
height: 70px;
margin: 6px;
}
</style>
</head>
<body>
<div class="container">
<span class="border"></span>
<span class="border border"></span>
<span class="border border-top"></span>
<span class="border border-right"></span>
<span class="border border-bottom"></span>
<span class="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:Â
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<style>
.border {
display: inline-block;
width: 70px;
height: 70px;
margin: 6px;
}
</style>
</head>
<body>
<div class="container">
<span class="border"></span>
<span class="border border-0"></span>
<span class="border border-top-0"></span>
<span class="border border-right-0"></span>
<span class="border border-bottom-0"></span>
<span class="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 color: Use to give a particular color to the border.Â
Example:Â
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<style>
.border {
display: inline-block;
width: 70px;
height: 70px;
margin: 6px;
}
</style>
</head>
<body>
<div class="container">
<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>
</div>
</body>
</html>
Output:
 
 The 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:Â
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<style>
span {
display: inline-block;
width: 70px;
height: 70px;
margin: 6px;
background-color: #555;
}
</style>
</head>
<body>
<div class="container">
<span class="rounded-sm">
</span>
<span class="rounded">
</span>
<span class="rounded-lg">
</span>
<span class="rounded-top">
</span>
<span class="rounded-right">
</span>
<span class="rounded-bottom">
</span>
<span class="rounded-left">
</span>
<span class="rounded-circle">
</span>
<span class="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) are implemented.
- Text: Bootstrap 4 includes documentation and examples for common text utilities to control alignment, wrapping, weight, and more.
Text Alignment: For the left, right, and center alignment, responsive classes are available that use the same viewport width breakpoints as the grid system.Â
Example:Â
HTML
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<p class="text-left">
Left aligned text on all viewport sizes.
</p>
<p class="text-center">
Center aligned text on all viewport sizes.
</p>
<p class="text-right">
Right aligned text on all viewport sizes.
</p>
<p class="text-sm-left">
Left aligned text on viewports sized SM
(small) or wider.
</p>
<p class="text-md-left">
Left aligned text on viewports sized MD
(medium) or wider.
</p>
<p class="text-lg-left">
Left aligned text on viewports sized LG
(large) or wider.
</p>
<p class="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 into components with text capitalization classes.Â
Example:Â
HTML
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<p class="text-lowercase">Lowercased text.</p>
<p class="text-uppercase">Uppercased text.</p>
<p class="text-capitalize">Capitalized text.</p>
</div>
</body>
</html>
Output:
 
Font Weight/Italics: We can change the weight/boldness of text or italicize text.Â
Example:Â
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<h1>Font weight and italics</h1>
<p class="font-weight-bold">
Bold text.
</p>
<p class="font-weight-normal">
Normal weight text.
</p>
<p class="font-weight-light">
Light weight text.
</p>
<p class="font-italic">
Italic text.
</p>
</div>
</body>
</html>
Output:
 
- 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:Â
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<div class="clearfix">
<span class="float-left">
Float left
</span>
<span class="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:Â
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<div class="clearfix">
<div class="float-sm-right">
Float right on small screens or wider
</div>
<br>
<div class="float-md-right">
Float right on medium screens or wider
</div>
<br>
<div class="float-lg-right">
Float right on large screens or wider
</div>
<br>
<div class="float-xl-right">
Float right on extra large screens or wider
</div>
<br>
<div class="float-none">
Float none
</div>
</div>
</div>
</body>
</html>
Output: 
Position: There are shorthand utilities 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 its 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:Â
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<div class="w-25 bg-success">
Width 25%
</div>
<div class="w-50 bg-success">
Width 50%
</div>
<div class="w-75 bg-success">
Width 75%
</div>
<div class="w-100 bg-success">
Width 100%
</div>
<div class="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:Â
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<div style="height:200px;background-color:#ddd">
<div class="h-25 d-inline-block p-2 bg-success">
Height 25%
</div>
<div class="h-50 d-inline-block p-2 bg-success">
Height 50%
</div>
<div class="h-75 d-inline-block p-2 bg-success">
Height 75%
</div>
<div class="h-100 d-inline-block p-2 bg-success">
Height 100%
</div>
<div class="mh-100 d-inline-block p-2 bg-success"
style="height:500px">
Max Height 100%
</div>
</div>
</div>
</body>
</html>
Output:
 
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:Â
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<div class="pt-4 bg-info">
I only have a top padding (1.5rem = 24px)
</div>
<div class="p-5 bg-success">
I have a padding on all sides (3rem = 48px)
</div>
<div class="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-*-# |
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:Â
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<span class="align-baseline">
baseline
</span>
<span class="align-top">
top
</span>
<span class="align-middle">
middle
</span>
<span class="align-bottom">
bottom
</span>
<span class="align-text-top">
text-top
</span>
<span class="align-text-bottom">
text-bottom
</span>
</div>
</body>
</html>
Output:Â
Vertical Align with table-cells:Â
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<table style="height: 100px;">
<tbody>
<tr>
<td class="align-baseline">
baseline
</td>
<td class="align-top">
top
</td>
<td class="align-middle">
middle
</td>
<td class="align-bottom">
bottom
</td>
<td class="align-text-top">
text-top
</td>
<td class="align-text-bottom">
text-bottom
</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
Output:
 
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:Â
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
</head>
<body>
<div class="container mt-3">
<p>Create a responsive video
and scale it nicely to the parent element.</p>
<h2>Aspect ratio 1:1</h2>
<div class="embed-responsive embed-responsive-1by1">
<iframe class="embed-responsive-item"
src="https://www.youtube.com/embed/MtQL_ll5KhQ">
</iframe>
</div>
<br>
<h2>Aspect ratio 4:3</h2>
<div class="embed-responsive embed-responsive-4by3">
<iframe class="embed-responsive-item"
src="https://www.youtube.com/embed/MtQL_ll5KhQ">
</iframe>
</div>
<br>
<h2>Aspect ratio 16:9</h2>
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item"
src="https://www.youtube.com/embed/MtQL_ll5KhQ">
</iframe>
</div>
<br>
<h2>Aspect ratio 21:9</h2>
<div class="embed-responsive embed-responsive-21by9">
<iframe class="embed-responsive-item"
src="https://www.youtube.com/embed/MtQL_ll5KhQ">
</iframe>
</div>
</div>
</body>
</html>
Output:
In the code above, replace the 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:Â
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<div class="visible bg-success">
I am visible
</div>
<div class="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)Â
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<div class="clearfix">
<button type="button" class="close">
×
</button>
</div>
</div>
</body>
</html>
Output:
 
Screenreaders: We can use the screenreader utility (.sr-only) to hide elements on all devices except screen readers.Â
Example:Â
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
</head>
<body>
<div class="container mt-3">
<p>Use the .sr-only class to hide an element on
all devices, except screen readers:</p>
<span class="sr-only">
I will be hidden on all screens
except 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 specific screen width.Â
Example:Â
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
</head>
<body>
<div class="container mt-3">
<span class="d-block bg-success">
d-block
</span>
<span class="d-sm-block bg-success">
d-sm-block
</span>
<span class="d-md-block bg-success">
d-md-block
</span>
<span class="d-lg-block bg-success">
d-lg-block
</span>
<span class="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:Â
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
</head>
<body>
<div class="container mt-3">
<div class="d-flex p-2">
I'm a flexbox container!
</div>
<div class="d-inline-flex p-2">
I'm an inline flexbox container!
</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:Â
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
</head>
<body>
<div class="container mt-3">
<div class="d-flex flex-column">
<div class="p-2">
Flex item 1
</div>
<div class="p-2">
Flex item 2
</div>
<div class="p-2">
Flex item 3
</div>
</div>
<div class="d-flex flex-column-reverse">
<div class="p-2">
Flex item 1
</div>
<div class="p-2">
Flex item 2
</div>
<div class="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 the start (browser default), end, center, between, or around.Â
Examples:Â
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
</head>
<body>
<div class="container mt-3">
<div class="d-flex justify-content-start bg-secondary mb-3">
<div class="p-2 bg-success">
Flex item 1
</div>
<div class="p-2 bg-success">
Flex item 2
</div>
<div class="p-2 bg-success">
Flex item 3
</div>
</div>
<div class="d-flex justify-content-end bg-secondary mb-3">
<div class="p-2 bg-success">
Flex item 1
</div>
<div class="p-2 bg-success">
Flex item 2
</div>
<div class="p-2 bg-success">
Flex item 3
</div>
</div>
<div class="d-flex justify-content-center bg-secondary mb-3">
<div class="p-2 bg-success">
Flex item 1
</div>
<div class="p-2 bg-success">
Flex item 2
</div>
<div class="p-2 bg-success">
Flex item 3
</div>
</div>
<div class="d-flex justify-content-between bg-secondary mb-3">
<div class="p-2 bg-success">
Flex item 1
</div>
<div class="p-2 bg-success">
Flex item 2
</div>
<div class="p-2 bg-success">
Flex item 3
</div>
</div>
<div class="d-flex justify-content-around bg-secondary mb-3">
<div class="p-2 bg-success">
Flex item 1
</div>
<div class="p-2 bg-success">
Flex item 2
</div>
<div class="p-2 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 supports 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
Similar Reads
Bootstrap 4 Tutorial
Bootstrap 4 is an open-source framework for creating responsive web applications. It is the most popular CSS framework for creating mobile-first websites. It is free to use we can directly integrate Bootstrap 4 into our project using CDN Links or with npm. Bootstrap 4 Tutorial is designed to help be
3 min read
Bootstrap 4 Introduction
Bootstrap is a free and open-source tool collection for creating responsive websites and web applications. It is the most popular HTML, CSS, and JavaScript framework for developing responsive, mobile-first websites. It solves many problems which we had once, one of which is the cross-browser compati
3 min read
Content
Bootstrap 4 | Typography
Typography is a feature of Bootstrap for styling and formatting the text content. It is used to create customized headings, inline subheadings, lists, paragraphs, aligning, adding more design-oriented font styles, and much more. Bootstrap support global settings for the font stack, Headings and Link
3 min read
Bootstrap 4 Images
Bootstrap 4 provides classes to style images responsively, including responsive images that automatically adjust the size based on screen width, image shapes such as rounded or circular, and image thumbnails with optional borders and captions, facilitating flexible and attractive image layouts. The
4 min read
Bootstrap 4 | Tables
Bootstrap provides a series of classes that can be used to apply various styling to the tables such as changing the heading appearance, making the rows stripped, adding or removing borders, making rows hoverable, etc. Bootstrap also provides classes for making tables responsive. Simple Table: The .t
9 min read
Bootstrap | figure class with Examples
A figure is used when one needs to display a piece of content, generally images with an optional caption. The figure class in Bootstrap is used to add styling to the default figure elements. The base .figure class is used to indicate a figure element. The .figure-img is used to indicate the image us
1 min read
Components
Bootstrap 4 | Alerts
We often see certain alerts on some websites before or after completing an action. These alert messages are highlighted texts that are important to take into consideration while performing a process. Bootstrap allows showing these alert messages on the website using predefined classes. The .alert cl
3 min read
Bootstrap 4 | Badges
The .badge class is used to add additional information to the content. For example, some websites associate a number of notifications to the link. The notification number is seen when logged in to a particular website which tells the numbers of news or notifications to see by clicking it.Example: HT
3 min read
Bootstrap 4 | Buttons
Bootstrap provides different classes that can be used with different tags, such as <button>, <a>, <input>, and <label> to apply custom button styles. Bootstrap also provides classes that can be used for changing the state and size of buttons. Also, it provides classes for app
5 min read
Bootstrap 4 | Button Groups
Bootstrap offers classes which allow to group buttons along the same line, horizontally or vertically. The buttons to be grouped are nested inside a <div> element with the class .btn-group. Horizontally arranged button groups: The .btn-group class is used to create horizontally arranged button
4 min read
Bootstrap 4 | Cards
A Bootstrap card is a flexible box containing some padding around the content. It includes the options for headers and footers, color, content, and powerful display options. It replaces the use of panels, wells, and thumbnails. It can be used in a single container called card. Basic Card: The .card
7 min read
Bootstrap 4 Carousel
The Bootstrap Carousel is used to create an image slide show for the webpage to make it look more attractive. It can be included in the webpage using bootstrap.js or bootstrap.min.js. Carousels are not supported properly in Internet Explorer, this is because they use CSS3 transitions and animations
2 min read
Bootstrap 4 | Collapse
Bootstrap 4 offers different classes for creating collapsible elements. A collapsible element is used to hide or show a large amount of content. When clicking a button it targets a collapsible element, the class transition takes place as follows:Â Â .collapse: It hides the content..collapsing: It appl
5 min read
Bootstrap 4 | Dropdowns
Dropdowns are one of the most important parts of an interactive website. A dropdown menu is the collection of menu items that allow users to choose a value from the list. The .dropdown class is used to design the drop-down menu. Example: HTML <!DOCTYPE html> <html lang="en">
8 min read
Bootstrap 4 | Forms
Form Layout: Bootstrap provides two types of form layout which are listed below: Stacked formInline form Stacked form: The stacked form creates input field and submit button in stacked format. Example: HTML <!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap Fo
5 min read
Bootstrap 4 | Input Groups
Input Groups in Bootstrap are used to extend the default form controls by adding text or buttons on either side of textual inputs, custom file selectors or custom inputs. Basic input groups: The following classes are the base classes that are used to add the groups to either side of the input boxes.
7 min read
Bootstrap 4 | Jumbotron
Bootstrap 4 Jumbotron is a large, prominent container for displaying key content, such as headers or call-to-action messages, with customizable background colors and padding for emphasis. Steps to add jumbotron: Use a jumbotron class inside a div element.Write any text inside the div tag.Close the d
2 min read
Bootstrap 4 | List Groups
List Groups are used to display a series of content in an organized way. Use .list-group and .list-group-item classes to create a list of items. The .list-group class is used with <ul> element and .list-group-item is used with <li> element. Example: HTML <!DOCTYPE html> <html la
4 min read
Bootstrap 4 | Modal
In simple words, the Modal component is a dialog box/popup window that is displayed on top of the current page, once the trigger button is clicked. However, clicking on the modal's backdrop automatically closes the modal. Also, it must be kept in mind that Bootstrap doesn't support nested modals as
5 min read
Bootstrap 4 | Navs
Nav Menu: The .nav, .nav-item and .nav-link classes are used to create navigation menu. The .nav, .nav-item and .nav-link classes are used with <ul>, <li> and link element respectively. Example: HTML <!DOCTYPE html> <html lang="en"> <head> <title>Nav men
7 min read
Bootstrap 4 Navigation Bar
A navigation bar is used in every website to make it more user-friendly so that the navigation through the website becomes easy and the user can directly search for the topic of their interest. The navigation bar is placed at the top of the page.Basic Navigation Bar: The .navbar class is used to cre
8 min read
Bootstrap 4 | Pagination
Pagination is used to enable navigation between pages in a website. The pagination used in Bootstrap has a large block of connected links that are hard to miss and are easily scalable. Basic Pagination: The basic pagination can be specified using the following classes. The .pagination class is used
5 min read
Bootstrap 4 | Popover
The popover is an attribute of bootstrap that can be used to make any website look more dynamic. Popovers are generally used to display additional information about any element and are displayed on click of mouse pointer over that element.The data-toggle = "popover" attribute is used to create popov
3 min read
Bootstrap 4 | Progress Bars
A progress bar is used to display the progress of a process on a computer. A progress bar displays how much of the process is completed and how much is left. You can add a progress bar on a web page using predefined bootstrap classes. Bootstrap provides many types of progress bars.Syntax:Â Â <div c
4 min read
Bootstrap 4 | Scrollspy
Sometimes while designing the website, we include some attractive features which makes website eye-catching. One of the features is Bootstrap scrollspy which target the navigation bar contents automatically on scrolling the area.Create scrollspy: The data-spy="scroll" and data-target=".navbar" attri
4 min read
Bootstrap 4 | Tooltip
A Tooltip is used to provide interactive textual hints to the user about the element when the mouse pointer moves over. For Example, in the below image GeeksForGeeks is a button and when the user mouse moves over it, the additional information "A computer Science Portal" pops-up will display. Toolti
2 min read
Bootstrap 4 | Spinners
Bootstrap provides various classes for creating different styles of "spinner" to display the loading state of projects. These classes are inbuilt with HTML and CSS so no need to write any JavaScript to create them. We can also modify the appearance, size, and placement of the spinners with the class
7 min read
Bootstrap 4 | Toast
Toast is used to create something like an alert box which is shown for a short time like a couple of seconds when something happens. Like when the user clicks on a button or submits a form and many other actions. .toast: It helps to create a toast.toast-header : It helps to create the toast header.t
3 min read