Bootstrap - Utilities

Spacing Utilities

Spacing utilities in Bootstrap let you control the margin, padding, and gaps between elements in your layouts. These utilities give you a fast and consistent way to manage spacing without writing custom CSS.

<div class="mt-3 mb-4">Content with top margin of 1rem and bottom margin of 1.5rem</div>
<div class="px-2 py-3">Content with left and right padding of 0.5rem and top and bottom padding of 1rem</div>

<div class="mt-md-4">Content with top margin of 1.5rem on medium-sized screens and above</div>

<div class="d-flex gap-3">
    <div>Item 1</div>
    <div>Item 2</div>
    <div>Item 3</div>
</div>

<div class="d-flex gap-md-4">
    <div>Item 1</div>
    <div>Item 2</div>
    <div>Item 3</div>
</div>

Display Utilities

Bootstrap has display utilities that let you control the display property of elements. These utilities let you show or hide elements, change their display type, or make them responsive based on screen size.

The display utilities in Bootstrap use the format .d-{value}, where {value} can be one of the following:

<div class="d-inline">This is an inline element</div>
<div class="d-block">This is a block-level element</div>
<div class="d-flex">This is a flex container</div>

Bootstrap also has responsive display utilities that let you change the display property based on the screen size. These utilities use the format .d-{breakpoint}-{value}, where {breakpoint} is the screen size (e.g., sm, md, lg, xl) and {value} is the display value.

<div class="d-none d-md-block">This element is hidden on small screens and displayed as a block on medium screens and above</div>

By using display utilities, you can control the visibility and layout of elements in your web pages. These utilities give you a quick and flexible way to manage the display properties of elements across different screen sizes.

Flex Utilities

Bootstrap has flex utilities that let you create flexible layouts. These utilities help you control the layout of flex containers and their items, making it simple to build responsive and dynamic designs.

To use flex utilities, add the d-flex class to a container element to make it a flex container. Then, you can apply flex utility classes to the container or its child elements to control their behavior.

<div class="d-flex">
    <div>Flex item 1</div>
    <div>Flex item 2</div>
    <div>Flex item 3</div>
</div>

Bootstrap also has responsive flex utilities, which let you apply flex properties based on the screen size. To use responsive flex utilities, add a breakpoint (e.g., sm, md, lg, xl) to the class name.

<div class="d-flex flex-column flex-md-row">
    <div>Flex item 1</div>
    <div>Flex item 2</div>
    <div>Flex item 3</div>
</div>

Flex direction utilities let you control the main axis of a flex container. Use .flex-row for a horizontal direction (default) or .flex-column for a vertical direction.

Flex wrap utilities determine whether flex items wrap onto multiple lines. Use .flex-nowrap to keep items on a single line (default) or .flex-wrap to allow items to wrap.

Align items utilities control the alignment of flex items along the cross axis. Use .align-items-start, .align-items-center, .align-items-end, .align-items-baseline, or .align-items-stretch (default).

Align self utilities allow individual flex items to override the alignment set by the container. Use .align-self-start, .align-self-center, .align-self-end, .align-self-baseline, or .align-self-stretch on a flex item.

Flex fill utilities make a flex item grow to fill the available space in its container. Add the .flex-fill class to a flex item to make it grow and fill the remaining space.

Flex grow and shrink utilities control how flex items grow or shrink relative to other items. Use .flex-grow-0 or .flex-grow-1 to set the grow factor, and .flex-shrink-0 or .flex-shrink-1 to set the shrink factor.

<div class="d-flex">
    <div class="flex-grow-1">This item will grow</div>
    <div class="flex-shrink-0">This item won't shrink</div>
</div>

By using flex utilities in Bootstrap, you can create flexible and responsive layouts without writing custom CSS. These utilities give you a powerful way to control the layout of your web pages.

Text Utilities

Bootstrap has text utilities that let you control the alignment, wrapping, transformation, and appearance of text in your web pages. These utilities give you a quick and easy way to style text without writing custom CSS.

Text alignment utilities let you align text to the left, right, center, or justify. Use .text-start for left-aligned text, .text-end for right-aligned text, .text-center for centered text, or .text-justify for justified text.

<p class="text-start">Left-aligned text</p>
<p class="text-end">Right-aligned text</p>
<p class="text-center">Centered text</p>
<p class="text-justify">Justified text stretches to fill the full width of the container, creating even left and right edges. This can result in irregular spacing between words, especially in narrow containers.</p>

Text wrapping and overflow utilities control how text behaves when it reaches the edge of its container. Use .text-wrap to allow text to wrap onto multiple lines or .text-nowrap to prevent text from wrapping. The .text-overflow class adds an ellipsis (...) to the end of overflowing text.

Word break utilities determine how words break when they reach the end of a line. Use .text-break to allow long words to break and wrap onto the next line.

Text transform utilities let you change the capitalization of text. Use .text-lowercase for all lowercase text, .text-uppercase for all uppercase text, or .text-capitalize to capitalize the first letter of each word.

Font size utilities control the size of text. Use classes like .fs-1 (largest) to .fs-6 (smallest) to set the font size.

Font weight utilities set the boldness of text. Use .fw-bold for bold text, .fw-normal for normal text, or .fw-light for light text.

Line height utilities control the spacing between lines of text. Use classes like .lh-1 (compact), .lh-sm, .lh-base, or .lh-lg (expanded) to set the line height.

Monospace text utilities apply a monospace font to text. Use the .font-monospace class to display text in a monospace font.

Text decoration utilities let you add or remove underlines from text. Use .text-decoration-underline to add an underline or .text-decoration-none to remove an underline.

Bootstrap also has responsive text utilities that let you change text styles based on the screen size. Add a breakpoint (e.g., sm, md, lg, xl) to the class name to apply the style at specific screen sizes.

<p class="text-center text-md-start">This text is centered on small screens and left-aligned on medium screens and above.</p>

Vertical Alignment Utilities

Bootstrap has vertical alignment utilities that let you control the vertical alignment of inline, inline-block, inline-table, and table cell elements. These utilities make it easy to align elements vertically without writing custom CSS.

To use vertical alignment utilities, add one of the following classes to an element:

<div>
    <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>

Vertical alignment utilities are commonly used to align images, icons, or text next to each other. They can also be used to align form elements or create vertically centered layouts.

<div>
    <img src="example.jpg" alt="Example" class="align-middle">
    <span class="align-middle">This text is vertically aligned with the middle of the image.</span>
</div>

Visibility Utilities

Bootstrap has visibility utilities that let you control the visibility of elements on your web page. These utilities allow you to show or hide elements based on screen size or device type.

To use visibility utilities, add one of the following classes to an element:

<div class="visible">This element is visible.</div>
<div class="invisible">This element is hidden but still takes up space.</div>

The .invisible class only hides the element visually but keeps it in the document flow. This means that the element will still take up space in the layout, and other elements will be positioned as if the hidden element were visible.

Bootstrap also has responsive visibility utilities that let you show or hide elements based on the screen size. These utilities use the format .d-{breakpoint}-{value}, where {breakpoint} is the screen size (e.g., sm, md, lg, xl) and {value} is either none or block.

<div class="d-none d-md-block">This element is hidden on small screens and visible on medium screens and above.</div>
<div class="d-block d-lg-none">This element is visible on small and medium screens but hidden on large screens and above.</div>

By using responsive visibility utilities, you can create layouts that adapt to different screen sizes and show or hide content accordingly. This is useful when you want to optimize your web page for different devices or display different content based on the available screen space.

Position Utilities

Bootstrap has position utilities that let you control the positioning of elements on your web page. These utilities let you set the position property of an element and adjust its placement relative to its container or other elements.

Bootstrap supports the following position values:

<div class="position-relative">
    <div class="position-absolute top-0 start-0">This element is positioned at the top-left corner of its parent.</div>
</div>

Bootstrap also has responsive position utilities that let you change the position of an element based on the screen size. These utilities use the format .position-{breakpoint}-{value}, where {breakpoint} is the screen size (e.g., sm, md, lg, xl) and {value} is one of the position values mentioned above.

<div class="position-relative">
    <div class="position-sm-static position-md-absolute top-0 start-0">This element's position changes based on the screen size.</div>
</div>

In addition to setting the position, you can use utility classes to arrange elements within a positioned container. Bootstrap has the following classes for arranging elements:

<div class="position-relative">
    <div class="position-absolute top-50 start-50 translate-middle">This element is centered vertically and horizontally.</div>
</div>

By using position utilities in Bootstrap, you can control the placement and arrangement of elements on your web page. These utilities give you the flexibility to create complex layouts and position elements precisely where you need them.

Sizing Utilities

Bootstrap has sizing utilities that let you set the width and height of elements. These utilities help you control the size of elements without writing custom CSS.

Width utilities let you set the width of an element using predefined classes. Bootstrap has classes for setting the width in percentages, from 25% to 100%, in 25% increments. The classes use the format .w-{percentage}, where {percentage} is one of these values: 25, 50, 75, or 100.

<div class="w-25 bg-primary">25% width</div>
<div class="w-50 bg-secondary">50% width</div>
<div class="w-75 bg-success">75% width</div>
<div class="w-100 bg-danger">100% width</div>

Bootstrap also has utility classes for setting the width to auto (.w-auto) or to the width of the viewport (.w-100vw).

Height utilities work like width utilities but control the height of an element. Bootstrap has classes for setting the height in percentages, from 25% to 100%, in 25% increments. The classes use the format .h-{percentage}, where {percentage} is one of these values: 25, 50, 75, or 100.

<div class="h-25 bg-primary">25% height</div>
<div class="h-50 bg-secondary">50% height</div>
<div class="h-75 bg-success">75% height</div>
<div class="h-100 bg-danger">100% height</div>

Bootstrap also has the .h-auto class for setting the height to auto and the .h-100vh class for setting the height to the height of the viewport.

Responsive sizing utilities let you change the width or height of an element based on the screen size. These utilities use the format .{property}-{breakpoint}-{size}, where {property} is either w (width) or h (height), {breakpoint} is the screen size (e.g., sm, md, lg, xl), and {size} is one of the size values mentioned above.

<div class="w-100 w-md-50 w-lg-25 bg-primary">This element's width changes based on the screen size.</div>
<div class="h-100 h-sm-75 h-xl-50 bg-secondary">This element's height changes based on the screen size.</div>

By using sizing utilities in Bootstrap, you can quickly set the width and height of elements without writing custom CSS. These utilities give you a flexible way to control the size of elements across different screen sizes.

Border Utilities

Bootstrap has border utilities that let you add or remove borders on elements. These utilities help you control the appearance of borders without writing custom CSS.

The basic border utility is the .border class, which adds a border to an element. By default, the border is a solid, 1px wide line in the $border-color (usually gray).

<div class="border p-3">This element has a border.</div>

You can also add borders to specific sides of an element using the .border-{side} classes, where {side} is one of these values: top, end, bottom, or start (left in left-to-right languages, right in right-to-left languages).

<div class="border-top p-3">This element has a top border.</div>
<div class="border-end p-3">This element has an end border.</div>
<div class="border-bottom p-3">This element has a bottom border.</div>
<div class="border-start p-3">This element has a start border.</div>

Bootstrap has border color utilities that let you change the color of borders. The classes use the format .border-{color}, where {color} is one of Bootstrap's theme colors (e.g., primary, secondary, success, danger, warning, info, light, dark).

<div class="border border-primary p-3">Primary color border</div>
<div class="border border-secondary p-3">Secondary color border</div>
<div class="border border-success p-3">Success color border</div>
<div class="border border-danger p-3">Danger color border</div>

Border width utilities let you change the width of borders. The classes use the format .border-{width}, where {width} is a number from 0 to 5, representing the border width in pixels.

<div class="border border-1 p-3">1px border</div>
<div class="border border-3 p-3">3px border</div>
<div class="border border-5 p-3">5px border</div>

Bootstrap has border radius utilities that let you round the corners of elements. The classes use the format .rounded-{size}, where {size} is one of these values: 0 (no rounding), 1 (slightly rounded), 2 (more rounded), 3 (even more rounded), circle (fully circular), or pill (pill-shaped).

<div class="border rounded-0 p-3">No rounding</div>
<div class="border rounded-1 p-3">Slightly rounded</div>
<div class="border rounded-3 p-3">More rounded</div>
<div class="border rounded-circle p-3">Circular</div>
<div class="border rounded-pill p-3">Pill-shaped</div>

Bootstrap also has responsive border utilities that let you add or remove borders based on the screen size. These utilities use the format .border-{breakpoint}-{value}, where {breakpoint} is the screen size (e.g., sm, md, lg, xl) and {value} is either 0 (no border) or 1 (border).

<div class="border border-md-0 p-3">This element has a border on small screens but no border on medium screens and above.</div>

By using border utilities in Bootstrap, you can add, style, and control borders on elements. These utilities give you a way to change the appearance of borders across different screen sizes without writing custom CSS.

Color and Background Utilities

Bootstrap provides utilities for controlling the color and background of elements. These utilities let you change the appearance of text and backgrounds without writing custom CSS.

Text color utilities let you set the color of text elements. The classes use the format .text-{color}, where {color} is one of Bootstrap's theme colors:

<p class="text-primary">Primary color text</p>
<p class="text-secondary">Secondary color text</p>
<p class="text-success">Success color text</p>
<p class="text-danger">Danger color text</p>
<p class="text-warning">Warning color text</p>
<p class="text-info">Info color text</p>
<p class="text-light bg-dark">Light color text</p>
<p class="text-dark">Dark color text</p>
<p class="text-body">Body color text</p>
<p class="text-muted">Muted color text</p>
<p class="text-white bg-dark">White color text</p>
<p class="text-black-50">Black 50% opacity text</p>
<p class="text-white-50 bg-dark">White 50% opacity text</p>

Background color utilities let you set the background color of elements. The classes use the format .bg-{color}, where {color} is one of Bootstrap's theme colors (same as text colors).

<div class="bg-primary text-white p-3">Primary color background</div>
<div class="bg-secondary text-white p-3">Secondary color background</div>
<div class="bg-success text-white p-3">Success color background</div>
<div class="bg-danger text-white p-3">Danger color background</div>
<div class="bg-warning text-dark p-3">Warning color background</div>
<div class="bg-info text-white p-3">Info color background</div>
<div class="bg-light text-dark p-3">Light color background</div>
<div class="bg-dark text-white p-3">Dark color background</div>
<div class="bg-white text-dark p-3">White color background</div>
<div class="bg-transparent p-3">Transparent background</div>

Bootstrap also has gradient utilities that let you add linear gradients to the background of elements. The classes use the format .bg-gradient-{direction}, where {direction} is either x (left to right) or y (top to bottom). Use gradient utilities together with background color utilities.

<div class="bg-primary bg-gradient text-white p-3">Primary color gradient</div>
<div class="bg-secondary bg-gradient text-white p-3">Secondary color gradient</div>
<div class="bg-success bg-gradient text-white p-3">Success color gradient</div>
<div class="bg-danger bg-gradient text-white p-3">Danger color gradient</div>
<div class="bg-warning bg-gradient text-dark p-3">Warning color gradient</div>
<div class="bg-info bg-gradient text-white p-3">Info color gradient</div>
<div class="bg-light bg-gradient text-dark p-3">Light color gradient</div>
<div class="bg-dark bg-gradient text-white p-3">Dark color gradient</div>

Opacity Utilities

Bootstrap has opacity utilities that let you control the transparency of elements. These utilities let you set the opacity of an element without writing custom CSS.

To use opacity utilities, add the .opacity-{value} class to an element, where {value} is a number between 0 and 100, in increments of 25. The number is the opacity percentage, with 0 being fully transparent and 100 being fully opaque.

<div class="opacity-100 p-3 bg-primary text-light">100% opacity</div>
<div class="opacity-75 p-3 bg-primary text-light">75% opacity</div>
<div class="opacity-50 p-3 bg-primary text-light">50% opacity</div>
<div class="opacity-25 p-3 bg-primary text-light">25% opacity</div>

Opacity utilities are useful when you want to create overlays, faded backgrounds, or elements that blend with the content behind them. They can also be used to create hover effects or to show disabled state of elements.

<div class="opacity-50 hover-opacity-100 p-3 bg-success text-light">Hover over me</div>

By using opacity utilities in Bootstrap, you can control the transparency of elements without the need for custom CSS. These utilities give you a quick way to create visually appealing effects and improve the user experience of your web pages.

Overflow Utilities

Bootstrap has overflow utilities that let you control how content behaves when it overflows its container. These utilities help you manage content that is too large to fit within its designated area.

To use overflow utilities, add one of the following classes to an element:

<div class="overflow-auto" style="height: 100px;">
    <p>This is a long paragraph that will cause the content to overflow. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce auctor eros eget velit bibendum, at malesuada sapien eleifend. Nulla facilisi. Donec euismod nibh vel metus malesuada, vel tincidunt velit tincidunt.</p>
</div>

In this example, the .overflow-auto class is applied to a <div> element with a fixed height. When the content inside the <div> overflows the specified height, scrollbars will appear, allowing you to scroll and view the remaining content.

<div class="overflow-hidden" style="height: 100px;">
    <p>This is a long paragraph that will cause the content to overflow. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce auctor eros eget velit bibendum, at malesuada sapien eleifend. Nulla facilisi. Donec euismod nibh vel metus malesuada, vel tincidunt velit tincidunt.</p>
</div>

In this case, the .overflow-hidden class is used to clip the overflowing content. Any content that exceeds the specified height of the <div> will be hidden from view, and no scrollbars will be provided.

Overflow utilities can be applied to any block-level element, such as <div>, <section>, or <main>. They are commonly used when working with fixed-height containers, like sidebars, card components, or dialog boxes, to control how the content behaves when it exceeds the available space.

Shadow Utilities

Bootstrap has shadow utilities that let you add shadows to elements, creating a sense of depth and visual hierarchy. These utilities help you apply shadows without writing custom CSS.

To use shadow utilities, add one of the following classes to an element:

<div class="shadow-none p-3 mb-5 bg-light rounded">No shadow</div>
<div class="shadow-sm p-3 mb-5 bg-white rounded">Small shadow</div>
<div class="shadow p-3 mb-5 bg-white rounded">Regular shadow</div>
<div class="shadow-lg p-3 mb-5 bg-white rounded">Larger shadow</div>

Shadow utilities are useful for creating a visual hierarchy, drawing attention to important elements, or adding a sense of depth to your design. They can be applied to various elements, such as cards, buttons, or sections, to make them stand out from the background.

<div class="card shadow-sm">
  <div class="card-body">
    <h5 class="card-title">Card with small shadow</h5>
    <p class="card-text">This is a card component with a small shadow applied using the .shadow-sm class.</p>
  </div>
</div>