swim360's avatar

Desktop View on Small Screen Bootstrap 5

I am using a bootstrap 5 template to build a web app. Its working perfect on wider screens but when I view it on smaller screen it becomes a desktop view.

I want the cards to be shown under each other like its normal in bootstrap on smaller screen. I am unable to see where the issue is why it becomes a desktop view and cards don't get under each other. I am using rows and columns for this purpose.

https://www.loom.com/share/a63bb62c56ec4800a6073ba5bde4fa8d?focus_title=1&muted=1&from_recorder=1

Here is the visual representation of how cards are looking on smaller screens.

Any guidance from experienced person is much appreciated.

0 likes
3 replies
OussamaMater's avatar

You need to use better breakpoints, follow up the docs

And here is an example

An explained example:

<div class="col-12 col-sm-6 col-md-3">
	content here
</div>

So what this does is, if the screen is small (like phones), the div will take the whole row so 12 columns, if it's small (like tablets) then it will take half the row only so 6 columns, but if the screen is medium (laptop) or bigger it will only take 3/12 of the screen so 3 columns.

And I saw the video you provided, in order to fix that add col-12 in the divs, so the take full space when small.

1 like
swim360's avatar
swim360
OP
3 years ago
Best Answer
Level 1

@OussamaMater I was missing the following meta tag in head tag.

<meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no">

Thankyou for replying. Its resolved.

Please or to participate in this conversation.