• +91-9142290450

  • Hajipur, Bihar, 844101

☰
❮
❯

BS4 Utilities

← Previous Next →

Bootstrap 4 utilities are a set of helper classes that allow developers to quickly adjust the spacing, alignment, display, text, background, and other styling properties of elements without writing custom CSS. Utilities save time, maintain consistency, and improve responsiveness. They are lightweight and modular, making it easy to make small adjustments without affecting global styles.

Spacing Utilities

Bootstrap 4 provides margin and padding utilities to control the spacing of elements. These utilities use a scale from 0 to 5, where 0 removes spacing and 5 applies the largest predefined spacing.

<div class="m-3 p-3 bg-light">Margin and padding example</div>

  • m-3 applies margin on all sides.

  • p-3 applies padding on all sides.

  • You can also use directional classes:

    • mt-4 – margin top

    • mb-2 – margin bottom

    • pl-3 – padding left

    • pr-1 – padding right

  • Responsive spacing can be applied with breakpoints, e.g., mt-md-5 applies top margin for medium screens and above.

Display Utilities

Display utilities allow quick control over how elements are rendered. Common classes include:

  • d-none – hides the element.

  • d-block – displays as block.

  • d-inline – displays as inline.

  • d-inline-block – displays as inline-block.

  • Responsive display: d-sm-block d-md-none adjusts visibility at different breakpoints.

<p class="d-none d-md-block">Visible only on medium screens and above</p>

  • These utilities are useful for responsive design and conditional rendering.

Text Utilities

Text utilities allow control over alignment, transformation, wrapping, and color.

  • Alignment: text-left, text-center, text-right.

  • Transformation: text-lowercase, text-uppercase, text-capitalize.

  • Wrapping: text-truncate for ellipsis overflow.

  • Color: text-primary, text-success, text-danger, etc.

<p class="text-center text-uppercase text-primary">Centered uppercase text</p>

  • Text utilities simplify typography adjustments without custom CSS.

Background Utilities

Background utilities apply colors or gradients to elements using classes like:

  • bg-primary, bg-success, bg-warning, bg-danger, bg-light, bg-dark.

  • bg-transparent makes the background transparent.

  • You can combine with text colors for better contrast.

<div class="bg-warning text-dark p-3">Warning background example</div>

  • Background utilities are helpful for alerts, cards, and call-to-action sections.

Border Utilities

Bootstrap 4 provides border utilities to quickly control borders:

  • border – adds a border on all sides.

  • border-top, border-bottom, border-left, border-right – directional borders.

  • border-0 – removes borders.

  • Rounded borders: rounded, rounded-circle, rounded-pill.

  • Border color: border-primary, border-success, border-dark.

<div class="border border-success rounded p-3">Bordered and rounded div</div>

  • Border utilities are useful for cards, buttons, and highlights.

Sizing Utilities

Sizing utilities allow adjustment of width and height:

  • w-25, w-50, w-75, w-100 – width percentages.

  • h-25, h-50, h-75, h-100 – height percentages.

  • mw-100 and mh-100 – maximum width and height.

  • Useful for responsive images, cards, and flexible layouts.

<img src="image.jpg" class="w-50" alt="Half-width image">

Flex Utilities

Although Bootstrap has a separate Flex tutorial, utilities for alignment and justification are part of utilities:

  • d-flex – enables flex layout.

  • justify-content-start, justify-content-center, justify-content-end, justify-content-between, justify-content-around.

  • align-items-start, align-items-center, align-items-end.

  • These classes allow precise control over element placement without custom CSS.

<div class="d-flex justify-content-center align-items-center">
  <button class="btn btn-primary">Centered Button</button>
</div>

Visibility Utilities

Visibility utilities allow you to control element visibility across screen sizes:

  • visible and invisible – toggles visibility while keeping space occupied.

  • Responsive display: d-none d-sm-block hides an element on extra small screens but shows on small screens and above.

Overflow Utilities

Control the overflow of elements with:

  • overflow-auto – scrollbars appear if content overflows.

  • overflow-hidden – hides overflowing content.

  • overflow-visible – content is visible even if it exceeds boundaries.

<div class="overflow-auto" style="height:100px;">Long content goes here...</div>

  • These utilities help manage scrollable containers and prevent layout issues.

Position Utilities

Position utilities provide control over CSS positioning:

  • position-static, position-relative, position-absolute, position-fixed, position-sticky.

  • Combine with top-0, right-0, bottom-0, left-0 to place elements precisely.

<div class="position-fixed top-0 right-0 p-3 bg-primary text-white">Fixed Top Right</div>

  • Position utilities are helpful for notifications, modals, and sticky headers.

Summary of the Tutorial

This tutorial covered Bootstrap 4 utilities and their usage. You learned:

  • How to use spacing utilities for margin and padding, including responsive options.

  • Display utilities to control visibility and layout at different screen sizes.

  • Text utilities for alignment, transformation, color, and wrapping.

  • Background utilities for color application and contrast management.

  • Border utilities for adding, removing, and styling borders.

  • Sizing utilities for controlling width, height, and responsive scaling.

  • Flex utilities for alignment and distribution of elements within containers.

  • Visibility, overflow, and position utilities to manage layout and responsiveness.

Bootstrap 4 utilities provide a modular and efficient way to apply common styles without writing custom CSS. Proper use of utilities improves consistency, responsiveness, and maintainability across projects.

Practice Questions

  1. Create a div with margin m-4 and padding p-3 and a light background.

  2. Build a paragraph with centered, uppercase, and primary-colored text.

  3. Create a button with d-none d-md-block to hide it on small screens and show on medium screens and above.

  4. Build a div with bg-success text-white p-4 to display a success message.

  5. Create a bordered, rounded div using border border-primary rounded classes.

  6. Add an image with width w-50 and height h-50 to make it half the size of its container.

  7. Create a flex container with d-flex justify-content-between align-items-center containing two buttons.

  8. Build a div with overflow-auto containing long text so it becomes scrollable.

  9. Create a fixed position toast or alert using position-fixed top-0 right-0 p-3.

  10. Build a responsive div that is visible only on small screens using d-block d-md-none.

← Previous Next →

Try a Short Quiz.

coding learning websites codepractice

No quizzes available.

Bootstrap 4

online coding class codepractice

Bootstrap Basics

Layout & Grid System

Content & Typography

Components

Forms

JavaScript Components

Utilities & Helpers

codepractice logo
Login
Go Back Top