CODEWITHSUNDEEP
widthbootstrap-5card
Ken
Ken

Reputation: 31

Bootstrap 5 variable card width

I am using bootstrap 5 and have a card on a page, it is the only thing on the page.

I am fairly new to bootstrap, long time programmer.

On a phone the width of the card is great, on a monitor its width is way too wide. What is the best way for the card to be 100% vw on xs, sm devices but a smaller width on larger screens?

<div class="container-fluid">
  <div  class="row justify-content-xs-center">
    <div class="col">
      <div class="card">

Upvotes: 0

Views: 1122

Answers (2)

Hari Perisetla
Hari Perisetla

Reputation: 176

You should be checking out bootstrap grid system to work with the screen sizes. In your code the <div class="col"> means the col is automatic instead of any specified width. You can use <div class="col-md-6">, here md means from medium to higher the col with is going to be 6. That achieves your expected output. Also in <div class="row justify-content-xs-center"> xs is not required because, xs simply says the content should be centered only in xs, instead you can simply use justify-content-center

Now the code should look something like this:

<div class="container-fluid">
  <div  class="row justify-content-center">
    <div class="col-md-6">
        <div class="card">
            Text here
        </div>
    </div>
  </div>
</div>

Hope this helps!

Upvotes: 1

Shikma Ravi
Shikma Ravi

Reputation: 11

you should use media query.if there is little more code it would be helpful to check.

Upvotes: 0

Related Questions