CODEWITHSUNDEEP
csstwitter-bootstrap
Imo
Imo

Reputation: 1475

How to place divs on a webpage in rows of three with bootstrap

How can I place six divs on a web page in two rows and three columns? I tried the follwoing code with bootstarp but the divs do not appear is a row rather after each other in a column 

<div class="row">
  <div class="span4" id="chart_1"></div>
  <div class="span4" id="chart_2"></div>
  <div class="span4" id="chart_3"></div>
</div>

fiddle: https://jsfiddle.net/r2qepmk0/3/

Edit When I add col-xs-4 class to my divs my d3 charts stop rendering is there another possible solution to this?

Upvotes: 1

Views: 148

Answers (5)

Bert Peters
Bert Peters

Reputation: 1542

You just need to wrap your <div>s in a <div class="col-xs-4"> and everything should be good.

Currently, the bootstrap classes are interfering with the styles applied by the D3 js, which creates the result seen in your fiddle. You should also remove the class="span4" because, as already mentioned, that is bootstrap version 2.x and you are using 3.x.

Upvotes: 0

Maria Murillo
Maria Murillo

Reputation: 1

You can put six divs in two rows and three columns by doing something like this:

<div class="row">
  <div class="span4" id="chart_1"></div>
  <div class="span4" id="chart_2"></div>
  <div class="span4" id="chart_3"></div>
</div>
<div class="row">
  <div class="span4" id="chart_4"></div>
  <div class="span4" id="chart_5"></div>
  <div class="span4" id="chart_6"></div>
</div>

Remember that you can use the class row-fluid to get more flexibility in your web page

Upvotes: -1

worc
worc

Reputation: 3786

One suggestion first, wrap your layout in a bootstrap container class. By default the row class has -15px left and right margins, while the container class has 15px of left and right padding. They're meant to work in tandem and bring your content flush to the outside of the container.

Secondly, use the col- syntax. 

<div class="container">
    <div class="row">
        <div class="col-xs-4" id="chart_1">23</div>
        <div class="col-xs-4" id="chart_2">45</div>
        <div class="col-xs-4" id="chart_3">34</div>
    </div>
    <div class="row">
        <div class="col-xs-4" id="chart_3">34</div>
        <div class="col-xs-4" id="chart_1">23</div>
        <div class="col-xs-4" id="chart_2">45</div>
    </div>
</div>

https://jsfiddle.net/0vu83eru/1/

Upvotes: 1

Tim Lewis
Tim Lewis

Reputation: 29258

You are using bootstrap 2.* syntax while your fiddle has bootstrap 3.3.5 css included. Change your column syntax to this:

<div class="row">
  <div class="col-xs-4" id="chart_1">23</div>
  <div class="col-xs-4" id="chart_2">45</div>
  <div class="col-xs-4" id="chart_3">34</div>
</div>

And it should work fine for you. Please refer to the documentation for the current version of Bootstrap.

And your updated JSFiddle

Upvotes: 1

Adam Buchanan Smith
Adam Buchanan Smith

Reputation: 9439

Use class="col-xs-4" see fiddle https://jsfiddle.net/r2qepmk0/1/

And what you want about w3fools, but this link explains it well http://www.w3schools.com/bootstrap/bootstrap_grid_basic.asp

Upvotes: 1

Related Questions