0

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: enter image description here

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

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!

Community
  • 1
  • 1
JustBlossom
  • 1,259
  • 3
  • 24
  • 53

1 Answers1

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>
m4n0
  • 29,823
  • 27
  • 76
  • 89
  • Thanks for such a thorough answer! You also said something that clarified the difference between sm, md and lg. I have read a lot about it, but I like the way you put it: those target the screen size. Up until now, I've just used lg by default because I read that one was for desktops. – JustBlossom Jul 18 '15 at 22:03