forum

Home / DeveloperSection / Forums / Use of Bootstrap Flexbox? How to use it with the help of Bootstrap library?

Ask Question

Use of Bootstrap Flexbox? How to use it with the help of Bootstrap library?

Ethan Karla30928-Jul-2021

What is the use of Flexbox? How to use it with the help of Bootstrap library?

bootstrapbootstrap 
Updated on 28-Jul-2021
Ethan Karla

Ethan Karla

Follow
An enthusiastic, adaptive, and fast-learning person with a broad and acute interest in the discovery of new innovative drugs, I particularly enjoy collaborating with scientists from different disciplines to develop new skills and solve new challenges.

Can you answer this question?

Answer

2 Answers

Anonymous User

Anonymous User

04-Aug-2021

To center an element vertically and horizontally with the help of an Bootstrap is very simple with the help of an Bootstrap Flexbox : 

<!doctype html>

<html lang='en'>

<head>

    <meta charset='utf-8'>

    <meta name='viewport' content='width=device-width, initial-scale=1'>

    <link href='https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css' rel='stylesheet' integrity='sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC' crossorigin='anonymous'>

    <title>Hello, world!</title>

</head>

<body>

    <div class='align-content-center align-items-center d-flex justify-content-center mb-3'>

        <div class='p-2 bg-secondary text-light'>Vertically and Horizontally Centered Container</div>

    </div>

    <script src='https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js' integrity='sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM' crossorigin='anonymous'></script>

</body>

</html>

Hope this will help you.

Happy Coding!

Anonymous User

Anonymous User

04-Aug-2021

Flexbox is a layout model that helps to align an element in a container and it helps to distribute the element within a container. Simply changing the container to flexbox makes it easy to arrange and fill the element as per your requirement. These are very helpful in building a responsive website.

Let's have an example to demonstrate the flexbox in Bootstrap Library : 

<!doctype html>

<html lang='en'>

<head>

    <meta charset='utf-8'>

    <meta name='viewport' content='width=device-width, initial-scale=1'>

    <link href='https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css' rel='stylesheet' integrity='sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC' crossorigin='anonymous'>

    <title>Hello, world!</title>

</head>

<body>

    <div class='d-flex flex-row bd-highlight mb-3'>

        <div class='p-2 bg-secondary text-light'>Flex item 1</div>

        <div class='p-2 bg-secondary text-light'>Flex item 2</div>

        <div class='p-2 bg-secondary text-light'>Flex item 3</div>

    </div>

    <div class='d-flex flex-column bd-highlight'>

        <div class='p-2 bg-secondary text-light'>Flex item 1</div>

        <div class='p-2 bg-secondary text-light'>Flex item 2</div>

        <div class='p-2 bg-secondary text-light'>Flex item 3</div>

    </div>

    <script src='https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js' integrity='sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM' crossorigin='anonymous'></script>

</body>

</html>

Hope this will help you.

Happy Coding!

Liked By