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.

Margin and Padding

Bootstrap has classes for setting margin and padding on elements. The classes use a naming convention of m-* for margin and p-* for padding, where * is a size value from 0 to 5. For example, m-3 applies a margin of 1rem (16px) on all sides of an element, while p-2 applies a padding of 0.5rem (8px).

You can also set the sides on which to apply the margin or padding by adding a direction to the class name. The available directions are:

Direction Description
t top
b bottom
l left
r right
x left and right
y top and bottom

Example of margin and padding direction

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

Bootstrap also has responsive margin and padding utilities. By adding a breakpoint (e.g., sm, md, lg, xl) to the class name, you can apply spacing at specific screen sizes.

Responsive margin utility example

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

Gaps

Gap utilities in Bootstrap help you control the spacing between grid columns or flexbox items. The gap-* classes let you set consistent gaps between elements.

To use gap utilities, add the gap-* class to the parent container of the elements you want to space out. The * represents a size value from 0 to 5.

Example of gap utility

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

You can also use responsive gap utilities by adding a breakpoint to the class name.

Responsive gap utility example

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

By using spacing utilities in Bootstrap, you can quickly and easily control the margin, padding, and gaps between elements in your layouts. These utilities give you a consistent and responsive way to manage spacing across your web pages.

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:

Value Description
none Hides the element
inline Displays the element inline
inline-block Displays the element as an inline-level block container
block Displays the element as a block-level element
table Displays the element as a table element
table-cell Displays the element as a table cell element
table-row Displays the element as a table row element
flex Displays the element as a block-level flex container
inline-flex Displays the element as an inline-level flex container

Example of display utilities

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

Responsive display utility example

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

Example: Basic Flex Container

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

Example: Responsive Flex Utilities

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

Example: Flex Grow and Shrink

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

Example: Text Alignment

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

Example: Responsive Text Utilities

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

Class Description
.align-baseline Aligns the baseline of the element with the baseline of its parent
.align-top Aligns the top of the element with the top of the tallest element on the line
.align-middle Aligns the middle of the element with the middle of the parent element
.align-bottom Aligns the bottom of the element with the bottom of the lowest element on the line
.align-text-top Aligns the top of the element with the top of the parent element's font
.align-text-bottom Aligns the bottom of the element with the bottom of the parent element's font

Example of vertical alignment classes in a div

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

Example of vertical alignment with an image

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

Class Description
.visible Makes an element visible
.invisible Hides an element but still takes up space in the layout

Example: Visibility and Invisibility Classes

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

Example: Responsive Visibility Utilities

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

Class Description
.position-static Positions an element according to the normal flow of the document (default)
.position-relative Positions an element relative to its normal position
.position-absolute Positions an element relative to its closest positioned ancestor or the initial containing block if no positioned ancestor exists
.position-fixed Positions an element relative to the browser window
.position-sticky Positions an element based on the user's scroll position

Example: Position Utility Classes

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

Example: Responsive Position Utilities

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

Class Description
.top-* Positions an element at the top of its container, where * is a value between 0 and 100 representing a percentage
.bottom-* Positions an element at the bottom of its container
.start-* Positions an element at the left side of its container (in left-to-right languages)
.end-* Positions an element at the right side of its container (in left-to-right languages)
.translate-middle Centers an element vertically and horizontally within its container

Example: Arranging Elements with Position Utilities

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

Example: Width Utilities

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

Example: Height Utilities

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

Example: Responsive Sizing Utilities

<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).

Example: Add a basic border

<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).

Example: Add border to specific sides

<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).

Example: Change border color

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

Example: Change border width

<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).

Example: Add border radius

<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).

Example: Add responsive 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:

Color Class
Primary .text-primary
Secondary .text-secondary
Success .text-success
Danger .text-danger
Warning .text-warning
Info .text-info
Light .text-light
Dark .text-dark
Body .text-body
Muted .text-muted
White .text-white
Black 50% .text-black-50
White 50% .text-white-50

Text Color Example

<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).

Background Color Example

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

Background Gradient Example

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

Example: Opacity Classes

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

Example: Hover Effect

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

Class Description
.overflow-auto Adds scrollbars to the element when the content overflows
.overflow-hidden Clips the content when it overflows, hiding the extra content
.overflow-visible Lets the content overflow the element's box (default behavior)
.overflow-scroll Always adds scrollbars to the element, even if content fits

Example of overflow-auto class

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

Example of overflow-hidden class

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

Class Description
.shadow-none Removes any existing shadows from an element
.shadow-sm Adds a small shadow to an element
.shadow Adds a medium-sized shadow to an element
.shadow-lg Adds a large shadow to an element

Example: Applying Shadow Utilities

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

Example: Card with Small Shadow

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