How to make a div width responsive?

Question

I have the following style:

.center-box {
    align-items: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-content: center;
}

And the following HTML:

<div class="center-box" style="background-color: lightgoldenrodyellow;">
    <div class="d-flex" style="background-color: lightcyan;">
        <i class="far fa-info-circle fa-3x"></i>
    </div>
    <div class="d-flex pt-2" style="background-color: lightgreen;">
        <div class="h4">Caption comes here</div>
    </div>
    <div class="d-flex pt-2" style="max-width: 25%; background-color: lightcoral;">
        <div class="row">
            <div class="col-12">
                Some long description text comes here. It can be multiple lines and should provide enough information to the user.
            </div>
            <div class="col-12">
                <div class="float-left pt-4">
                    Options:
                    <ul>
                        <li>Option 1</li>
                        <li>Option 2</li>
                        <li>Option 3</li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>

And the result is on desktop is this:

However, on mobile it looks like this:

Is there a cleaner way to make the width responsive? Do I need to use media breakpoints?

You combine three ways of styling your HTML: Inline styling, Bootstrap classes, and CSS classes. That's a bit much. Two would do. Anyway, what you see is what you asked for. A red div with max-width: 25%; is, at most, 25% wide on every screen. Perhaps you wanted a more absolute maximum width? Like max-width: 400px;? Anyway, yes, most responsive websites use media breakpoints, and Bootstrap can help you a bit to learn about this. Just follow the examples in the documentation. It will take time to understand it all. — KIKO Software
– KIKO Software, Commented Jun 21 at 8:41

yoduh · Accepted Answer · 2025-06-23 06:32:05Z

Bootstrap includes responsive styling via its grid system, which you are already using, but you're not yet taking advantage of breakpoints. With breakpoints, you can set a certain number of columns based on different screen sizes. For example on a mobile device you would want to use the full width, or 12 columns, but on large desktop screens maybe only use 8 columns, which would take up 66.66% of the space. You would accomplish that using these specific classes:

<div class="col-12 col-lg-8">

Behind the scenes, these classes are setting the relevant media queries for you, which you can see when you inspect the DOM:

@media (min-width: 992px) {
    .col-lg-8 {
        flex: 0 0 auto;
        width: 66.66666667%;
    }
}

Here is how I would edit your code to take advantage of Bootstrap's responsive grid classes.

<div class="container center-box" style="background-color: lightgoldenrodyellow;">
  <div class="row" style="background-color: lightcyan;">
    <i class="far fa-info-circle fa-3x"></i>
  </div>
  <div class="row pt-2" style="background-color: lightgreen;">
    <div class="h4">Caption comes here</div>
  </div>
  <div class="row pt-2 justify-content-center">
    <div class="col-12 col-lg-8" style="background-color: lightcoral;">
      <div>
        Some long description text comes here. It can be multiple lines and should provide enough information to the user.
      </div>
      <div class="float-left pt-4">
        Options:
        <ul>
          <li>Option 1</li>
          <li>Option 2</li>
          <li>Option 3</li>
        </ul>
      </div>
    </div>
  </div>
</div>

Some corrections were needed. Bootstrap grids should always follow the pattern of container -> rows -> columns, so some other classes had to be moved around. Another important change was removing the max-width: 25%; on the lightcoral div, as it was preventing its width from being properly responsive.

Codepen demo

ScriptScorpion · Accepted Answer · 2025-06-21 14:37:37Z

0

Ways to fix your problem:

Set a Default Width for the .center-box Container:

.center-box {
   align-items: center;
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-content: center;
   width: 100%; /* or max-width: some-reasonable-pixel-value; */
   max-width: 600px;
}

Make sure, that your HTML file located in <head>.

If none above helped, let me know in comments.

answered Jun 21 at 14:37

ScriptScorpion

3131 silver badge14 bronze badges

Collectives™ on Stack Overflow

How to make a div width responsive?

2 Answers 2

Comments

Ways to fix your problem:

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Ways to fix your problem:

Comments

Your Answer

Sign up or log in

Post as a guest

Related