Author: saqibkhan

Flex

This chapter discusses about the flex utilities. The .flex utility classes are helpful in quickly managing the layout, alignment and sizing of grid columns, navigation, components and much more.

Enable flex behaviors

Utilize display utilities to establish a flexbox container and convert immediate child elements into flex items, allowing for further customization of flex containers and items through additional flex properties.

Let us see an example for a flex container and an inline flex container:https://www.tutorialspoint.com/bootstrap/examples/flex_utility.php

Example

You can edit and try running this code using the Edit & Run option.

<!DOCTYPE html><html lang="en"><head><title>Bootstrap Flex</title><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script></head><body><div class="container mt-3"><h4>Flex utilities</h4><div class="d-flex p-4 bg-info">A simple flexbox container!</div><div class="d-inline-flex p-4 bg-warning">An inline flexbox container!</div></body></html>

Variations that adapt to different screen sizes are also available for the classes .d-flex and .d-inline-flex.

.d-flex
.d-inline-flex
.d-sm-flex
.d-sm-inline-flex
.d-md-flex
.d-md-inline-flex
.d-lg-flex
.d-lg-inline-flex
.d-xl-flex
.d-xl-inline-flex
.d-xxl-flex
.d-xxl-inline-flex

Direction

Using the direction utilities, you can set the direction of flex items in a flex container. Following are the direction utilities provided by Bootstrap:

.flex-row – to set a horizontal direction, which is also the browser default.
.flex-row-reverse – to start the horizontal direction from the opposite side.
.flex-column – to set a vertical direction.
.flex-column-reverse – to start the vertical direction from the opposite side.

Let us see an example for the direction utility classes:https://www.tutorialspoint.com/bootstrap/examples/flex_direction_utility.php

Example

You can edit and try running this code using the Edit & Run option.

<!DOCTYPE html><html lang="en"><head><title>Bootstrap Flex</title><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script></head><body><div class="container mt-3"><h4>Flex utilities - direction (row & column)</h4><div class="d-flex flex-row mb-4 bg-info border border-dark"><div class="p-3 border border-dark">Row One</div><div class="p-3 border border-dark">Row Two</div><div class="p-3 border border-dark">Row Three</div></div><div class="d-flex flex-row-reverse bg-warning border border-success"><div class="p-3 border border-success">Row Four</div><div class="p-3 border border-success">Row Five</div><div class="p-3 border border-success">Row Six</div></div><div class="d-flex flex-column mb-3 bg-danger-subtle bg-gradient border border-dark"><div class="p-3 border border-dark">Column One</div><div class="p-3 border border-dark">Column Two</div><div class="p-3 border border-dark">Column Three</div></div><div class="d-flex flex-column-reverse bg-light border border-dark"><div class="p-3 border border-dark">Column Four</div><div class="p-3 border border-dark">Column Five</div><div class="p-3 border border-dark">Column Six</div></div></body></html>

Variations that adapt to different screen sizes are also available for the class .flex-direction:

.flex-row
.flex-row-reverse
.flex-column
.flex-column-reverse
.flex-sm-row
.flex-sm-row-reverse
.flex-sm-column
.flex-sm-column-reverse
.flex-md-row
.flex-md-row-reverse
.flex-md-column
.flex-md-column-reverse
.flex-lg-row
.flex-lg-row-reverse
.flex-lg-column
.flex-lg-column-reverse
.flex-xl-row
.flex-xl-row-reverse
.flex-xl-column
.flex-xl-column-reverse
.flex-xxl-row
.flex-xxl-row-reverse
.flex-xxl-column
.flex-xxl-column-reverse

Justify content

The .justify-content utility classes are used to change the alignment of flex items on the main axis, i.e. x -axis to start, and y-axis in case of flex-direction: column.

The different options available are:

start
end
center
between
around
evenly

Let us see an example for the justify content classes:https://www.tutorialspoint.com/bootstrap/examples/flex_justify_content.php

Example

You can edit and try running this code using the Edit & Run option.

<!DOCTYPE html><html lang="en"><head><title>Bootstrap Flex</title><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script></head><body><div class="container mt-3"><h4>Flex utilities - Justify content</h4><div class="d-flex justify-content-start mb-4 bg-info border border-dark"><div class="p-3 border border-dark">Row One</div><div class="p-3 border border-dark">Row Two</div><div class="p-3 border border-dark">Row Three</div></div><div class="d-flex justify-content-end mb-4 bg-warning border border-success"><div class="p-3 border border-success">Row Four</div><div class="p-3 border border-success">Row Five</div><div class="p-3 border border-success">Row Six</div></div><div class="d-flex justify-content-center mb-4 bg-danger-subtle bg-gradient border border-dark"><div class="p-3 border border-dark">Column One</div><div class="p-3 border border-dark">Column Two</div><div class="p-3 border border-dark">Column Three</div></div><div class="d-flex justify-content-between mb-4 bg-light border border-dark"><div class="p-3 border border-dark">Column Four</div><div class="p-3 border border-dark">Column Five</div><div class="p-3 border border-dark">Column Six</div></div><div class="d-flex justify-content-around mb-4 bg-success-subtle bg-gradient border border-dark"><div class="p-3 border border-dark">Column Four</div><div class="p-3 border border-dark">Column Five</div><div class="p-3 border border-dark">Column Six</div></div><div class="d-flex justify-content-evenly mb-4 bg-primary-subtle bg-gradient border border-dark"><div class="p-3 border border-dark">Column Four</div><div class="p-3 border border-dark">Column Five</div><div class="p-3 border border-dark">Column Six</div></div></div></body></html>

Variations that adapt to different screen sizes are also available for the class .justify-content:

.justify-content-start
.justify-content-end
.justify-content-center
.justify-content-between
.justify-content-around
.justify-content-evenly
.justify-content-sm-start
.justify-content-sm-end
.justify-content-sm-center
.justify-content-sm-between
.justify-content-sm-around
.justify-content-sm-evenly
.justify-content-md-start
.justify-content-md-end
.justify-content-md-center
.justify-content-md-between
.justify-content-md-around
.justify-content-md-evenly
.justify-content-lg-start
.justify-content-lg-end
.justify-content-lg-center
.justify-content-lg-between
.justify-content-lg-around
.justify-content-lg-evenly
.justify-content-xl-start
.justify-content-xl-end
.justify-content-xl-center
.justify-content-xl-between
.justify-content-xl-around
.justify-content-xl-evenly
.justify-content-xxl-start
.justify-content-xxl-end
.justify-content-xxl-center
.justify-content-xxl-between
.justify-content-xxl-around
.justify-content-xxl-evenly

Align items

In order to change the alignment of flex items of a flexbox container, use the utility class align-items.

The options available in Bootstrap are as follows:

start
end
center
baseline
stretch (browser default)

Let us see an example for the align items utility class:https://www.tutorialspoint.com/bootstrap/examples/flex_align_items.php

Example

You can edit and try running this code using the Edit & Run option.

<!DOCTYPE html><html lang="en"><head><title>Bootstrap Flex</title><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script></head><body><div class="container mt-3"><h4>Flex utilities - align items</h4><div class="d-flex align-items-start flex-row border bg-light mb-4" style="height:150px;"><div class="border border-dark p-2 text-bg-success">
        Item 1
    &lt;/div&gt;&lt;div class="border border-dark p-2 text-bg-primary"&gt;
        Item 2
    &lt;/div&gt;&lt;div class="border border-dark p-2 text-bg-danger"&gt;
        Item 3
    &lt;/div&gt;&lt;/div&gt;&lt;div class="d-flex align-items-end flex-row border bg-light" style="height:150px;"&gt;&lt;div class="border border-dark p-2 bg-info-subtle"&gt;
        Item 1
    &lt;/div&gt;&lt;div class="border border-dark p-2 bg-secondary-subtle"&gt;
        Item 2
    &lt;/div&gt;&lt;div class="border border-dark p-2 bg-warning-subtle"&gt;
        Item 3
    &lt;/div&gt;&lt;/div&gt;&lt;div class="d-flex align-items-center flex-row border bg-light" style="height:150px;"&gt;&lt;div class="border border-dark p-2 text-bg-info"&gt;
        Item 1
    &lt;/div&gt;&lt;div class="border border-dark p-2 text-bg-secondary"&gt;
        Item 2
    &lt;/div&gt;&lt;div class="border border-dark p-2 text-bg-warning"&gt;
        Item 3
&lt;/div&gt;&lt;/div&gt;&lt;/body&gt;&lt;/html&gt;</pre>


Variations that adapt to different screen sizes are also available for the class .align-items:




.align-items-start



.align-items-end



.align-items-center



.align-items-baseline



.align-items-stretch



.align-items-sm-start



.align-items-sm-end



.align-items-sm-center



.align-items-sm-baseline



.align-items-sm-stretch



.align-items-md-start



.align-items-md-end



.align-items-md-center



.align-items-md-baseline



.align-items-md-stretch



.align-items-lg-start



.align-items-lg-end



.align-items-lg-center



.align-items-lg-baseline



.align-items-lg-stretch



.align-items-xl-start



.align-items-xl-end



.align-items-xl-center



.align-items-xl-baseline



.align-items-xl-stretch



.align-items-xxl-start



.align-items-xxl-end



.align-items-xxl-center



.align-items-xxl-baseline



.align-items-xxl-stretch




Align self



In order to change the alignment of an individual flexbox item in a container, use the utility class align-self. The options available for this utility class are as follows:




start



end



center



baseline



stretch (browser default)




Let us see an example for the align items utility class:https://www.tutorialspoint.com/bootstrap/examples/flex_align_self.php



Example



You can edit and try running this code using the Edit & Run option.



<!DOCTYPE html><html lang="en"><head><title>Bootstrap Flex</title><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script></head><body><div class="container mt-5"><h4>Flex utilities - align self</h4><div class="d-flex flex-row border bg-light mb-4" style="height:150px;"><div class="border border-dark p-2 text-bg-success">
        Item 1
    &lt;/div&gt;&lt;div class="align-self-start border border-dark p-2 text-bg-primary"&gt;
        align start
    &lt;/div&gt;&lt;div class="border border-dark p-2 text-bg-danger"&gt;
        Item 3
    &lt;/div&gt;&lt;/div&gt;&lt;div class="d-flex flex-row border bg-light" style="height:150px;"&gt;&lt;div class="border border-dark p-2 bg-info-subtle"&gt;
        Item 1
    &lt;/div&gt;&lt;div class="align-self-end border border-dark p-2 bg-secondary-subtle"&gt;
        align end
    &lt;/div&gt;&lt;div class="border border-dark p-2 bg-warning-subtle"&gt;
        Item 3
    &lt;/div&gt;&lt;/div&gt;&lt;div class="d-flex flex-row border bg-light" style="height:150px;"&gt;&lt;div class="align-self-center border border-dark p-2 text-bg-info"&gt;
        align center
    &lt;/div&gt;&lt;div class="border border-dark p-2 text-bg-secondary"&gt;
        Item 2
    &lt;/div&gt;&lt;div class="border border-dark p-2 text-bg-warning"&gt;
        Item 3
    &lt;/div&gt;&lt;/div&gt;&lt;div class="d-flex flex-row border bg-light" style="height:150px;"&gt;&lt;div class="border border-dark p-2 bg-info-subtle"&gt;
        Item 1
    &lt;/div&gt;&lt;div class="align-self-baseline border border-dark p-2 bg-secondary-subtle"&gt;
        align baseline
    &lt;/div&gt;&lt;div class="border border-dark p-2 bg-warning-subtle"&gt;
        Item 3
    &lt;/div&gt;&lt;/div&gt;&lt;div class="d-flex flex-row border bg-light mb-4" style="height:150px;"&gt;&lt;div class="border border-dark p-2 text-bg-success"&gt;
        Item 1
    &lt;/div&gt;&lt;div class="border border-dark p-2 text-bg-primary"&gt;
        Item 2
    &lt;/div&gt;&lt;div class="align-self-stretch border border-dark p-2 text-bg-danger"&gt;
        align stretch
    &lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/body&gt;&lt;/html&gt;</pre>


Variations that adapt to different screen sizes are also available for the class .align-self:




.align-self-start



.align-self-end



.align-self-center



.align-self-baseline



.align-self-stretch



.align-self-sm-start



.align-self-sm-end



.align-self-sm-center



.align-self-sm-baseline



.align-self-sm-stretch



.align-self-md-start



.align-self-md-end



.align-self-md-center



.align-self-md-baseline



.align-self-md-stretch



.align-self-lg-start



.align-self-lg-end



.align-self-lg-center



.align-self-lg-baseline



.align-self-lg-stretch



.align-self-xl-start



.align-self-xl-end



.align-self-xl-center



.align-self-xl-baseline



.align-self-xl-stretch



.align-self-xxl-start



.align-self-xxl-end



.align-self-xxl-center



.align-self-xxl-baseline



.align-self-xxl-stretch




Fill



When applying the .flex-fill class to a group of sibling elements, they will automatically adjust their widths to match their content (or have equal widths if their content does not exceed their border-boxes), effectively utilizing all the horizontal space available.



Let us see an example for the .flex-fill class:https://www.tutorialspoint.com/bootstrap/examples/flex_fill.php



Example



You can edit and try running this code using the Edit & Run option.



<!DOCTYPE html><html lang="en"><head><title>Bootstrap Flex</title><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script></head><body><div class="container mt-5"><h4>Flex utilities - flex-fill</h4><div class="d-flex border border-dark bg-danger-subtle"><div class="p-2 border border-dark flex-fill">Flex item showing a longer string of text.</div><div class="p-2 border border-dark flex-fill">Item</div><div class="p-2 border border-dark flex-fill">Flex Item 3</div></div></div></body></html>



Variations that adapt to different screen sizes are also available for the class .flex-fill:




.flex-fill



.flex-sm-fill



.flex-md-fill



.flex-lg-fill



.flex-xl-fill



.flex-xxl-fill




Grow



You can utilize the .flex-grow-* utility classes to control whether a flex item should expand to occupy the available space.



Let us see an example of .flex-grow class:https://www.tutorialspoint.com/bootstrap/examples/flex_grow.php



Example



You can edit and try running this code using the Edit & Run option.



<!DOCTYPE html><html lang="en"><head><title>Bootstrap Flex</title><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script></head><body><div class="container mt-3"><h4>Flex utilities - flex-grow</h4><div class="d-flex border border-dark bg-danger-subtle"><div class="p-2 border border-dark">Flex item</div><div class="p-2 flex-grow-1 border border-dark">Flex</div><div class="p-2 border border-dark">Third flex item</div></div></div></body></html>



Shrink



You can utilize the .flex-shrink-* utility classes to control whether a flex item should shrunk, if required.



Let us see an example of .flex-shrink class:https://www.tutorialspoint.com/bootstrap/examples/flex_shrink.php



Example



You can edit and try running this code using the Edit & Run option.



<!DOCTYPE html><html lang="en"><head><title>Bootstrap Flex</title><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script></head><body><div class="container mt-3"><h4>Flex utilities - flex-shrink</h4><div class="d-flex border border-dark bg-danger-subtle"><div class="p-2 border border-dark w-100">Flex item taking up all the space</div><div class="p-2 border border-dark flex-shrink-1">Flex item shrink</div></div></div></body></html>



Variations that adapt to different screen sizes are also available for the classes .flex-grow and .flex-shrink:




.flex-{grow|shrink}-0



.flex-{grow|shrink}-1



.flex-sm-{grow|shrink}-0



.flex-sm-{grow|shrink}-1



.flex-md-{grow|shrink}-0



.flex-md-{grow|shrink}-1



.flex-lg-{grow|shrink}-0



.flex-lg-{grow|shrink}-1



.flex-xl-{grow|shrink}-0



.flex-xl-{grow|shrink}-1



.flex-xxl-{grow|shrink}-0



.flex-xxl-{grow|shrink}-1




Auto margins



You can mix flex alignments with auto margins.



Following classes can be used with auto margins:




me-auto - pushes the flex items to extreme right.



ms-auto - pushes the flex items to extreme left.



No auto margin is default.




Let us see an example for auto margin classes:https://www.tutorialspoint.com/bootstrap/examples/flex_auto_margin.php



Example



You can edit and try running this code using the Edit & Run option.



<!DOCTYPE html><html lang="en"><head><title>Bootstrap Flex</title><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script></head><body><div class="container mt-3"><h4>Flex utilities - auto margin</h4><div class="d-flex mb-3 bg-primary-subtle"><div class="p-2 border border-dark">No margin</div><div class="p-2 border border-dark">No margin</div><div class="p-2 border border-dark">No margin</div></div><div class="d-flex mb-3 bg-warning-subtle"><div class="me-auto p-2 border border-dark">Right margin</div><div class="p-2 border border-dark">Right margin</div><div class="p-2 border border-dark">Right margin</div></div><div class="d-flex mb-3 bg-danger-subtle"><div class="p-2 border border-dark">Left margin</div><div class="p-2 border border-dark">Left margin</div><div class="ms-auto p-2 border border-dark">Left margin</div></div></div></body></html>



With align-items



To position a flex item at the top or bottom of a container, utilize align-items, flex-direction: column, and margin-top: auto or margin-bottom: auto in order to make vertical adjustments.



Let us see an example:https://www.tutorialspoint.com/bootstrap/examples/flex_with_align_items.php



Example



You can edit and try running this code using the Edit & Run option.



<!DOCTYPE html><html lang="en"><head><title>Bootstrap Flex</title><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script></head><body><div class="container mt-3"><h4>Flex utilities - with align items</h4><div class="d-flex align-items-start flex-column mb-3 text-bg-success border border-dark" style="height: 200px;"><div class="mb-auto p-2 border border-dark">Align to left</div><div class="p-2 border border-dark">Align to left</div><div class="p-2 border border-dark">Align to left</div></div><div class="d-flex align-items-end flex-column mb-3 text-bg-warning border border-dark" style="height: 200px;"><div class="p-2 border border-dark">Align to right</div><div class="p-2 border border-dark">Align to right</div><div class="mt-auto p-2 border border-dark">Align to right</div></div></div></body></html>



In the above example, mt-auto means margin-top: auto and mb-auto means margin-bottom: auto.



Wrap



The flex items of flex container can be wrapped. Following are the utility classes that can be used to wrap the flex items:




.flex-nowrap - for no wrapping at all (default).



.flex-wrap - for wrapping of flex items.



.flex-wrap-reverse - for reverse wrapping of flex items.




Let us see an example for .flex-nowrap class:https://www.tutorialspoint.com/bootstrap/examples/flex_nowrap.php



Example



You can edit and try running this code using the Edit & Run option.



<!DOCTYPE html><html lang="en"><head><title>Bootstrap Flex</title><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script></head><body><div class="container mt-5"><h4>Flex utilities - no wrap</h4><div class="d-flex flex-nowrap text-bg-success border border-dark"><div class="p-2 border border-dark">Flex Item 1</div><div class="p-2 border border-dark">Flex Item 2</div><div class="p-2 border border-dark">Flex Item 3</div><div class="p-2 border border-dark">Flex Item 4</div><div class="p-2 border border-dark">Flex Item 5</div><div class="p-2 border border-dark">Flex Item 6</div></div></div></body></html>



Let us see an example for .flex-wrap class:https://www.tutorialspoint.com/bootstrap/examples/flex_wrap.php



Example



You can edit and try running this code using the Edit & Run option.



<!DOCTYPE html><html lang="en"><head><title>Bootstrap Flex</title><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script></head><body><div class="container mt-5"><h4>Flex utilities - wrap items</h4><div class="d-flex flex-wrap text-bg-success border border-dark"><div class="p-2 border border-dark">Wrap Flex Item 1</div><div class="p-2 border border-dark">Wrap Flex Item 2</div><div class="p-2 border border-dark">Wrap Flex Item 3</div><div class="p-2 border border-dark">Wrap Flex Item 4</div><div class="p-2 border border-dark">Wrap Flex Item 5</div><div class="p-2 border border-dark">Wrap Flex Item 6</div><div class="p-2 border border-dark">Wrap Flex Item 7</div><div class="p-2 border border-dark">Wrap Flex Item 8</div><div class="p-2 border border-dark">Wrap Flex Item 9</div><div class="p-2 border border-dark">Wrap Flex Item 10</div><div class="p-2 border border-dark">Wrap Flex Item 11</div><div class="p-2 border border-dark">Wrap Flex Item 12</div></div></div></body></html>



Let us see an example for .flex-wrap-reverse class:https://www.tutorialspoint.com/bootstrap/examples/flex_wrap_reverse.php



Example



You can edit and try running this code using the Edit & Run option.



<!DOCTYPE html><html lang="en"><head><title>Bootstrap Flex</title><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script></head><body><div class="container mt-5"><h4>Flex utilities - wrap reverse items</h4><div class="d-flex flex-wrap-reverse text-bg-success border border-dark"><div class="p-2 border border-dark">Wrap reverse Item 1</div><div class="p-2 border border-dark">Wrap reverse Item 2</div><div class="p-2 border border-dark">Wrap reverse Item 3</div><div class="p-2 border border-dark">Wrap reverse Item 4</div><div class="p-2 border border-dark">Wrap reverse Item 5</div><div class="p-2 border border-dark">Wrap reverse Item 6</div><div class="p-2 border border-dark">Wrap reverse Item 7</div><div class="p-2 border border-dark">Wrap reverse Item 8</div><div class="p-2 border border-dark">Wrap reverse Item 9</div><div class="p-2 border border-dark">Wrap reverse Item 10</div><div class="p-2 border border-dark">Wrap reverse Item 11</div><div class="p-2 border border-dark">Wrap reverse Item 12</div></div></div></body></html>



Variations that adapt to different screen sizes are also available for the class .flex-wrap:




.flex-nowrap



.flex-wrap



.flex-wrap-reverse



.flex-sm-nowrap



.flex-sm-wrap



.flex-sm-wrap-reverse



.flex-md-nowrap



.flex-md-wrap



.flex-md-wrap-reverse



.flex-lg-nowrap



.flex-lg-wrap



.flex-lg-wrap-reverse



.flex-xl-nowrap



.flex-xl-wrap



.flex-xl-wrap-reverse



.flex-xxl-nowrap



.flex-xxl-wrap



.flex-xxl-wrap-reverse




Order



Using order utilities, you can change the visual order of specific flex items.




Option is available only to make an item first or last, and reset to utilize the DOM order.



order takes integer value starting from 0 to 5.




Let us see an example for the .order class:https://www.tutorialspoint.com/bootstrap/examples/flex_order.php



Example



You can edit and try running this code using the Edit & Run option.



<!DOCTYPE html><html lang="en"><head><title>Bootstrap Flex</title><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script></head><body><div class="container mt-5"><h4>Flex utilities - order change</h4><div class="d-flex flex-nowrap text-bg-danger border border-dark"><div class="order-4 p-3 border border-dark">Item one</div><div class="order-1 p-3 border border-dark">Item two</div><div class="order-2 p-3 border border-dark">Item three</div><div class="order-5 p-3 border border-dark">Item four</div><div class="order-3 p-3 border border-dark">Item five</div><div class="order-0 p-3 border border-dark">Item six</div></div></div></body></html>



Variations that adapt to different screen sizes are also available for the class .order:




.order-0



.order-1



.order-2



.order-3



.order-4



.order-5



.order-sm-0



.order-sm-1



.order-sm-2



.order-sm-3



.order-sm-4



.order-sm-5



.order-md-0



.order-md-1



.order-md-2



.order-md-3



.order-md-4



.order-md-5



.order-lg-0



.order-lg-1



.order-lg-2



.order-lg-3



.order-lg-4



.order-lg-5



.order-xl-0



.order-xl-1



.order-xl-2



.order-xl-3



.order-xl-4



.order-xl-5



.order-xxl-0



.order-xxl-1



.order-xxl-2



.order-xxl-3



.order-xxl-4



.order-xxl-5




In addition, there are also classes called .order-first and .order-last that are responsive and modify the sequence of an element by assigning it an order of -1 and 6, respectively.




.order-first



.order-last



.order-sm-first



.order-sm-last



.order-md-first



.order-md-last



.order-lg-first



.order-lg-last



.order-xl-first



.order-xl-last



.order-xxl-first



.order-xxl-last




Align content



In order to align flex items of a flexbox container together on the cross axis, use the utility .align-content. Following are the options available:




start (default)



end



center



between



around



stretch




We have enabled the flex-wrap: wrap property and added more flex items to showcase the functionality of these utilities.



Let us see an example for the .align-content-* classes:https://www.tutorialspoint.com/bootstrap/examples/flex_align_content.php



Example



You can edit and try running this code using the Edit & Run option.



<!DOCTYPE html><html lang="en"><head><title>Bootstrap Flex</title><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script></head><body><div class="container"><h4>Flex utilities - align content</h4><!--align-content-start--><div class="d-flex flex-column bd-highlight text-bg-info mb-3 flex-wrap align-content-start"><div class="border p-2 bd-highlight">
        Flex item 1 
    &lt;/div&gt;&lt;div class="border p-2 bd-highlight"&gt;
        Flex item 2 
    &lt;/div&gt;&lt;div class="border p-2 bd-highlight"&gt;
        Flex item 3 
    &lt;/div&gt;&lt;/div&gt;&lt;!--align-content-center--&gt;&lt;div class="d-flex flex-column bd-highlight text-bg-warning mb-3 flex-wrap align-content-center"&gt;&lt;div class="border p-2 bd-highlight"&gt;
        Flex item 1 
    &lt;/div&gt;&lt;div class="border p-2 bd-highlight"&gt;
        Flex item 2 
    &lt;/div&gt;&lt;div class="border p-2 bd-highlight"&gt;
        Flex item 3 
    &lt;/div&gt;&lt;/div&gt;&lt;!--align-content-end--&gt;&lt;div class="d-flex flex-column bd-highlight text-bg-danger mb-3 flex-wrap align-content-end"&gt;&lt;div class="border p-2 bd-highlight"&gt;
      Flex item 1 
  &lt;/div&gt;&lt;div class="border p-2 bd-highlight"&gt;
      Flex item 2 
  &lt;/div&gt;&lt;div class="border p-2 bd-highlight"&gt;
      Flex item 3 
  &lt;/div&gt;&lt;/div&gt;&lt;!--align-content-stretch--&gt;&lt;div class="d-flex flex-column bd-highlight text-bg-primary mb-3 flex-wrap align-content-stretch"&gt;&lt;div class="border p-2 bd-highlight"&gt;
    Flex item 1 
  &lt;/div&gt;&lt;div class="border p-2 bd-highlight"&gt;
    Flex item 2 
  &lt;/div&gt;&lt;div class="border p-2 bd-highlight"&gt;
    Flex item 3 
  &lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/body&gt;&lt;/html&gt;</pre>


Variations that adapt to different screen sizes are also available for the class .align-content:




.align-content-start



.align-content-end



.align-content-center



.align-content-between



.align-content-around



.align-content-stretch



.align-content-sm-start



.align-content-sm-end



.align-content-sm-center



.align-content-sm-between



.align-content-sm-around



.align-content-sm-stretch



.align-content-md-start



.align-content-md-end



.align-content-md-center



.align-content-md-between



.align-content-md-around



.align-content-md-stretch



.align-content-lg-start



.align-content-lg-end



.align-content-lg-center



.align-content-lg-between



.align-content-lg-around



.align-content-lg-stretch



.align-content-xl-start



.align-content-xl-end



.align-content-xl-center



.align-content-xl-between



.align-content-xl-around



.align-content-xl-stretch



.align-content-xxl-start



.align-content-xxl-end



.align-content-xxl-center



.align-content-xxl-between



.align-content-xxl-around



.align-content-xxl-stretch




Media object



You can recreate the media object component easily and quickly by using a few flex utilities that provide more flexibility and options than before.



Let us see an example:https://www.tutorialspoint.com/bootstrap/examples/flex_media_object.php



Example



You can edit and try running this code using the Edit & Run option.



<!DOCTYPE html><html lang="en"><head><title>Bootstrap Flex</title><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script></head><body><div class="container"><h4>Flex utilities - Media object</h4></div><div class="d-flex align-items-center border mx-4 w-50 mt-3"><div class="flex-md-shrink-0"><img src="https://i1.wp.com/simplesnippets.tech/wp-content/uploads/2018/07/tutorialspoint.jpg?resize=500%2C500&ssl=1"></div><div class="flex-md-grow-1">
  Content related to the image is placed at the center of the image, as we have used the class .align-items-center. The image is the logo of "Tutorials Point".
&lt;/div&gt;&lt;/div&gt;&lt;/body&gt;&lt;/html&gt;</pre>


Print Page

September 23, 2025

Display

This chapter discusses about the display property of the Bootstrap.

In Bootstrap, the display property is used to control the visibility and behavior of elements. It allows you to define how an element should be rendered and positioned within the document layout.

Notation

Utility classes that are applicable to all breakpoints, ranging from xs to xxl, do not have any abbreviation for breakpoints.
These classes are implemented from a min-width: 0; and beyond and not restricted by media query.
The remaining breakpoints do contain an abbreviation for the breakpoint.

Following format is used in naming the display classes:

.d-{value} for xs, such as .d-none.
.d-{breakpoint}-{value} for sm, md, lg, xl and xxl, such as .d-lg-none sets display: none; on lg, xl, and xxl screens.

{value} can be one of the following:

none
inline
inline-block
block
grid
inline-grid
table
table-cell
table-row
flex
inline-flex

Some of the values display property take, are as follows:

.d-none: This value hides the element completely, making it invisible and not taking up any space in the layout.
.d-inline: This value makes the element behave like an inline element, allowing other elements to be displayed alongside it on the same line.
.d-block: This value makes the element behave like a block-level element, causing it to start on a new line and take up the full available width.
.d-inline-block: This value combines the characteristics of both inline and block elements. The element is displayed inline, allowing other elements to be displayed alongside it.

Let us see an example of .d-inline:https://www.tutorialspoint.com/bootstrap/examples/display_inline.php

Example

You can edit and try running this code using the Edit & Run option.

<!DOCTYPE html><html><head><title>Bootstrap - Display</title><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script></head><body><div class="container m-3 p-5"><div class="d-inline m-2 p-4 text-bg-success">d-inline - success</div><div class="d-inline p-4 text-bg-warning">d-inline - warning</div></div></body></html>

Let us see an example of .d-block:https://www.tutorialspoint.com/bootstrap/examples/display_block.php

Example

You can edit and try running this code using the Edit & Run option.

<!DOCTYPE html><html><head><title>Bootstrap - Display</title><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script></head><body><div class="container mt-3"><h4>Display - block</h4><span class="d-block p-4 text-bg-info">d-block used for info</span><span class="d-block p-4 text-bg-primary">d-block used for primary</span></div></body></html>

Hide elements

In order to hide elements, use the .d-none class or one of the .d-{sm, md, lg, xl, xxl} classes.

Screen size	Class
Hidden on all	.d-none
Hidden only on xs	.d-none and .d-sm-block
Hidden only on sm	.d-sm-none and .d-md-block
Hidden only on md	.d-md-none and .d-lg-block
Hidden only on lg	.d-lg-none and .d-xl-block
Hidden only on xl	.d-xl-none and .d-xxl-block
Hidden only on xxl	.d-xxl-none
Visible on all	.d-block
Visible on xs	.d-block and .d-sm-none
Visible on sm	.d-none .d-sm-block .d-md-none
Visible on md	.d-none .d-md-block .d-lg-none
Visible on lg	.d-none .d-lg-block .d-xl-none
Visible on xl	.d-none .d-xl-block .d-xxl-none
Visible on xxl	.d-none .d-xxl-block

Let us see an example of hiding the display on screens smaller than lg:

Note: Kindly resize the screen in order to see the changed effect.https://www.tutorialspoint.com/bootstrap/examples/display_hide.php

Example

You can edit and try running this code using the Edit & Run option.

<!DOCTYPE html><html><head><title>Bootstrap - Display</title><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script></head><body><div class="container mt-3"><h4>Hide - display</h4><!--Hide display on smaller than lg--><div class="d-lg-none bg-warning">Hide on lg (large) and wider screens</div><div class="d-none d-lg-block bg-info">Visible on screens smaller than xl (extra-large)</div></div></body></html>

Display in print

You can modify the display value of elements specifically for printing purposes using our print display utility classes. These classes offer support for the same display values as the responsive .d-* utilities.

Following are the list of utilities available for display in print:

.d-print-none
.d-print-inline
.d-print-inline-block
.d-print-block
.d-print-grid
.d-print-inline-grid
.d-print-table
.d-print-table-row
.d-print-table-cell
.d-print-flex
.d-print-inline-flex

display and print classes can be combined and used. Let us see an example:

Note: Kindly resize the screen in order to see the changed effect.https://www.tutorialspoint.com/bootstrap/examples/display_print.php

Example

You can edit and try running this code using the Edit & Run option.

<!DOCTYPE html><html><head><title>Bootstrap - Display</title><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script></head><body><div class="container m-3 p-3"><h4>Print - display</h4><!--display on print and hide on screen--><div class="d-none d-print-block bg-primary-subtle p-3">Hide on screen and display on print only</div><!--display on screen and hide on print--><div class="d-print-none bg-warning p-3">Hide on print and display on screen only</div><!--display upto large screen and show always on print--><div class="d-none d-lg-block d-print-inline bg-danger-subtle p-3">Always display on print and hide up to large screen</div></div></body></html>

Print Page

September 23, 2025

Colors

This chapter will discuss about Bootstrap Colors classes. You can use Bootstraps custom classes to add color to the text or the background and hence adding some meaning to your content.

Text Colors

Add the color utilities like .text-* to colorize the text.

The color utilities like .text-* that generated from Bootstrap’s original $theme-colors Sass map dont yet respond to color modes. This will be resolved in version 6.

https://www.tutorialspoint.com/bootstrap/examples/colors_text_color.php

Example

You can edit and try running this code using the Edit & Run option.

<!DOCTYPE html><html lang="en"><head><title>Bootstrap Textual Colors</title><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script></head><body><div class="container mt-3"><h4>Contextual Colors</h4><p>Use the contextual classes to provide "meaning through colors":</p><p class="text-muted">Text marked by this class is muted.</p><p class="text-primary">Text marked by this class is important.</p><p class="text-primary-emphasis">Text marked by this class is darker than that displayed by .text-primary class.</p><p class="text-success">Text marked by this class indicates success.</p><p class="text-success-emphasis">Text marked by this class is darker than that displayed by .text-success class.</p><p class="text-info">Text marked by this class represents some information.</p><p class="text-info-emphasis">Text marked by this class is darker than that displayed by .text-info class.</p><p class="text-warning">Text marked by this class represents a warning.</p><p class="text-warning-emphasis">Text marked by this class is darker than that displayed by .text-warning class.</p><p class="text-danger">Text marked by this class represents danger.</p><p class="text-danger-emphasis">Text marked by this class is darker than that displayed by .text-danger class.</p><p class="text-secondary">Text marked by this class is secondary text.</p><p class="text-secondary-emphasis">Text marked by this class is darker than that displayed by .text-secondary class.</p><p class="text-dark">Text marked by this class is displayed dark grey in color.</p><p class="text-dark-emphasis">Text marked by this class is darker than that displayed by .text-dark class.</p><p class="text-body">This class marks the default body color i.e. black.</p><p class="text-body-emphasis">Text marked by this class is darker than that displayed by .text-body class.</p><p class="text-body-secondary">Text marked by this class is lighter than that displayed by .text-body class.</p><p class="text-body-tertiary">Text marked by this class is lighter than that displayed by .text-body-secondary class.</p><p class="text-light">This class represents the text in light grey color, on a white background.</p><p class="text-light-emphasis">Text marked by this class is lighter than that displayed by .text-light class.</p><p class="text-white bg-dark">This class represents the text in white. on white background. In order to make the white text look clear, <b>bg-dark</b> class is used.</p><p class="text-black bg-white">This class represents the text in black color. In order to make the black text color clear, <b>bg-white</b> class is used.</p></div></body></html>

Deprecation: The text utilities like .text-black-50 and .text-white-50 are deprecated as of v5.1.0 and they will be removed from v6.0.0. New utilities like .text-opacity-* are added.

Deprecation: The .text-muted has been deprecated as of v5.3.0, due to addition of new theme colors and variables. It will be removed from v6.0.0. Its default value is reassigned to a CSS variable –bs-secondary-color.

Background Colors

Bootstrap provides a set of predefined CSS classes for background colors that can be applied to HTML elements using the bg-* classes. These classes allow you to easily apply background colors to various components in your web page without having to write custom CSS.

Here are the list of background color classes provided by Bootstrap:

.bg-primary
.bg-success
.bg-info
.bg-warning
.bg-danger
.bg-secondary
.bg-dark
.bg-light

Example

You can edit and try running this code using the Edit & Run option.

<!DOCTYPE html><html lang="en"><head><title>Bootstrap Background Colors</title><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script></head><body><div class="container mt-3"><h4>Background Colors</h4><p>Use of background classes provided by Bootstrap to add meaning through colors.</p><div class="bg-primary p-3">Sets the background color to the primary color defined in the Bootstrap theme.</div><div class="bg-success p-3">Sets the background color to indicate success, typically green.</div><div class="bg-info p-3">Sets the background color to indicate information, typically blue.</div><div class="bg-warning p-3">Sets the background color to indicate a warning or caution, typically yellow.</div><div class="bg-danger p-3">Sets the background color to indicate danger, typically red.</div><div class="bg-secondary p-3">Sets the background color to the secondary color defined in the Bootstrap theme.</div><div class="bg-dark p-3">Sets the background color to a dark color, typically a dark gray.</div><div class="bg-light p-3">Sets the background color to a light color, typically a light gray.</div></div></body></html>

Background Text Colors

Bootstrap provides a set of predefined CSS classes for text colors that can be applied to HTML elements to customize the color of the text. These classes are used in conjunction with background color classes such as .bg-* classes, to control the color of the text within elements that have a background color applied to them.

Here are the list of background text color classes provided by Bootstrap:

.text-bg-primary
.text-bg-success
.text-bg-info
.text-bg-warning
.text-bg-danger
.text-bg-secondary
.text-bg-dark
.text-bg-light

https://www.tutorialspoint.com/bootstrap/examples/colors_background_text_color.php

Example

You can edit and try running this code using the Edit & Run option.

<!DOCTYPE html><html lang="en"><head><title>Bootstrap Colors - background text color</title><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1"><link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script></head><body><div class="container mt-3"><h4>Contrasting text Color as per the background color</h4><p class="text-bg-primary">Sets the text color to the primary color defined in the Bootstrap theme.</p><p class="text-bg-success">Sets the text color to indicate success, typically green.</p><p class="text-bg-info">Sets the text color to indicate information, typically blue.</p><p class="text-bg-warning">Sets the text color to indicate a warning or caution, typically yellow.</p><p class="text-bg-danger">Sets the text color to indicate danger, typically red.</p><p class="text-bg-secondary">Sets the text color to the secondary color defined in the Bootstrap theme.</p><p class="text-bg-dark">Sets the text color to a dark color, typically dark gray.</p><p class="text-bg-light">Sets the text color to a light color, typically light gray.</p></div></body></html>

Opacity

Opacity in Bootstrap refers to a CSS property that determines the transparency level of an element.

Bootstrap utilizes opacity in various components and utility classes to control the transparency of elements. For example, Bootstrap provides CSS classes like .opacity-25, .opacity-50, .opacity-75, and .opacity-100 that can be applied to elements to set their opacity to 25%, 50%, 75%, and 100% respectively.https://www.tutorialspoint.com/bootstrap/examples/colors_opacity.php

Example

You can edit and try running this code using the Edit & Run option.

<!DOCTYPE html><html lang="en"><head><title>Bootstrap Colors - Opacity </title><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script></head><body><h4>Example for Opacity of text</h4><p class="text-primary">This is default primary text</p><p class="text-primary text-opacity-75">This is 75% opacity primary text</p><p class="text-primary text-opacity-50">This is 50% opacity primary text</p><p class="text-primary text-opacity-25">This is 25% opacity primary text</p></body></html>

September 23, 2025

Borders

This chapter discusses about the borders that can be applied to elements. Utilize border utilities to promptly apply styling to an element’s border and border-radius, making it suitable for images, buttons, or any other element.

Borders can be either added or removed from an element. Bootstrap provides a range of border styles that can be chosen all at a time or one by one.

Add a border

Borders can be added to a custom element. Let us see an example

Example

You can edit and try running this code using the Edit & Run option.

<!DOCTYPE html><html><head><title>Bootstrap - Borders</title><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script><style>
   span {
      display: inline-block;
      width: 100px;
      height: 100px;
      margin: 10px;
      background-color: #f1f1f1
    }
  &lt;/style&gt;&lt;/head&gt;&lt;body&gt;&lt;div class="container mt-3"&gt;&lt;h4&gt;Borders&lt;/h4&gt;&lt;p&gt;Use the border classes to add borders to an element:&lt;/p&gt;&lt;br&gt;&lt;span class="border border-2"&gt;&lt;/span&gt;&lt;span class="border-top border-2"&gt;&lt;/span&gt;&lt;span class="border-end border-2"&gt;&lt;/span&gt;&lt;span class="border-bottom border-2"&gt;&lt;/span&gt;&lt;span class="border-start border-2"&gt;&lt;/span&gt;&lt;/div&gt;&lt;/body&gt;&lt;/html&gt;</pre>


Remove a border



Borders can be removed from a custom element. Let us see an example:https://www.tutorialspoint.com/bootstrap/examples/borders_remove.php



Example



You can edit and try running this code using the Edit & Run option.



<!DOCTYPE html><html><head><title>Bootstrap - Borders</title><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script><style>
   span {
    display: inline-block;
    width: 100px;
    height: 100px;
    margin: 10px;
    background-color: #f1f1f1;
    }
  &lt;/style&gt;&lt;/head&gt;&lt;body&gt;&lt;div class="container mt-3"&gt;&lt;h4&gt;Borders&lt;/h4&gt;&lt;p&gt;Use the border classes to remove borders from an element:&lt;/p&gt;&lt;br&gt;&lt;span class="border border-2"&gt;&lt;/span&gt;&lt;span class="border border-0 border-2"&gt;&lt;/span&gt;&lt;span class="border border-top-0 border-2"&gt;&lt;/span&gt;&lt;span class="border border-end-0 border-2"&gt;&lt;/span&gt;&lt;span class="border border-bottom-0 border-2"&gt;&lt;/span&gt;&lt;span class="border border-start-0 border-2"&gt;&lt;/span&gt;&lt;/div&gt;&lt;/body&gt;&lt;/html&gt;</pre>


Border colors




The border utilities, such as .border-* generated from the original $theme-colors Sass map, currently do not adapt to color modes. However, any .border-*-subtle utility will respond accordingly. This issue will be addressed in version 6.




The border color can be modified using the utilities built on theme colors. Let us see an example:https://www.tutorialspoint.com/bootstrap/examples/borders_color.php



Example



You can edit and try running this code using the Edit & Run option.



<!DOCTYPE html><html><head><title>Bootstrap - Borders</title><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script><style>
   span {
    display: inline-block;
    width: 100px;
    height: 100px;
    margin: 10px;
    background-color: #faf8f8;
    }
  &lt;/style&gt;&lt;/head&gt;&lt;body&gt;&lt;div class="container mt-3"&gt;&lt;h4&gt;Borders color&lt;/h4&gt;&lt;br&gt;&lt;p&gt;Use the .border-* classes to add colors to the borders:&lt;/p&gt;&lt;br&gt;&lt;span class="border border-success"&gt;&lt;/span&gt;&lt;span class="border border-success-subtle"&gt;&lt;/span&gt;&lt;span class="border border-danger"&gt;&lt;/span&gt;&lt;span class="border border-danger-subtle"&gt;&lt;/span&gt;&lt;span class="border border-light"&gt;&lt;/span&gt;&lt;span class="border border-light-subtle"&gt;&lt;/span&gt;&lt;span class="border border-secondary"&gt;&lt;/span&gt;&lt;span class="border border-secondary-subtle"&gt;&lt;/span&gt;&lt;span class="border border-primary"&gt;&lt;/span&gt;&lt;span class="border border-primary-subtle"&gt;&lt;/span&gt;&lt;span class="border border-black"&gt;&lt;/span&gt;&lt;span class="border border-white"&gt;&lt;/span&gt;&lt;span class="border border-info"&gt;&lt;/span&gt;&lt;span class="border border-info-subtle"&gt;&lt;/span&gt;&lt;span class="border border-warning"&gt;&lt;/span&gt;&lt;span class="border border-warning-subtle"&gt;&lt;/span&gt;&lt;span class="border border-dark"&gt;&lt;/span&gt;&lt;span class="border border-dark-subtle"&gt;&lt;/span&gt;&lt;/div&gt;&lt;/body&gt;&lt;/html&gt;</pre>


The default border of an element can also be modified using the .border-* classes.https://www.tutorialspoint.com/bootstrap/examples/borders_color_element.php



Example



You can edit and try running this code using the Edit & Run option.



<!DOCTYPE html><html><head><title>Bootstrap - Borders</title><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script></head><body><div class="container mt-3"><h4>Border colors of elements</h4><br><p>Use the .border-* classes to add colors to the borders of different elements:</p><br><div class="h4 pb-4 mb-2 text-center text-success border border-success">
      Border for success
   &lt;/div&gt;&lt;div class="p-2 bg-warning bg-opacity-25 border border-warning border-start-0"&gt;
      Adding color to a warning text, with warning border. 
   &lt;/div&gt;&lt;br&gt;&lt;button class="btn btn-light text-dark border"&gt;Click&lt;/button&gt;&lt;/div&gt;&lt;/body&gt;&lt;/html&gt;</pre>


Border opacity



In order to change the opacity of the border, you need to override the --bs-border-opacity through the custom styles or inline styles.



Let us see an example:https://www.tutorialspoint.com/bootstrap/examples/borders_opacity.php



Example



You can edit and try running this code using the Edit & Run option.



<!DOCTYPE html><html><head><title>Bootstrap - Borders</title><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script></head><body><div class="container mt-3"><h4>Border opacity of borders</h4><br><p>Use the .border-* classes to change the opacity of the borders of different elements:</p><br><div class="border border-primary p-2 mb-2">Primary border default</div><div class="border border-danger p-2 mb-2 border-opacity-75">75% opacity of danger border</div><div class="border border-warning p-2 mb-2 border-opacity-50">50% opacity of warning border</div><div class="border border-success p-2 mb-2 border-opacity-25">25% opacity of success border</div><div class="border border-secondary p-2 border-opacity-10">10% opacity of secondary border</div></body></html>



Border width



In order to change the width of the border of an element, use the classes such as .border-1, .border-2, .border-3, .border-4 and .border-5



Let us see an example:https://www.tutorialspoint.com/bootstrap/examples/borders_width.php



Example



You can edit and try running this code using the Edit & Run option.



<!DOCTYPE html><html><head><title>Bootstrap - Borders</title><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script><style>
   span {
      display: inline-block;
      width: 100px;
      height: 100px;
      margin: 10px;
      background-color: #f9f6f6;
    }
  &lt;/style&gt;&lt;/head&gt;&lt;body&gt;&lt;div class="container mt-3"&gt;&lt;h4&gt;Borders - width&lt;/h4&gt;&lt;br&gt;&lt;p&gt;Set the border width with .border-* classes:&lt;/p&gt;&lt;br&gt;&lt;span class="border border-5"&gt;&lt;/span&gt;&lt;span class="border border-4"&gt;&lt;/span&gt;&lt;span class="border border-3"&gt;&lt;/span&gt;&lt;span class="border border-2"&gt;&lt;/span&gt;&lt;span class="border border-1"&gt;&lt;/span&gt;&lt;/div&gt;&lt;/body&gt;&lt;/html&gt;</pre>


Border radius



In order to add rounded corners to any element, use the .rounded-* classes.



Let us see an example:https://www.tutorialspoint.com/bootstrap/examples/borders_radius.php



Example



You can edit and try running this code using the Edit & Run option.



<!DOCTYPE html><html><head><title>Bootstrap - Borders</title><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script><style>
  span {
    display: inline-block;
    width: 100px;
    height: 100px;
    margin: 10px;
    background-color: #440d0d;
  }
  &lt;/style&gt;&lt;/head&gt;&lt;body&gt;&lt;div class="container mt-3"&gt;&lt;h4&gt;Borders - Radius&lt;/h4&gt;&lt;p&gt;Set the radius of the border with .rounded-* classes:&lt;/p&gt;&lt;br&gt;&lt;span class="rounded"&gt;&lt;/span&gt;&lt;span class="rounded-top"&gt;&lt;/span&gt;&lt;span class="rounded-bottom"&gt;&lt;/span&gt;&lt;span class="rounded-start"&gt;&lt;/span&gt;&lt;span class="rounded-end"&gt;&lt;/span&gt;&lt;span class="rounded-circle"&gt;&lt;/span&gt;&lt;span class="rounded-pill" style="width:130px"&gt;&lt;/span&gt;&lt;/div&gt;&lt;/body&gt;&lt;/html&gt;</pre>


Borders size



Set the size of the rounded corners with the range of .rounded-* classes, starting from 0 to 5.



Let us see an example:https://www.tutorialspoint.com/bootstrap/examples/borders_size.php



Example



You can edit and try running this code using the Edit & Run option.



<!DOCTYPE html><html><head><title>Bootstrap - Borders</title><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script><style>
 span {
  display: inline-block;
  width: 100px;
  height: 100px;
  margin: 10px;
  background-color: #440d0d;
  }
 &lt;/style&gt;&lt;/head&gt;&lt;body&gt;&lt;div class="container mt-3"&gt;&lt;h4&gt;Borders - Size&lt;/h4&gt;&lt;p&gt;Set the size of the rounded corners with .rounded-* classes:&lt;/p&gt;&lt;br&gt;&lt;span class="rounded-5"&gt;&lt;/span&gt;&lt;span class="rounded-4"&gt;&lt;/span&gt;&lt;span class="rounded-3"&gt;&lt;/span&gt;&lt;span class="rounded-2"&gt;&lt;/span&gt;&lt;span class="rounded-1"&gt;&lt;/span&gt;&lt;span class="rounded-0"&gt;&lt;/span&gt;&lt;/div&gt;&lt;/body&gt;&lt;/html&gt;</pre>


Another set of .rounded-* classes can be used to set one of the sides of the element as rounded. Let us see an example:https://www.tutorialspoint.com/bootstrap/examples/borders_rounded_side.php



Example



You can edit and try running this code using the Edit & Run option.



<!DOCTYPE html><html><head><title>Bootstrap - Borders</title><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script><style>
span {
  display: inline-block;
  width: 100px;
  height: 100px;
  margin: 10px;
  background-color: #440d0d;
}
&lt;/style&gt;&lt;/head&gt;&lt;body&gt;&lt;div class="container mt-3"&gt;&lt;h4&gt;Borders - Rounded side&lt;/h4&gt;&lt;br&gt;&lt;p&gt;Set the side to be with rounded corners&lt;/p&gt;&lt;br&gt;&lt;span class="rounded-start-pill"&gt;&lt;/span&gt;&lt;span class="rounded-start-2"&gt;&lt;/span&gt;&lt;span class="rounded-bottom-1"&gt;&lt;/span&gt;&lt;span class="rounded-5 rounded-top-0"&gt;&lt;/span&gt;&lt;span class="rounded-end-circle"&gt;&lt;/span&gt;&lt;/div&gt;&lt;/body&gt;&lt;/html&gt;</pre>


Print Page

September 23, 2025

Background

This chapter discusses about the background color utility classes and the gradients that can be used with these classes.

Accessibility tip: Use of color to the background just provides a visual indication, and this will not be helpful to users of assistive technologies like screen readers. Make sure that the meaning is clear from the content itself.

Use alternative means to add clarity to the content using the .visually-hidden class.

Background color

Like the contextual color classes for text, you can apply any contextual class to set the background of an element. Keep in mind that background utilities do not affect color, therefore, certain situations may require the use of .text-* color utilities.

Let us see an example:https://www.tutorialspoint.com/bootstrap/examples/background_color.php

Example

You can edit and try running this code using the Edit & Run option.

<!DOCTYPE html><html lang="en"><head><title>Bootstrap Background</title><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script></head><body><h4>Background color utilities</h4><!--success color--><div class="p-3 mb-2 bg-success text-white">background utility --> .bg-success</div><div class="p-3 mb-2 bg-success-subtle text-emphasis-success">background utility subtle--> .bg-success-subtle</div><!--warning color--><div class="p-3 mb-2 bg-warning text-dark">background utility --> .bg-warning</div><div class="p-3 mb-2 bg-warning-subtle text-emphasis-warning">background utility subtle --> .bg-warning-subtle</div><!--info color--><div class="p-3 mb-2 bg-info text-dark">background utility --> .bg-info</div><div class="p-3 mb-2 bg-info-subtle text-emphasis-info">background utility subtle--> .bg-info-subtle</div><!--dark color--><div class="p-3 mb-2 bg-dark text-white">background utility --> .bg-dark</div><div class="p-3 mb-2 bg-dark-subtle text-emphasis-dark">background utility subtle--> .bg-dark-subtle</div><!--primary color--><div class="p-2 mb-2 bg-primary text-white">background utility --> .bg-primary</div><div class="p-3 mb-2 bg-primary-subtle text-emphasis-primary">background utility subtle--> .bg-primary-subtle</div><!--light color--><div class="p-3 mb-2 bg-light text-dark">background utility --> .bg-light</div><div class="p-3 mb-2 bg-light-subtle text-emphasis-light">background utility subtle--> .bg-light-subtle</div><!--secondary color--><div class="p-3 mb-2 bg-secondary text-white">background utility --> .bg-secondary</div><div class="p-3 mb-2 bg-secondary-subtle text-emphasis-secondary">background utility subtle--> .bg-secondary-subtle</div><!--body color--><div class="p-3 mb-2 bg-body text-body">background utility --> .bg-body</div><div class="p-3 mb-2 bg-black text-white">background utility subtle--> .bg-black</div><!--danger color--><div class="p-3 mb-2 bg-danger text-white">background utility --> .bg-danger</div><div class="p-3 mb-2 bg-danger-subtle text-emphasis-danger">background utility subtle--> .bg-danger-subtle</div><!--white color--><div class="p-3 mb-2 bg-white text-dark">background utility --> .bg-white</div><div class="p-3 mb-2 bg-transparent text-body">background utility subtle--> .bg-transparent</div><!--secondary and tertiary color--><p class="p-3 mb-2 bg-body-secondary">background utility --> .bg-body-secondary</p><p class="p-3 mb-2 bg-body-tertiary">background utility --> .bg-body-tertiary</p></body></html>

Background gradient

The addition of a .bg-gradient class results in a linear gradient being applied to the backgrounds, commencing with a partially transparent white hue that gradually fades towards the bottom.

In order to add a gradient in your custom CSS, just add background-image: var(–bs-gradient);.

Let us see an example of .bg-gradient class:https://www.tutorialspoint.com/bootstrap/examples/background_gradient.php

Example

You can edit and try running this code using the Edit & Run option.

<!DOCTYPE html><!DOCTYPE html><html lang="en"><head><title>Bootstrap Background</title><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script></head><body><div class="container mt-3"><h4>Background color utilities</h4><!--success color--><div class="p-3 mb-2 bg-success text-white">background utility --> .bg-success</div><div class="p-3 mb-2 bg-success bg-gradient text-white">background gradient utility --> .bg-success bg-gradient</div><!--warning color--><div class="p-3 mb-2 bg-warning text-dark">background utility --> .bg-warning</div><div class="p-3 mb-2 bg-warning bg-gradient text-emphasis-warning">background gradient utility --> .bg-warning bg-gradient</div><!--info color--><div class="p-3 mb-2 bg-info text-dark">background utility --> .bg-info</div><div class="p-3 mb-2 bg-info bg-gradient text-emphasis-info">background gradient utility--> .bg-info bg-gradient</div><!--dark color--><div class="p-3 mb-2 bg-dark text-white">background utility --> .bg-dark</div><div class="p-3 mb-2 bg-dark bg-gradient text-white">background gradient utility --> .bg-dark bg-gradient</div><!--primary color--><div class="p-2 mb-2 bg-primary text-white">background utility --> .bg-primary</div><div class="p-3 mb-2 bg-primary bg-gradient text-white">background gradient utility--> .bg-primary bg-gradient</div><!--light color--><div class="p-3 mb-2 bg-light text-dark">background utility --> .bg-light</div><div class="p-3 mb-2 bg-light bg-gradient text-emphasis-light">background gradient utility--> .bg-light bg-gradient</div><!--secondary color--><div class="p-3 mb-2 bg-secondary text-white">background utility --> .bg-secondary</div><div class="p-3 mb-2 bg-secondary bg-gradient text-white">background gradient utility--> .bg-secondary bg-gradient</div><!--body color--><div class="p-3 mb-2 bg-body text-body">background utility --> .bg-body</div><div class="p-3 mb-2 bg-black bg-gradient text-white">background gradient utility--> .bg-black bg-gradient</div><!--danger color--><div class="p-3 mb-2 bg-danger text-white">background utility --> .bg-danger</div><div class="p-3 mb-2 bg-danger bg-gradient text-white">background gradient utility--> .bg-danger bg-gradient</div></div></body></html>

Opacity

To change the opacity of the background color, either override –bs-bg-opacity via custom styles or inline styles or choose from the available utility .bg-opacity.

Let us see an example where the CSS variable is overriden:https://www.tutorialspoint.com/bootstrap/examples/background_opacity_CSS.php

Example

You can edit and try running this code using the Edit & Run option.

<!DOCTYPE html><html lang="en"><head><title>Bootstrap Background</title><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script></head><body><div class="container mt-3"><h4>Background opacity - override CSS variable</h4><div class="bg-danger p-2 text-white">Default danger background</div><div class="bg-danger p-2" style="--bs-bg-opacity: .5;">50% opacity of danger background</div></div></body></html>

Let us see an example where .bg-opacity is used:https://www.tutorialspoint.com/bootstrap/examples/background_opacity_utility.php

Example

You can edit and try running this code using the Edit & Run option.

<!DOCTYPE html><html lang="en"><head><title>Bootstrap Background</title><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script></head><body><div class="container mt-3"><h4>Background opacity utility</h4><div class="bg-primary p-2 text-white">Primary default background</div><div class="bg-primary p-2 text-dark bg-opacity-10">10% opacity on primary background</div><div class="bg-primary p-2 text-dark bg-opacity-25">25% opacity on primary background</div><div class="bg-primary p-2 text-dark bg-opacity-50">50% opacity on primary background</div><div class="bg-primary p-2 text-dark bg-opacity-75">75% opacity primary background</div></div></body></html>

September 23, 2025

Visually hidden
This chapter discusses about classes provided by Bootstrap to visually hide any element, such as .visually-hidden and .visually-hidden-focusable.
- The .visually-hidden class in Bootstrap 5 is used to visually hide an element while keeping it accessible to screen readers and other assistive technologies.
- The .visually-hidden-focusable class is used to visually hide an element by default, but to display it when its focused, for example, on using a keyboard.
- The .visually-hidden-focusable class can also be used within a container :focus-within. The container will be displayed when any child element of the container receives focus.
Test focusability: Use keyboard navigation to test the focusability of elements. Press the Tab key to navigate through the focusable elements and Shift + Tab to move backward.

Let’s see an example on the usage of the classes .visually-hidden and .visually-hidden-focusable:

Example

You can edit and try running this code using the Edit & Run option.
```
<!DOCTYPE html><html lang="en"><head><title>Bootstrap - Helper - Visually hidden</title><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"><link href="https://getbootstrap.com/docs/5.3/assets/css/docs.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script></head><body><h4>Visually hidden</h4><br><br><h4 class="visually-hidden">Hidden title for screen readers</h4><a class="visually-hidden-focusable" href="#content">Skip to home page</a><div class="visually-hidden-focusable">A container with an <a href="#">element that is focusable</a>.</div></body></html>
```
September 23, 2025

Vertical rule

This chapter discusses about vertical rule. The custom vertical rule helper creates vertical dividers in common layouts, like the <hr> element.

The vertical rule class is denoted as .vr
It is 1px wide
It has minimum-height of 1em
Its color is set using currentColor and opacity

You can customize the verical rules with additional styles as per your requirement.

The example given below shows the usage of .vr class:https://www.tutorialspoint.com/bootstrap/examples/vertical_rule_create.php

Example

You can edit and try running this code using the Edit & Run option.

<!DOCTYPE html><html lang="en"><head><title>Bootstrap Helper - Vertical rule</title><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"><link href="https://getbootstrap.com/docs/5.3/assets/css/docs.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script></head><body><h4>Vertical rule example</h4><div class="container"><div class="row"><div class="col-md-3 text-bg-light"><p>Text on the left side of vertical divider.</p></div><div class="col-md-1"><hr class="vr"></div><div class="col-md-3 text-bg-light"><p>Text on the right side of vertical divider.</p></div></div></div></body></html>

In flex layouts, the height of vertical rule adjusts automatically based on the size of its container.

Let’s see an example where the height of vertical rule is based on the flex layout:https://www.tutorialspoint.com/bootstrap/examples/vertical_rule_flex.php

Example

You can edit and try running this code using the Edit & Run option.

<!DOCTYPE html><html lang="en"><head><title>Bootstrap Helper - Vertical rule</title><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"><link href="https://getbootstrap.com/docs/5.3/assets/css/docs.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script></head><body><h4>Vertical rule with flex</h4><div class="d-flex flex-row"><div class="flex-grow-1"><p>Content on the left</p></div><div class="d-flex flex-grow-1" style="height: 200px;"><div class="vr"></div></div><div class="flex-grow-1"><p>Content on the right</p></div></div></body></html>

Vertical rule with stacks

Vertical rule can also be used in stacks, to separate the different values.

Let’s see an example where the vertical rule is used in stacks:https://www.tutorialspoint.com/bootstrap/examples/vertical_rule_stack.php

Example

You can edit and try running this code using the Edit & Run option.

<!DOCTYPE html><html lang="en"><head><title>Bootstrap Helper - Vertical rule</title><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"><link href="https://getbootstrap.com/docs/5.3/assets/css/docs.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script></head><body><h4>Vertical rule with stacks</h4><div class="hstack gap-1"><div class="p-3 text-bg-info">First item</div><div class="vr"></div><div class="p-3 text-bg-primary">Second item</div><div class="vr"></div><div class="p-3 text-bg-warning">Third item</div></div></body></html>

September 23, 2025

Text truncation

This chapter discusses about the utility provided by Bootstrap that helps in truncating long strings of text. Text truncation is a feature that allows you to truncate long strings of text that overflow their container, and display an ellipsis (…) at the end of the truncated text to indicate that more text is available.

This can be useful for situations where you have limited space to display text, such as in a table or card.
To truncate text in Bootstrap 5, you can use the .text-truncate class.
It requires display: inline-block or display: block.
This class can be added to any element that contains text, such as a <div> or a <p> element.

Here’s an example of how to use the .text-truncate class:https://www.tutorialspoint.com/bootstrap/examples/text_truncation.php

Example

You can edit and try running this code using the Edit & Run option.

<!DOCTYPE html><html lang="en"><head><title>Bootstrap - Helper - Text truncation</title><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script></head><body><h4>Text truncation example</h4><!-- Block level --><div class="row"><div class="col-3 text-truncate">
        The string of text seems to be very long, thus truncating it.
        &lt;/div&gt;&lt;/div&gt;&lt;!-- Inline level --&gt;&lt;span class="d-inline-block text-truncate" style="max-width: 150px;"&gt;
        The string of text seems to be very long, thus truncating it.
    &lt;/span&gt;&lt;/body&gt;&lt;/html&gt;</pre>

September 23, 2025

Stretched link

This chapter discusses about the class .stretched-link provided by Bootstrap.

The .stretched-link class in Bootstrap is used to create a link that stretches to fill the entire parent container.

This class can be used on any element that can contain a link, such as a <div> or <a> element, to make the entire element clickable and act as a link.
Any element with position:relative and contains a link with the .stretched-link class is clickable.
The .stretched-link class cannot be mixed with most table elements.
This class can be safely added to cards as they have position:relative by default in Bootstrap.
Using stretched links with multiple links and tap targets is not advisable.

Card with stretched link

This is useful for cases where you want to make an entire section of content clickable, such as a card or a list item.

Let’s see an example on the usage of the .stretched-link class in a card:

Example

You can edit and try running this code using the Edit & Run option.

<!DOCTYPE html><html lang="en"><head><title>Bootstrap - Card</title><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script></head><body><h4>Stretched link in a card</h4><div class="card" style="width: 20rem;"><img src="/bootstrap/images/tutimg.png" class="card-img-top" alt="..."><div class="card-body"><h5 class="card-title">Stretched link in a card</h5><p class="card-text">Here is an example that shows the entire card as a link. This is because of the .stretched-link class of Bootstrap.</p><a href="#" class="btn btn-primary stretched-link">View</a></div></div></body></html>

You need to add the .position-relative class to prevent the link from stretching outside the parent element, when custom components do not have position: relative by default.

Let’s see an example on the usage of the .position-relative class:https://www.tutorialspoint.com/bootstrap/examples/stretched_link_custom.php

Example

You can edit and try running this code using the Edit & Run option.

<!DOCTYPE html><html lang="en"><head><title>Bootstrap - Helper - Stretched link</title><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script></head><body><h4>Custom component with stretched link</h4><div class="d-flex position-relative"><img src="/bootstrap/images/tutimg.png" class="flex-shrink-0 me-3" alt="..."><div><h5 class="mt-0">Custom component with stretched link using .position-relative</h5><p>Here is an example showing the use of .position-relative class in a component that shows a stretched link usage.</p><a href="#" class="stretched-link">View</a></div></div></body></html>

Let’s see one more example of the usage of the .position-relative class.

Example

You can edit and try running this code using the Edit & Run option.

<!DOCTYPE html><html lang="en"><head><title>Bootstrap - Helper - Stretched link</title><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script></head><body><h4>Columns with stretched link</h4><div class="row g-0 bg-body-secondary position-relative"><div class="col-md-4 mb-md-0 p-md-4"><img src="/bootstrap/images/tutimg.png" class="w-100" alt="..."></div><div class="col-md-4 p-4 ps-md-0"><h5 class="mt-0">Columns with stretched link</h5><p>Another example of strecthed link with .position-relative on this other custom component. You can use it here to give the component a bit of body and size.</p><a href="#" class="stretched-link">View</a></div></div></body></html>

September 23, 2025

Stacks

This chapter discusses about stacks. A stack is an utility class that can be used to control the stacking of content within a container.

The stack utility class controls the stacking order of elements. Stacks offer a quick and easy way of applying the flexbox properties to create layouts in Bootstrap.

Vertical stack

The class .vstack is used to create vertical layouts. The utilities such as .gap-* can be used to add space between items.

By default, the stacked items are full-width.

The example given below shows the usage of .vstack class:

Example

You can edit and try running this code using the Edit & Run option.

<!DOCTYPE html><html lang="en"><head><title>Bootstrap - Helper - Stack</title><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script></head><body><h4>Vertical stack example</h4><br><div class="vstack gap-1"><div class="text-bg-secondary p-2">Item on First place</div><div class="text-bg-primary p-2">Item on Second place</div><div class="text-bg-info p-2">Item on Third place</div></div></body></html>

Stack the buttons or any other elements, using the class .vstack.https://www.tutorialspoint.com/bootstrap/examples/stack_vertical_buttons.php

Example

You can edit and try running this code using the Edit & Run option.

<!DOCTYPE html><html lang="en"><head><title>Bootstrap - Helper - Stack</title><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script></head><body><h4>Vertical stack using buttons</h4><br><div class="vstack gap-3 col-md-4 mx-auto"><button type="button" class="btn btn-success">Confirm changes</button><button type="button" class="btn btn-secondary">Cancel</button></div></body></html>

Horizontal stack

The class .hstack is used to create horizontal layouts. The utilities such as .gap-* can be used to add space between items.

By default, the stacked items are vertically centered and only take up their necessary width.

The example given below shows the usage of .hstack class:https://www.tutorialspoint.com/bootstrap/examples/horizontal_stack.php

Example

You can edit and try running this code using the Edit & Run option.

<!DOCTYPE html><html lang="en"><head><title>Bootstrap - Helper - Stack</title><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script></head><body><h4>Horizontal stack example</h4><br><div class="hstack gap-3 column-gap-3"><div class="text-bg-warning p-2">Item one</div><div class="text-bg-light p-2">Item two</div><div class="text-bg-secondary p-2">Item three</div></div></body></html>

The horizontal margin utility like .ms-auto can be used to add spaces. The utility class .ms-auto aligns the text to the right of the screen. Let’s see an example:https://www.tutorialspoint.com/bootstrap/examples/horizontal_margin.php

Example

You can edit and try running this code using the Edit & Run option.

<!DOCTYPE html><html lang="en"><head><title>Bootstrap - Helper - Stack</title><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script></head><body><h4>Horizontal margin example</h4><br><div class="hstack gap-3 column-gap-3"><div class="text-bg-primary p-2">Item one</div><div class="text-bg-secondary p-2">Item two</div><div class="text-bg-info p-2 ms-auto">Item three</div></div></body></html>

Vertical rules such as the class .vr is used to create a vertical divider. Let’s see an example for the same.

The example given below shows the usage of .vr class:https://www.tutorialspoint.com/bootstrap/examples/stack_vertical_rule.php

Example

You can edit and try running this code using the Edit & Run option.

<!DOCTYPE html><html lang="en"><head><title>Bootstrap - Helper - Stack</title><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script></head><body><h4>Horizontal stack with vertical rule</h4><br><div class="hstack gap-3 column-gap-3"><div class="text-bg-secondary p-3">Item one</div><div class="vr"></div><div class="text-bg-warning p-3">Item two</div><div class="vr"></div><div class="text-bg-info p-3">Item three</div></div></body></html>

An inline form can be created using the class .hstack.https://www.tutorialspoint.com/bootstrap/examples/stack_horizontal_form.php

Example

You can edit and try running this code using the Edit & Run option.

<!DOCTYPE html><html lang="en"><head><title>Bootstrap - Helper - Stack</title><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script></head><body><h4>Create an inline form</h4><br><div class="hstack gap-2"><input class="form-control me-auto" type="text" placeholder="Add text here..." aria-label="Add text here..."><div class="vr"></div><button type="button" class="btn btn-success">Submit</button><div class="vr"></div><button type="button" class="btn btn-outline-danger">Clear</button></div></body></html>

September 23, 2025