Bootstrap Utilities
Utilities in Bootstrap are predefined classes that help you style elements without writing custom CSS. They cover a wide range of tasks, such as controlling spacing, text alignment, visibility, and more. Using utilities, you can easily modify the design and layout of your page, saving both time and effort.
How to Use Bootstrap Utilities
To use any of the utilities, simply add the corresponding class to the HTML element. These utility classes are already included in Bootstrap, so you don’t need any additional CSS. For example, to add padding to an element, just apply the. p-3 class for padding of 1rem on all sides.
Why Use Bootstrap Utilities?
• Quick Styling: Bootstrap utilities allow you to style elements directly in HTML without writing custom CSS.
• Consistency: Bootstrap ensures that utilities are consistent across your entire project.
• Responsive Design: Many utilities are responsive by default, meaning they adapt to different screen sizes.
Types of Bootstrap Utilities
Bootstrap 5 utilities are categorized into several groups. Let’s explore the key categories.
1. Spacing Utilities
Spacing utilities allow you to adjust the margin and padding of elements. These utilities follow the format of .m-{side}-{size} for margins and .p-{side}-{size} for padding.
Margin:
• .m-{size}: Sets margin on all sides.
• .mt-{size}: Sets margin on the top.
• .mb-{size}: Sets margin on the bottom.
• .ml-{size}: Sets margin on the left.
• .mr-{size}: Sets margin on the right.
Padding:
• .p-{size}: Sets padding on all sides.
• .pt-{size}: Sets padding on the top.
• .pb-{size}: Sets padding on the bottom.
• .pl-{size}: Sets padding on the left.
• .pr-{size}: Sets padding on the right.
Example:
<div class=”m-3 p-5″>
This element has a margin of 3 and padding of 5.
</div>
Output:
2. Text Utilities
Text utilities help you control text formatting such as alignment, color, and decoration.
These utilities include:
Text Alignment:
• .text-left: Aligns text to the left.
• .text-center: Centers the text.
• .text-right: Aligns text to the right.
Text Color:
• .text-primary: Applies the primary color to the text.
• .text-success: Applies a green color to the text.
• .text-danger: Applies a red color to the text.
Example:
<p class=”text-center text-primary”>This is a centered primary colored text.</p>
Output:
3. Display Utilities
Display utilities control how elements are shown or hidden.
Display
• .d-none: Hides an element.
• .d-block: Makes an element a block-level element.
• .d-inline: Displays an element inline.
Example:
<div class=”d-block”>
This element is displayed as a block.
</div>
Output:
4. Flexbox Utilities
Flexbox utilities allow you to control the alignment and arrangement of items in a flex container.
Align Items:
• .align-items-start: Aligns items at the start of the flex container.
• .align-items-center: Aligns items at the center.
• .align-items-end: Aligns items at the end.
Justify Content:
• .justify-content-start: Aligns content to the start of the flex container.
• . justify-content-center: Aligns content in the center.
• . justify-content-end: Aligns content to the end.
Example:
<div class=”d-flex align-items-center justify-content-center”>
Flexbox content centered both vertically and horizontally.
</div>
Output:
5. Border Utilities
Borders can be controlled using utilities in Bootstrap. You can specify the border style, width, and radius.
Border Width:
• .border: Adds a border with a width of 1px.
• .border-0: Removes the border.
Border Radius:
• .rounded: Applies a border-radius.
• .rounded-circle: Makes the element fully circular.
• .rounded-0: Removes the border-radius.
Example:
<div class=”border rounded-3″>
This element has a border and rounded corners.
</div>
Output:
6. Visibility Utilities
Visibility utilities help you control the visibility of elements across different screen sizes.
Visibility Classes:
• .visible: Makes the element visible.
• .invisible: Hides the element but still takes up space.
Responsive Visibility:
• . d-none d-sm-block: Hides the element on small screens and above, but visible on larger screens.
Example:
<div class=”d-none d-md-block”>
This element is hidden on smaller screens and visible on medium screens and above.
</div>
Output:
7. Positioning Utilities
Positioning utilities let you control the position of elements.
Position:
• .position-static: Default static positioning.
• .position-relative: Positions the element relative to its normal position.
• .position-absolute: Positions the element relative to its nearest positioned ancestor.
• .position-fixed: Positions the element relative to the viewport.
Example:
<div class=”position-relative”>
This element is positioned relative to its normal position.
</div>
Output:
Course Video
Reference Video
Bootstrap utilities are classes designed to simplify and speed up the customization of HTML elements without writing additional CSS.
Yes, this Bootstrap training is completely free. You can access all tutorials and learn Bootstrap at your own pace without any charges.
Use spacing utilities such as .m-3 for margin and .p-3 for padding, where the number represents the size in the Bootstrap scale.
Yes, we offer Bootstrap Utilities tutorial in Hindi to help Hindi-speaking students understand the concepts easily. Whether you’re a beginner or intermediate, this course is tailored to your needs.
Examples include:
- Spacing utilities (
.m-3,.p-3). - Display utilities (
.d-flex,.d-none). - Text utilities (
.text-center,.text-uppercase).
Yes, Bootstrap utilities include responsive classes like .d-sm-block and .d-md-none that allow elements to adapt to different screen sizes.
You can customize utility classes by overriding them in your CSS or using the Bootstrap utility API for additional flexibility.
Bootstrap utilities reduce the need for writing custom CSS, speeding up development and ensuring consistent styling across your website.
Yes, Bootstrap utilities can be used alongside other frameworks, but be cautious of conflicting class names or styles.
