CODEWITHSUNDEEP
htmltwitter-bootstrapcss
Alex. S.
Alex. S.

Reputation: 147206

How to distribute evenly a set of same width boxes inside of a bootstrap fluid container?

How to distribute evenly a set of same width boxes inside of a fluid container?

I have the following:

<div class="fluid-container">
  <span>some text</span>
  <span>some text2</span>
  ...
  <span>some textN</span>
</div>

I want to achieve this result of nicely even spaced boxes where each pink box containing a given text is always of the same width inside of the blue fluid container:

Desired layout

I tried to set up boxes inside of it, but then I get them one after each other in the next row, not using the lateral space optimally:

Result with boxes stacking up but not using lateral space

If I don't use anything in the text (like the span I used), then the fluid container does its trick but the text is not evenly spaced (in this case the yellow boxes are text that is not wrapped with any tag):

Result of fluid container class wrapping a bunch of unwrapped text

What class/css code should I use to organize and wrap the text so it result in same width boxes? The number of boxes is not known.

Upvotes: 0

Views: 2745

Answers (3)

Nenad Vracar
Nenad Vracar

Reputation: 122047

If you want to do this without any framework you can use Flexbox

.fluid-container {
  display: flex;
  background: #5B9BD5;
  flex-wrap: wrap;
  padding: 20px;
}
span {
  flex: 0 0 calc(33.33% - 20px);
  background: #F8CBAD;
  min-height: 50px;
  margin: 10px;
}
@media(max-width: 768px) {
  span {
    flex: 0 0 calc(100% - 20px);
  }
}
<div class="fluid-container">
  <span>some text</span><span>some text2</span><span>some textN</span><span>some text</span><span>some text2</span><span>some textN</span><span>some text</span><span>some text2</span><span>some textN</span><span>some text</span><span>some text2</span><span>some textN</span>
</div>

Upvotes: 1

Spencer Rohan
Spencer Rohan

Reputation: 1939

I'm not entirely sure why you want to use a 'fluid grid' specifically. Unless you don't want it to collapse to a row when on mobile.

<div class="row">
  <div class="col-xs-6 col-md-4">col 1</div>
  <div class="col-xs-6 col-md-4">col 2</div>
  <div class="col-xs-6 col-md-4">.col 3</div>
</div>

http://getbootstrap.com/css/#grid-example-fluid

Upvotes: 2

Rachel S
Rachel S

Reputation: 3920

http://getbootstrap.com/css/#grid

Bootstrap includes a responsive, mobile first fluid grid system that appropriately scales up to 12 columns as the device or viewport size increases. It includes predefined classes for easy layout options, as well as powerful mixins for generating more semantic layouts.

<div class="row">
  <div class="col-md-4">text</div>
  <div class="col-md-4">text</div>
  <div class="col-md-4">text</div>
</div>

Upvotes: 2

Related Questions