htmlcsstwitter-bootstrapbootstrap-5

Make size utility of Bootstrap 5 responsive

In the Bootstrap docs I learnt how to use the sizing utility. For example:

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>


<div class="card w-75">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <h6 class="card-subtitle mb-2 text-body-secondary">Card subtitle</h6>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
    <a href="#" class="card-link">Card link</a>
    <a href="#" class="card-link">Another link</a>
  </div>
</div>

With the w-75 class I can specify the width of the card relative to the parent. But how can I make responsive this size?

For example, I want to make it full size (w-100) when the viewport is < md. What is the right syntax? I can't find this information in the docs.

Solution

  • That isn't provided by Bootstrap because it's usually a better strategy to create a structural grid which constrains the cards, and let the cards fill the grid. Have a look at the grid docs. It would be somewhat redundant for Bootstrap to provide all the same responsive behavior in two different ways.

    If you still want to go this route, simply create your own custom classes and use Bootstrap's breakpoint sizes in your media queries:

    .my-card-sizer {
  width: 100%;
}

@media (min-width: 768px) {
  .my-card-sizer {
    width: 75%;
  }
}