Bootstrap - 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/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/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.

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/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/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:

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/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/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:

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/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/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:

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/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/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.

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/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/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>
Advertisements