CODEWITHSUNDEEP
htmlcsstwitter-bootstrapbootstrap-5
Gandalf
Gandalf

Reputation: 13683

Changing column classes on mobile or on desktop

I have a simple row with two columns

<div class="row">
<div class="col-9">
hello
</div>
<div class="col-3">
world
</div>
</div>

However due to the small screens i would like change the column classes if on mobile and so my classes would be

<div class="row">
<div class="col-8">
hello
</div>
<div class="col-4">
world
</div>
</div>

is there a method i can use to switch the classes like this? I am using thymeleaf with spring boot for backend and bootstrap 5 for frontend.

Upvotes: 0

Views: 116

Answers (2)

C&#233;dric
C&#233;dric

Reputation: 2629

As Kuladeep Surebathina mentioned or ths in comment, you can use Bootstrap breakpoints.

[...] media query classes for 600px and below

According to Customize Bootstrap 4's grid-system Breakpoints accepted answer, you can customize the provided breakpoints.

Upvotes: 1

Kuladeep Surebathina
Kuladeep Surebathina

Reputation: 127

You can use the below method to apply different classes for different screen sizes

<div class="row">
<div class="col-lg-9 col-8">
hello
</div>
<div class="col-lg-3 col-4">
world
</div>
</div>

You can replace the breakpoints based on your screen size requirements

refer to the breakpoints in this link https://getbootstrap.com/docs/5.2/layout/grid/#grid-options

Upvotes: 3

Related Questions