Bootstrap is a popular front-end framework for building responsive and mobile-first web applications.
One of the key features of Bootstrap is its set of utilities, which are pre-defined CSS classes that can be used to quickly style elements on a web page.
These utilities can save time and effort for developers, as they provide a quick and easy way to apply common styles without having to write custom CSS code.
Spacing Utilities
Bootstrap provides a set of spacing utilities for adding padding and margin to elements.
These classes are based on a grid system of 8px increments, and are designed to work in conjunction with the framework's responsive grid system.
The syntax for these classes is as follows:
.m-{size}-{value}Where size is one of t (for margin-top), b (for margin-bottom), l (for margin-left), r (for margin-right), x (for both margin-left and margin-right), or y (for both margin-top and margin-bottom), and value is a number from 0 to 5 representing the size of the margin or padding in 8px increments.
For example, the following class will add a margin of 8px to the top of an element:
<div class="m-t-1">...</div>And the following class will add padding of 24px to the left and right of an element:
<div class="p-x-3">...</div>Display Utilities
Bootstrap provides a set of display utilities for controlling the visibility and display of elements.
These classes are used to hide or show elements on different viewport sizes, or to set the display property of an element to block, inline, or inline-block.
The syntax for these classes is as follows:
.d-{value}-{size}Where value is one of none, inline, inline-block, block, or flex, and size is a breakpoint size, such as sm, md, lg, or xl.
For example, the following class will set the display property of an element to block on small viewports:
<div class="d-block d-sm-none">...</div>And the following class will hide an element on large viewports:
<div class="d-none d-lg-block">...</div>Text Utilities
Bootstrap provides a set of text utilities for controlling the appearance of text elements.
These classes are used to set font weights, align text, and control the color of text.
The syntax for these classes is as follows:
.font-weight-{value}
.text-{value}
.text-{color}Where value is a font weight, such as bold, normal, or light, value is an alignment value, such as left, center, or right, and color is a color class, such as primary, secondary, success, danger, warning, or info.
For example, the following class will set the font weight of text to bold:
<p class="font-weight-bold">...</p>And the following class will align text to the center:
<p class="text-center">...</p>Background Utilities
Bootstrap provides a set of background utilities for setting the background color of elements.
These classes are used to apply pre-defined background colors, or to set a custom background color using CSS.
The syntax for these classes is as follows:
.bg-{color}Where color is a color class, such as primary, secondary, success, danger, warning, or info.
For example, the following class will set the background color of an element to the primary color:
<div class="bg-primary">...</div>And the following class will set a custom background color using CSS:
<div style="background-color: #eee;">...</div>Border Utilities
Bootstrap provides a set of border utilities for controlling the appearance of borders.
These classes are used to set the border style, color, and width of elements.
The syntax for these classes is as follows:
.border-{color}
.border-{value}Where color is a color class, such as primary, secondary, success, danger, warning, or info, and value is a border width value, such as 0, 1, 2, 3, or 4.
For example, the following class will set the border color of an element to the primary color:
<div class="border-primary">...</div>And the following class will set a border width of 2:
<div class="border-2">...</div>Flexbox Utilities
Bootstrap provides a set of flexbox utilities for controlling the layout and alignment of elements.
These classes are used to set the direction, wrap, and align items of a flex container.
The syntax for these classes is as follows:
.d-flex
.flex-{value}-{size}
.align-items-{value}
.justify-content-{value}Where value is a direction value, such as row or column, value is a wrap value, such as wrap or nowrap, value is an align value, such as center or baseline, and value is a justify value, such as center or between.
For example, the following class will set a container to use flexbox layout:
<div class="d-flex">...</div>And the following class will align items in a flex container to the center:
<div class="d-flex align-items-center">...</div>Sizing Utilities
Bootstrap provides a set of sizing utilities for controlling the width, height, and padding of elements.
These classes are used to set a fixed or proportional width and height, as well as to set custom padding values.
The syntax for these classes is as follows:
.w-{value}
.h-{value}
.p-{value}
.pt-{value}
.pb-{value}
.pl-{value}
.pr-{value}Where value is a size value, such as 25, 50, 75, 100, or auto, and value is a padding value, such as 0, 1, 2, 3, 4, 5, auto, or a custom value in pixels, such as 10px.
For example, the following class will set the width of an element to 50%:
<div class="w-50">...</div>And the following class will set custom padding values for the top and bottom of an element:
<div class="pt-3 pb-3">...</div>Spacing Utilities
Bootstrap provides a set of spacing utilities for controlling the margin and padding of elements.
These classes are used to set custom margin and padding values, or to set the margin or padding of an element using pre-defined spacing values.
The syntax for these classes is as follows:
.m-{value}
.mt-{value}
.mb-{value}
.ml-{value}
.mr-{value}
.p-{value}
.pt-{value}
.pb-{value}
.pl-{value}
.pr-{value}Where value is a margin or padding value, such as 0, 1, 2, 3, 4, 5, or a custom value in pixels, such as 10px.
For example, the following class will set a custom margin value for the top of an element:
<div class="mt-3">...</div>And the following class will set custom padding values for the left and right of an element:
<div class="pl-3 pr-3">...</div>Conclusion
Bootstrap utilities provide a set of pre-defined classes for controlling the appearance and layout of elements in a web page.
These classes are simple to use and provide a flexible and convenient way to add style and functionality to a website.
Whether you are creating a simple landing page or a complex web application, Bootstrap utilities can help you achieve your design goals quickly and easily.