how bootstrap layout works in different screen size

Question

I want to build a page in bootstrap. It has different layout in different screen.

I wrote the code as below (If the code is wrong below, then how to write that?)

<div class="container-fluid">
    <div class="row">
        <!--Large screen starts here -->
        <div class="col-lg-12">
            <p class="page-top1"><small>Content 1</small></p>
            <p class="page-top2">Content 2</p>
            <p class="page-top3">Content 3</p>
        </div>
        <!--Large screen ends here -->
        <!--Medium screen starts here -->
        <div class="col-md-12">
            <p class="page-top1"><small>Content 1</small></p>
            <p class="page-top2">Content 2</p>
            <p class="page-top3">Content 3</p>
        </div>
        <!--Medium screen ends here -->
        <!--Small screem starts here -->
        <div class="col-sm-6">
            <p class="page-top1"><small>Content 1</small></p>
        </div>
        <div class="col-sm-3">
            <p class="page-top2">Content 2</p>
        </div>
        <div class="col-sm-3">
            <p class="page-top3">Content 3</p>
        </div>
        <!--Small scren ends here -->
    </div>
</div>

So i thought if screen size is bigger, medium or small then col-lg, col-md or col-sm will be chooses automatically. But that doesn't happen. All the codes are running regardless of screen size.

If i have to write media query for each screen size, then which one i should use? Col-lg or col-md or col-sm? And why?

I hope it might be very basic silly question. But i just want to understand it.

Edit

Thanks for mentioning duplicate. With reference to the marked duplicate question i did the following changes.

<div class="container-fluid">
    <div class="row">
        <div class="col-lg-6 col-md-6 hidden-sm hidden-xs">
            <p class="page-top1"><small>Content 1</small></p>
        </div>
        <div class="col-lg-3 col-md-3 hidden-sm hidden-xs">
            <p class="page-top2">Content 2</p>
        </div>
        <div class="col-lg-3 col-md-3 hidden-sm hidden-xs">
            <p class="page-top3">Content 3</p>
        </div>
    </div>
</div>

It worked fine. But there are some space between each p. What i need to do if that space should not be there. ref the image

Also i specify hidden-sm and hidden-xs. So in mobile screen this div should be hided right? Why the div is still showing?

Possible duplicate of [Media Queries: How to target desktop, tablet and mobile?](https://stackoverflow.com/questions/6370690/media-queries-how-to-target-desktop-tablet-and-mobile) — Tomm, Oct 06 '17 at 06:32
HI, You need to use visible-xs or visible-sm or visible-md or visible-lg. Or hidden-xs, hidden-sm..... — Lubos Voska, Oct 06 '17 at 06:33
I asked this question a couple of years back. How silly it was :P but I was not aware of this. Though this question has some negative scores, though it is too basic, still it might be useful for someone who has the same question as I had. — siddiq, Sep 10 '19 at 04:02

Carl Binalla · Accepted Answer · 2017-10-06T06:38:41.710

2

You don't need to re-create every element for each break point, you can combine the classes instead.

<div class="container-fluid">
    <div class="row"> 
        <div class="col-lg-12 col-md-12 col-sm-12">
            <p class="page-top1 col-md-12 col-sm-6"><small>Content 1</small></p>
            <p class="page-top2 col-md-12 col-sm-3">Content 2</p>
            <p class="page-top3 col-md-12 col-sm-3">Content 3</p>
        </div>
    </div>
</div>

I'm not really sure why you need to have a wrapper for each p in the sm break point, but maybe you need it, so I used col-md-12 col-sm-* for each p so that before the sm break point, all p will be using 12 columns

edited Oct 06 '17 at 06:38

answered Oct 06 '17 at 06:35

Carl Binalla

5,393
5
27
46

I use different class each `p` because each `p` has different background color. – siddiq Oct 06 '17 at 06:36
Ah sorry, what I mean is each `p` have its own wrapper instead of one wrapper like the rest – Carl Binalla Oct 06 '17 at 06:37
But in mobile screen each `p` should come one below other. – siddiq Oct 06 '17 at 06:38
user replace with
– rajnik faldu Oct 06 '17 at 06:41
I don't understand what you mean by `one by one`, it would be better if you could provide a visual of your expected result. – Carl Binalla Oct 06 '17 at 06:42
@rajnikfaldu What do you mean? – Carl Binalla Oct 06 '17 at 06:42
use media query for mobile and give a property of p tag= display:inline-block; so in mobile screen each p should come one after one not below – rajnik faldu Oct 06 '17 at 06:48
@rajnikfaldu It would be better if you include your suggestions in your answer – Carl Binalla Oct 06 '17 at 06:51

score 0 · Answer 2 · edited Oct 06 '17 at 06:48

0

It should be like this:

<div class="container-fluid">
    <div class="row">
        <!--Large screen starts here -->
        <div class="col-lg-12 col-md-12 col-sm-12">
            <p class="page-top1"><small>Content 1</small></p>
            <p class="page-top2">Content 2</p>
            <p class="page-top3">Content 3</p>
        </div>
    </div>
</div>

edited Oct 06 '17 at 06:48

Phani Kumar M

4,564
1
14
26

answered Oct 06 '17 at 06:35

rajnik faldu

97
7

Himansingh · Answer 3 · 2017-10-06T06:57:11.670

0

Bootstrap need to understand which classes to be applied. When you use class like col-md-12, 12 cols are automatically occupied by that element for medium and large devices. This happens because bootstrap uses mobile-first approach. So you can do something like this

<div class="container-fluid">
<div class="row">
    <div class="col-sm-12">
        <p class="page-top1"><small>Content 1</small></p>
        <p class="page-top2">Content 2</p>
        <p class="page-top3">Content 3</p>
    </div>    
</div>

col-sm-12 This would occupy 12 cols on small, medium and larger devices automatically. No need to write col-lg-12 col-sm-2 and col-md-12 seperately.

Refer Bootstrap-3 grid explanation

PS - If you are using bootstrap4 then instead of col-xs-12 use col-12

edited Oct 06 '17 at 06:57

answered Oct 06 '17 at 06:46

Himansingh

36
3

My bad, it's actually replacement of col-xs-* . I shall edit it. Thank you – Himansingh Oct 06 '17 at 06:51
You said `col-sm-12`, yet the next line said it will occupy **4** columns, rather than **12** columns. – Carl Binalla Oct 06 '17 at 06:53
on that note, why `col-12 col-xl-8` on desktop & laptop looks the same ? laptop screen is much smaller – Ricky Levi Apr 23 '19 at 14:23

how bootstrap layout works in different screen size

3 Answers3