Adjusting column styles on mobile or desktop devices

Question

My row has two columns

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

But I want to change the column classes for small screens, so they would be like this:

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

Is there a way to switch the classes based on screen size? I'm using thymeleaf with spring boot for backend and bootstrap 5 for frontend.

Answer 1

Answer №1

If you want to assign different classes for various screen sizes, you can utilize the method below

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

Feel free to modify the breakpoints according to your specific screen size needs

To find out more about the available breakpoints, you can check out this link https://getbootstrap.com/docs/5.2/layout/grid/#grid-options

Answer 2

If you want to assign different classes for various screen sizes, you can utilize the method below

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

Feel free to modify the breakpoints according to your specific screen size needs

To find out more about the available breakpoints, you can check out this link https://getbootstrap.com/docs/5.2/layout/grid/#grid-options

Answer 3

In the discussion, Kuladeep Surebathina highlighted the use of Bootstrap breakpoints, as also noted by ths.

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

An answer provided at Customize Bootstrap 4's grid-system Breakpoints explains how to customize these breakpoints.

Answer 4

In the discussion, Kuladeep Surebathina highlighted the use of Bootstrap breakpoints, as also noted by ths.

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

An answer provided at Customize Bootstrap 4's grid-system Breakpoints explains how to customize these breakpoints.