Responsive utilities are Bootstrap classes that allow elements to change their appearance or behavior according to the viewport size.

They can be used to:

• Show or hide elements.
• Change display behavior.
• Change Flexbox direction.
• Change text alignment.
• Control spacing at different breakpoints.
• Create responsive layouts.
• Adapt navigation and buttons to different screen sizes.

Bootstrap follows a mobile-first design approach.

This means you normally write the default style for smaller screens first and then use breakpoint classes to change the layout for larger screens.

<div
class="d-flex
flex-column
flex-md-row">

    Content

</div>

Here, the layout starts as a column and becomes a row from the medium breakpoint and above.

Bootstrap provides the following standard responsive breakpoints:

• xs: below 576px
• sm: 576px and above
• md: 768px and above
• lg: 992px and above
• xl: 1200px and above
• xxl: 1400px and above

The xs breakpoint is the default base size and normally does not require an xs class prefix.

Display utilities can be combined with breakpoints to show or hide elements.

<div
class="d-none d-md-block">

    Desktop Content

</div>

The element is hidden by default and displayed as a block from the medium breakpoint and above.

You can display content on smaller screens and hide it from the medium breakpoint upward.

<div
class="d-block d-md-none">

    Mobile Content

</div>

This is useful when a mobile interface needs different content or controls.

You can hide content by default and display it on larger screens.

<div
class="d-none d-lg-block">

    Desktop Navigation

</div>

The element becomes a block from the large breakpoint and above.

Flexbox utilities can change direction at different breakpoints.

<div
class="d-flex
flex-column
flex-md-row">

    <div>
        One
    </div>

    <div>
        Two
    </div>

</div>

The items are stacked vertically on smaller screens and arranged horizontally from the medium breakpoint.

Bootstrap provides responsive text alignment utilities.

<div
class="text-center text-md-start">

    Responsive Text

</div>

The text is centered by default and aligned to the start from the medium breakpoint and above.

Spacing utilities can also use breakpoint prefixes.

<div
class="p-2 p-md-4">

    Responsive Padding

</div>

The element has smaller padding by default and larger padding from the medium breakpoint.

Margin utilities can be changed at different breakpoints.

<div
class="mt-2 mt-lg-5">

    Responsive Margin

</div>

The top margin starts smaller and becomes larger from the large breakpoint.

Gap utilities can also use responsive prefixes.

<div
class="d-flex
gap-2
gap-md-4">

    <div>One</div>
    <div>Two</div>

</div>

The gap is smaller by default and becomes larger from the medium breakpoint.

Bootstrap's grid system is one of the most important tools for responsive layouts.

<div class="row">

    <div class="col-12 col-md-6">
        Column One
    </div>

    <div class="col-12 col-md-6">
        Column Two
    </div>

</div>

Each column takes the full width on small screens and half the width from the medium breakpoint upward.

You can create a responsive three-column layout using col-lg-4.

<div class="row g-4">

    <div class="col-12 col-md-6 col-lg-4">
        One
    </div>

    <div class="col-12 col-md-6 col-lg-4">
        Two
    </div>

    <div class="col-12 col-md-6 col-lg-4">
        Three
    </div>

</div>

The layout can change from one column to two columns and then three columns as the viewport becomes wider.

Bootstrap provides responsive container classes.

<div class="container">

    Responsive Container

</div>


<div class="container-fluid">

    Full Width Container

</div>

The standard container changes its maximum width according to the viewport, while container-fluid remains full width.

Bootstrap also provides breakpoint-specific containers.

<div class="container-sm">
    Container Small
</div>

<div class="container-md">
    Container Medium
</div>

<div class="container-lg">
    Container Large
</div>

These containers become constrained at their corresponding breakpoints.

The img-fluid class makes an image responsive.

<img
src="photo.jpg"
class="img-fluid"
alt="Responsive photo">

The image scales down within its containing block instead of overflowing it.

Bootstrap's Navbar component can change its behavior at a specified breakpoint.

<nav
class="navbar
navbar-expand-lg
bg-body-tertiary">

    <div class="container">

        <a
        class="navbar-brand"
        href="#">

            My Website

        </a>

    </div>

</nav>

The navbar-expand-lg class controls when the navbar expands into its larger-screen layout.

Buttons can be arranged differently at different viewport sizes by using Flexbox and responsive utilities.

<div
class="d-flex
flex-column
flex-sm-row
gap-2">

    <button class="btn btn-primary">
        Login
    </button>

    <button class="btn btn-success">
        Register
    </button>

</div>

The buttons are stacked on very small screens and arranged in a row from the small breakpoint.

Cards can become responsive by combining the Bootstrap grid with cards.

<div class="row g-4">


    <div class="col-12 col-md-6 col-lg-4">

        <div class="card h-100">

            <div class="card-body">

                <h4>
                    HTML
                </h4>

                <p>
                    Learn HTML.
                </p>

            </div>

        </div>

    </div>


    <div class="col-12 col-md-6 col-lg-4">

        <div class="card h-100">

            <div class="card-body">

                <h4>
                    CSS
                </h4>

                <p>
                    Learn CSS.
                </p>

            </div>

        </div>

    </div>


</div>

Display utilities can be used to create different versions of content for different viewport sizes.

<div class="d-block d-md-none">

    Mobile Version

</div>


<div class="d-none d-md-block">

    Desktop Version

</div>

This can be useful when a mobile and desktop interface needs different structures.

Flex alignment utilities can also be changed at breakpoints.

<div
class="d-flex
justify-content-center
justify-content-md-between">

    <div>
        Logo
    </div>

    <div>
        Menu
    </div>

</div>

The content is centered by default and distributed between the available space from the medium breakpoint.

Bootstrap Flexbox order utilities can change the visual order of items at different breakpoints.

<div class="d-flex">

    <div class="order-2 order-md-1">
        Content One
    </div>

    <div class="order-1 order-md-2">
        Content Two
    </div>

</div>

The visual order changes at the medium breakpoint.

Position-related utilities can be combined with responsive display utilities.

<div
class="position-relative">


    <span
    class="position-absolute
    top-0
    end-0
    d-none d-md-block">

        Desktop Badge

    </span>


</div>

The badge is hidden on smaller screens and displayed from the medium breakpoint.

The table-responsive utility helps tables fit within small screens by allowing horizontal scrolling when necessary.

<div class="table-responsive">

    <table class="table">

        <thead>

            <tr>
                <th>Name</th>
                <th>Course</th>
                <th>Fee</th>
            </tr>

        </thead>

        <tbody>

            <tr>
                <td>Rahul</td>
                <td>Bootstrap</td>
                <td>5000</td>
            </tr>

        </tbody>

    </table>

</div>

Responsive layouts should allow text to wrap naturally rather than forcing content to stay on one line.

<div class="text-wrap">

    This is responsive text
    that can wrap naturally.

</div>

Avoid unnecessary fixed widths that cause text to overflow on smaller screens.

Avoid these common mistakes:

• Designing only for desktop screens.
• Using fixed widths everywhere.
• Forgetting the mobile-first approach.
• Using too many breakpoint overrides.
• Allowing tables or images to overflow small screens.
• Using text that becomes too small on mobile devices.
• Creating buttons that are difficult to tap.
• Hiding important content unnecessarily.
• Testing only one screen size.

Follow these practices when creating responsive Bootstrap websites:

• Start with the mobile layout.
• Use Bootstrap's grid system.
• Use responsive Flexbox utilities.
• Use responsive spacing utilities.
• Use responsive display classes when necessary.
• Use img-fluid for responsive images.
• Use table-responsive for wide tables.
• Keep content readable on small screens.
• Test your design at different viewport widths.

The following example creates a responsive course layout.

<div class="container py-4">

    <div class="row g-4">


        <div class="col-12 col-md-6 col-lg-4">

            <div class="card h-100">

                <div class="card-body">

                    <h3>
                        HTML
                    </h3>

                    <p>
                        Learn HTML.
                    </p>

                    <button
                    class="btn btn-primary w-100">

                        Start

                    </button>

                </div>

            </div>

        </div>


        <div class="col-12 col-md-6 col-lg-4">

            <div class="card h-100">

                <div class="card-body">

                    <h3>
                        CSS
                    </h3>

                    <p>
                        Learn CSS.
                    </p>

                    <button
                    class="btn btn-success w-100">

                        Start

                    </button>

                </div>

            </div>

        </div>


    </div>

</div>

A responsive header can use Flexbox utilities to change its layout.

<header
class="p-3
border-bottom">


    <div
    class="d-flex
    flex-column
    flex-md-row
    justify-content-between
    align-items-center
    gap-3">


        <h2 class="mb-0">

            Soopro Pathshala

        </h2>


        <div
        class="d-flex
        flex-column
        flex-sm-row
        gap-2">


            <a
            href="#"
            class="btn btn-primary">

                Courses

            </a>


            <a
            href="#"
            class="btn btn-success">

                Contact

            </a>


        </div>


    </div>


</header>

The header starts vertically on smaller screens and becomes horizontal from the medium breakpoint.

This complete example combines responsive containers, grid columns, Flexbox, spacing, buttons, and responsive visibility.

<section class="py-5">


    <div class="container">


        <div
        class="d-flex
        flex-column
        flex-lg-row
        justify-content-between
        align-items-center
        gap-4
        mb-5">


            <div class="text-center text-lg-start">

                <h1>

                    Learn Bootstrap

                </h1>


                <p>

                    Build responsive websites
                    easily with Bootstrap.

                </p>

            </div>


            <div
            class="d-flex
            flex-column
            flex-sm-row
            gap-2">


                <button
                class="btn btn-primary">

                    Start Course

                </button>


                <button
                class="btn btn-outline-secondary">

                    View Lessons

                </button>


            </div>


        </div>


        <div class="row g-4">


            <div
            class="col-12
            col-md-6
            col-lg-4">


                <div
                class="card
                h-100
                shadow-sm">


                    <div
                    class="card-body
                    text-center">


                        <h3>
                            HTML
                        </h3>


                        <p>
                            Learn HTML basics.
                        </p>


                        <button
                        class="btn
                        btn-primary
                        w-100">

                            Learn

                        </button>


                    </div>


                </div>


            </div>


            <div
            class="col-12
            col-md-6
            col-lg-4">


                <div
                class="card
                h-100
                shadow-sm">


                    <div
                    class="card-body
                    text-center">


                        <h3>
                            CSS
                        </h3>


                        <p>
                            Learn CSS basics.
                        </p>


                        <button
                        class="btn
                        btn-success
                        w-100">

                            Learn

                        </button>


                    </div>


                </div>


            </div>


            <div
            class="col-12
            col-md-6
            col-lg-4">


                <div
                class="card
                h-100
                shadow-sm">


                    <div
                    class="card-body
                    text-center">


                        <h3>
                            Bootstrap
                        </h3>


                        <p>
                            Learn Bootstrap.
                        </p>


                        <button
                        class="btn
                        btn-info
                        w-100">

                            Learn

                        </button>


                    </div>


                </div>


            </div>


        </div>


    </div>


</section>