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 Responsive Grid for all types of devices – MindStick
Ask Question

1 Answers

Anonymous User
Anonymous User 29 Jul 2021
Report Abuse

Responsive containers are used to be 100% width until the breakpoint of that particular column has reached. For example, .container-sm is 100% wide to start until the sm breakpoint is reached, where it will range up with md, lg, xl, and xxl.

<div class='container-sm'>100% wide until small breakpoint</div>
<div class='container-md'>100% wide until medium breakpoint</div>
<div class='container-lg'>100% wide until large breakpoint</div>
<div class='container-xl'>100% wide until extra large breakpoint</div>
<div class='container-xxl'>100% wide until extra extra large breakpoint</div>

Below is an example for the responsive grid : 

<!doctype html>
<html lang='en'>
<head>
    <!-- Required meta tags -->
    <meta charset='utf-8'>
    <meta name='viewport' content='width=device-width, initial-scale=1'>
    <!-- Bootstrap CSS -->
    <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='container pt-4'>
        <!-- Stack the columns on mobile by making one full-width and the other half-width -->
        <div class='row'>
            <div class='col-12 col-md-8  bg-info text-dark'>.col-12 .col-md-8</div>
            <div class='col-6 col-md-4 bg-secondary text-light'>.col-6 .col-md-4</div>
        </div>
        <!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop -->
        <div class='row'>
            <div class='col-6 col-md-4 bg-danger'>.col-6 .col-md-4</div>
            <div class='col-6 col-md-4 bg-secondary text-light'>.col-6 .col-md-4</div>
            <div class='col-6 col-md-4 bg-danger'>.col-6 .col-md-4</div>
        </div>
        <!-- Columns are always 50% wide, on mobile and desktop -->
        <div class='row'>
            <div class='col-6 bg-secondary text-light'>.col-6</div>
            <div class='col-6 bg-warning'>.col-6</div>
        </div>
    </div>
    <!-- Optional JavaScript; choose one of the two! -->
    <!-- Option 1: Bootstrap Bundle with Popper -->
    <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>
    <!-- Option 2: Separate Popper and Bootstrap JS -->
    <!--
    <script src='https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js' integrity='sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p' crossorigin='anonymous'></script>
    <script src='https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.min.js' integrity='sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF' 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