Bootstrap Utilities
What are Bootstrap Utilities?
Bootstrap Utilities are ready-made classes that help you style HTML elements directly — no extra CSS needed. You can use them to add spacing, align text, hide/show elements, and much more!
1. Spacing Utilities (Margin & Padding)
Example:
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<title>Spacing Utility</title>
<link href=”https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css” rel=”stylesheet”>
</head>
<body>
<div class=”m-3 p-5 bg-light border”>
This box has margin 3 and padding 5.
</div>
</body>
</html>
Output:
Explanation:
Margin adds space outside, padding adds space inside.
• m = Margin
• p = Padding
• {side} can be: t (top), b (bottom), s (start/left), e (end/right), x (left+right), y (top+bottom), blank = all sides
• {size} = 0 to 5 (e.g., p-3 = padding 1rem)
2. Text Utilities
Example:
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<title>Spacing Utility</title>
<link href=”https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css” rel=”stylesheet”>
</head>
<body>
<p class=”text-center text-primary”>
This is centered blue (primary) text.
</p>
</body>
</html>
Output:
Explanation:
Easily change text color and position.
Control text alignment and color.
• .text-start, .text-center, .text-end – for alignment
• .text-primary, .text-success, .text-danger, etc. – for color
3. Display Utilities
Example:
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<title>Spacing Utility</title>
<link href=”https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css” rel=”stylesheet”>
</head>
<body>
<div class=”d-block bg-info p-2″>
I am block-level and visible.
</div>
</body>
</html>
Output:
Explanation:
Use these classes to hide/show or change display type.
Control how an element is displayed.
• .d-none = hide
• .d-block = show as block
• .d-inline = show inline
4. Flexbox Utilities
Example:
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<title>Spacing Utility</title>
<link href=”https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css” rel=”stylesheet”>
</head>
<body>
<div class=”d-flex justify-content-center align-items-center bg-warning” style=”height: 100px;”>
I am centered!
</div>
</body>
</html>
Output:
Explanation:
Flex utilities center or align items easily.
Create flexible layouts.
• d-flex makes a flex container
• Align items: align-items-start, center, end
• Justify content: justify-content-start, center, end
5. Border Utilities
Example:
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<title>Spacing Utility</title>
<link href=”https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css” rel=”stylesheet”>
</head>
<body>
<div class=”border rounded-3 p-3″>
I have a border and rounded corners!
</div>
</body>
</html>
Output:
Explanation:
Add or remove borders, make boxes round or circular.
Control the border and corner radius.
• .border = add border
• .border-0 = remove border
• .rounded, .rounded-circle, .rounded-0 = rounded corners
6. Visibility Utilities
Example:
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<title>Spacing Utility</title>
<link href=”https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css” rel=”stylesheet”>
</head>
<body>
<div class=”d-none d-md-block bg-success text-white p-2″>
Visible on medium and larger screens.
</div>
</body>
</html>
Output:
Explanation:
Use for responsive hiding/showing of elements
Control the visibility of elements.
• .invisible = hidden but takes space
• .d-none = hidden and no space
• .d-sm-block, .d-md-block = show on certain screen sizes
7 . Positioning Utilities
Example:
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<title>Spacing Utility</title>
<link href=”https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css” rel=”stylesheet”>
</head>
<body>
<div class=”position-relative bg-secondary text-white p-3″ style=”height: 150px;”>
<div class=”position-absolute top-0 end-0 bg-danger p-1″>
I’m positioned.
</div>
</div>
</body>
</html>
Output:
Explanation:
Useful for overlays, badges, or tooltips.
Conclusion
Example:
Bootstrap Utilities save you from writing custom CSS. They are:
• Fast
• Reusable
• Mobile-responsive
• Easy to learn
Perfect! Here are 3 practice scenarios for the Bootstrap Utilities lesson you just created. Each includes a task, code example, and short description — all in the same clean format.
Shape
Scenario 1: Centered Alert Box
Objective: Create a Bootstrap alert box that is centered on the page with spacing and rounded corners.
Expected Output:
Scenario 2: Responsive Visibility Section
Objective: Show a message only on large screens (lg and above), hidden on small devices.
Expected Output:
Scenario 3: Badge Positioned Inside a Box
Objective: Place a small badge at the top-right of a box using position utilities.
Example Code:
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.
