Services
Technology Web App Development Mobile App Development Windows App Development Database Development UI/UX Development Cloud Development SEO Digital Marketing Guest Posting Content Writing Artificial Intelligence Data Science ERP Development CRM Development CMS Development LMS Development Business Listing Blockchain Technology Startup Promotion AI Tools Integration
Products
Data Converter Cleaner TUC - Unit Converter Import Export Survey Manager Tweet Controller
Developer
Article Blog Forum Interview Beginner News Startup Quiz
Users
Career
Apply Job Internship
Pricing
Login Sign Up Get a Quote

forum

Home Forums Use of Bootstrap Flexbox? How to use it with the help of Bootstrap library? – MindStick
Ask Question

2 Answers

Anonymous User
Anonymous User 04 Aug 2021
Report Abuse

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

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!

advertising
Markdown for AI

A clean, structured version of this page for AI assistants and LLMs.

Open .md