CODEWITHSUNDEEP
htmltwitter-bootstrapbootstrap-4bootstrap-5
Omair Munir
Omair Munir

Reputation: 143

5 equal columns for large screen only - bootstrap 5

I am editing this question to make my question more clear.

I know that bootstrap considers a screen as 12 columns and you can use classes like col-md- or col-lg- to code it for different screens. What my question is: is there a way i can code my divs to be in 5 equal width divs for medium and large screens but for sm or xs screens the divs take full width i-e 12 columns?

<div class="row">
   <div class="col">
      1 of 5
   </div>
   <div class="col">
      2 of 5
   </div>
   <div class="col">
      3 of 5
   </div>
   <div class="col">
      4 of 5
   </div>
   <div class="col">
      5 of 5
   </div>
</div>

The above code will create 5 equal columns for all screens - But I want it to be only for medium and large screens. For small screens, I want a full-width column.

Upvotes: 1

Views: 1510

Answers (2)

Prince Hatty
Prince Hatty

Reputation: 26

.aligin {
  margin: auto !important;
  text-align:center;
}
<div class="row aligin">
  <div class="col-md">
    1 of 5
  </div>
  <div class="col-md">
    2 of 5
  </div>
  <div class="col-md">
    3 of 5
  </div>
  <div class="col-md">
    4 of 5
  </div>

Upvotes: 0

Richard Deeming
Richard Deeming

Reputation: 31208

Check the documentation - you need to use col-md to specify that you only want columns on medium screens or larger.

<div class="row">
   <div class="col-md">
      1 of 5
   </div>
   <div class="col-md">
      2 of 5
   </div>
   <div class="col-md">
      3 of 5
   </div>
   <div class="col-md">
      4 of 5
   </div>
   <div class="col-md">
      5 of 5
   </div>
</div>

Upvotes: 3

Related Questions