CODEWITHSUNDEEP
bootstrap-4
Yevgeniy
Yevgeniy

Reputation: 998

Bootstrap width class/attribute not working

Using bootstrap 4.5 (with NextJS 11.1 on ReactJS 18.2)

In the below snippet, per inspection with Chrome dev tools, the divWithNoWidthSet div is not getting its width attribute set despite having w-80 and/or mw-80 class. I can see the class attribute in generated source, but no width attribute exists in the inspection panel.

I saw posts on SO where the cause of similar behavior was the div containing an image with img-fluid class, but such is not the case here. Any help appreciated--thanks!

<div className="m-auto w-30 rounded d-block" style={{ height: '300px', backgroundColor: 'whitesmoke'}}  >
  <div style={{ height: '150px'}} >
    <a href={...} target="_blank" rel="noopener"><img src={...`}  className="img-fluid h-150 hm-150 mw-50 d-block m-auto" alt={...} /> </a>
  </div>
  <a href={...} target="_blank" rel="noopener">
    <div id="divWithNoWidthSet" className="w-80 mw-80 text-center m-auto p-3" style={{border: '1px solid red'}}>
      <h5>{...}</h5>
      <p>{...}</p>
    </div>
  </a>
</div>

enter image description here enter image description here

Upvotes: 0

Views: 168

Answers (1)

Rok Benko
Rok Benko

Reputation: 22890

As stated on official Bootstrap website:

Width and height utilities are generated from the $sizes Sass map in _variables.scss. Includes support for 25%, 50%, 75%, 100%, and auto by default. Modify those values as you need to generate different utilities here.

If you want to use the class w-80 then you need to add it in _variables.scss. By default, there's no w-80 class.

Upvotes: 1

Related Questions