Small Div for Desktop, Large Full Width Div for Mobile (Bootstrap)

Question

I am building a website using Bootstrap 3, and I have multiple small divs on a page. I want to control their size for the desktop view and have them be the full width of the screen for the mobile view.

This is what I am thinking of:

I have tried putting each small div in a column and then setting the width to 100%, but that gives me this result:

I haven't used bootstrap for very long, so I wasn't sure what to look for. I dug around the w3 schools website and found something about box-sizing , but it doesn't do what I described above.

The question here seems similar to mine, but I didn't quite understand the answer and didn't want to add to an old question.

My question is, how can I achieve this effect?

Thanks for any help in advance!

Answer 1

Use the col-md-3 class to divide the container to 4 columns. col-md-* targets the screen size which is larger than the small devices.

Learn more about the grid system here: Bootstrap Grid

 [class^=col] { background: tomato; color: white; font-weight: bold; /* Below properties used to create margin between the columns */ background-clip: padding-box; border: 5px solid transparent; } 

 <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" /> <div class="container"> <div class="row text-center"> <div class="col-md-3"> 1 </div> <div class="col-md-3"> 2 </div> <div class="col-md-3"> 3 </div> <div class="col-md-3"> 4 </div> </div> </div>