Setting column classes for different screens using Bootstrap

Question

I am trying to build my UI using Bootstrap. I am trying to set 3 divs in one row next to each other for medium and large screens. And for under 768px I would like to place them one under another.

file.html

<section className="about" id="about">
  <div className="container-fluid">
   <div className="row boxes justify-content-md-center">
    <div className="col-sm-12 col-md-4 box">
    <div className="innerBox">
      <div className="icons">
        <img src={iconEducation} className="img-responsive" />
      </div>
      <div className="box-body">
        <h3 className="box-title">Title </h3>

        <div className="box-list">
          <div className="box-list-items">
            <div className="item-ul"><img src={dot} className="img-responsive" /></div>
            <div>
              <p>Text</p>
            </div>
          </div>
          <div className="box-list-items">
            <div><img src={dot} className="img-responsive" /></div>
            <div className="item-ul">
              <p>Text</p>
            </div>
          </div>
        </div>
      </div>
    </div>
    </div>

The HTML code is the same for all three divs.

Problem

On large and medium screens I have two divs in one row and a third underneath in new row. For tablet screens the divs do not flow one under another but are still in the same row. The layout I want is two in one row and the third underneath.

file.css

.about{
  padding: 127px 0 196px 0;
}

.about .row.boxes >div{
  margin: 0 20px 0 20px;
}

.about .box{
  height: 550px; 
  width: 100%;
  background-image: linear-gradient(144deg, #fdfdfd, #f9f9f9);
}
.about .innerBox{
  margin: auto;
  color: black;
  width: 100%;
  overflow: hidden;
}
.box-list-items > div {
  display: inline-block;
}

.box-list-items img {
  height: 35%; 
  width: 35%;
}

.icons { 
  height: 95px; 
  width: 95px;
  float: right;
  margin: 7% 5% 5% 0;
}
.icons img {
  width: 100%;
  height: 100%;
}


h3.box-title{
  font-size: 2.7em;
}

As I was going through the Bootstrap docs I thought that naming the class as .col-md-4 would align my divs for above 768px in same row one next to each other and underneath would place them in kind of display: box view.

Please show a proper [mcve] that reproduces the problem. Specifying `width: 100%` for `.about .box` might interfere here. — CBroe, May 24 '18 at 12:25
You mean every `.col-md-4` for inside new row? Why? It should be able to have functions in one row as well. @soueuls — user9347049, May 24 '18 at 12:31
What is being said, is that you need to wrap your columns inside a row. — nocturns2, May 24 '18 at 13:03
@user9347049 When I commented it was not the case, or at least your snippet of code did not reflect it. — Swann, May 24 '18 at 14:05

score 2 · Accepted Answer · answered May 24 '18 at 18:08

2

theres is no use of @media only screen and all ,this will work:

<div class="container">
  <div class="row">
    <div class="col-xs-12 col-sm-4 col-md-4 col-lg-4">abc</div>
    <div class="col-xs-12 col-sm-4  col-md-4 col-lg-4">xyz</div>
    <div class="col-xs-12 col-sm-4  col-md-4 col-lg-4">123</div>
  </div>
</div>

you can check: https://jsfiddle.net/bfos8ttd/

answered May 24 '18 at 18:08

Nikhil S

3,786
4
18
32

@user9347049 what exactly do you want just placing them in some order the above code will do .but from your code it does seems so. use bootstrap instead – Nikhil S May 24 '18 at 18:16
1

This is what I did, added bootstrap classes for all screen sizes. But problem was with my css custom added. When I fixed that it worked just fine. Thank you. :) – user9347049 May 25 '18 at 09:07
@user9347049 if you have accepted the answer you can give it an upvote thanks – Nikhil S May 26 '18 at 09:20

score 1 · Answer 2 · answered May 24 '18 at 12:54

1

you need to put all the code in file.html in side a div with class row and test it again.

answered May 24 '18 at 12:54

Andy Nguyen

863
1
8
20

Sorry, I edited my code. It already there. Class `.container-fluid > .row`. – user9347049 May 24 '18 at 13:00
1

You need three box? Put another 2 within the a div and class like tat one too inside the row too, sr im on my phone so i cant type all the code – Andy Nguyen May 24 '18 at 13:07

score 0 · Answer 3 · answered May 24 '18 at 12:44

Go to this Link for bootstrap columns (col-lg-4, col-md-4, col-sm-6, col-xs-12)

And follow these media query as per your device.

    @media only screen and (min-width:1024px) and (max-width: 1200px) {
    }

    @media only screen and (min-width:992px) and (max-width: 1023px) {

    }
    @media only screen and (min-width:768px) and (max-width: 991px) {

    }
    @media only screen and ( max-width: 767px ) {
    }
    @media only screen and ( max-width: 479px ) {
    }

score 0 · Answer 4 · answered May 24 '18 at 13:16

@user9347049 This wouldn't fit in the comments, so I'm putting it here for clarity.

Your container-fluid lets you use the entire width of the screen, but it's still just a container, that contains your rows and columns. You create rows, then, you add columns. As in:

<div class="container"> <!-- you can change this class to container-fluid class if you like -->
    <div class="row">
        <div class="col-md-4">
        </div>
        <div class="col-md-4">
        </div>
        <div class="col-md-4">
        </div>
    </div>
</div>

You can only have one container class. The row div contains all your cols divs for that row. You can have as many rows of columns as you need. If you adapt you code, you should start getting some of the results you're looking for before you look at the media query side of it.

Setting column classes for different screens using Bootstrap

4 Answers4