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?
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/
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
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
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.
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
Related
I am having trouble with my css. I am trying to have my contact information, the quote, and my contact form to be in the same row but different columns. And also why is it that my html doesn't all fit on one page, I can scroll to the rigth and there's just empty white space. I figure its because I added -1.23em in my navbars margin; However, I only did this because my navbar was not filling the whole page. Here is a link to my gist and bitballon. Thank you in advance.
https://gist.github.com/bklynbest/a19565b1b5289f045919e76d657848ea
http://sad-goodall-e4f115.bitballoon.com
You have a .row div in the nested directly under the body on line 103 that is causing the page to spread past 100% width
Bootstrap requires a containing element to wrap site contents and
house our grid system. You may choose one of two containers to use in
your projects. Note that, due to padding and more, neither container
is nestable. bootstrap containers
Regarding the contact info your nesting and class names are not correct, you currently have the following:
<div class="container-fluid" id="contact">
<div class="row">
<div class="column">
<div class="col-xs-12 col-md-12">
<div id="quote">...</div>
</div>
<div class="col-lg-4 col-md-4">
<div class="contact">...</div>
</div>
</div>
</div>
</div>
<form>
you will need to change this to follow bootstrap3 grid conventions, something like the following:
<div class="container">
<div class="row" id="contact">
<div class="col-sm-4">
<div id="quote">...</div>
</div>
<div class="col-sm-4">
<div class="contact">...</div>
</div>
<div class="col-sm-4">
<form>
</div>
</div>
</div>
I can't seem to get this well to align with the center of the page. It seems like it should be easy but I can't figure it out.
You can use offset classes provided by Bootstrap
<div class="container">
<div class="row">
<div class="col-lg-6 col-lg-offset-3">
<div class="well">
Content
</div>
</div>
</div>
</div>
CODEPEN
Bootstrap is based on a grid system of 12 columns. If you want the above message submission box centered I would place it in a column space of ~6 and have ~3 columns on each side of it like this:
<div class="row">
<div class="col-xs-3">[Empty DIV]</div>
<div class="col-xs-6">[Summision Box]</div>
<div class="col-xs-3">[Empty DIV]</div>
</div>
I'm using Bootstrap 3.0 and my question is:
can this block
<div class="under col-xs-12">fdf</div>
be placed in the code the way as it is shown here
<div class="row">
<div class="col-xs-8">aaa</div>
<div class="col-xs-4">bbb</div>
<div class="under col-xs-12">fdf</div>
</div>
so that the text fdf is under aaa and bbb
I think it anyway should be under, as col-xs-8 + col-xs-4 cover the whole width, however I'm confused as
div.under{
border:1px solid black;
}
wraps not just one block fdf, but the whole content including aaa and bbb.
You may take a look here:
jsFiddle
So, what's the proper way, from Bootstrap prospective, to make that black border wrap only the second line fdf?
The aaa and bbb columns are floated, so you need to add clear:both; to your under class.
jsFiddle example
Bootstrap way of doing this
This is a similar answer as one posted by j08691, But you are using Bootstrap so we will look at the Bootstrap way of doing this
Bootstrap has provided its own built-in class clearfix for this
pupose(to clear the float)
see this: http://jsfiddle.net/DTcHh/4487/
<div class="row">
<div class="col-xs-8">aaa</div>
<div class="col-xs-4">bbb</div>
<div class='clearfix'></div>
<div class="under col-xs-12 ">fdf</div>
</div>
It seems the "Bootstrap way" is to make a nested row. See how they did it here under "Nested Scaffolding": http://getbootstrap.com/2.3.2/scaffolding.html.
<div class="row">
<div class="col-xs-8">aaa</div>
<div class="col-xs-4">bbb</div>
<div class = "row">
<div class="under col-xs-12">fdf</div>
</div>
</div>
And what about creating an other row?
<div class="row">
<div class="col-xs-8">aaa</div>
<div class="col-xs-4">bbb</div>
</div>
<div class="row">
<div class="under col-xs-12">fdf</div>
</div>
Because of inherited html parts when using template engines such as twig (PHP) or jinja2 (python), I may need to nest rows like below:
<div class="container">
<div class="row">
<div class="row">
</div>
...
<div class="row">
</div>
</div>
<div class="row">
...
</div>
</div>
Then should I wrap inner rows in column div like below:
<div class="container">
<div class="row">
<div class="col-xs-12">
<div class="row">
</div>
...
<div class="row">
</div>
</div>
</div>
<div class="row">
...
</div>
</div>
Or should they be wrappered in container again?
You shouldn't wrap the nested rows in .container elements, but you should nest them in columns. Bootstrap's row class has negative left and right margins that are negated by the col-X classes' positive left and right margins. If you nest two row classes without intermediate col-X classes, you get double the negative margins.
This example demonstrates the double negative margins:
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">
<!-- GOOD! Second "row" wrapped in "col" to negate negative margins. -->
<div class="container">
<div class="row">
<div class="col-xs-12" style="background: lime;">
<div class="row">
Here's my text!
</div>
</div>
</div>
</div>
<!-- BAD! Second "row" missing wrapping "col", gets double negative margins -->
<div class="container">
<div class="row">
<div class="row" style="background: tomato;">
Where's my text?
</div>
</div>
</div>
For further reading, The Subtle Magic Behind Why the Bootstrap 3 Grid Works explains the column system in great and interesting detai.
You shouldn't wrap them in another container - containers are designed for a typical one-page layout. Unless it would look good / work well with your layout, you may want to look into container-fluid if you really want to do this.
tl;dr don't wrap in another container.
I'm having a really simple problem with css but the solution is not coming to me. It's about positioning elements in a grid, I want the grid elements to look like this, but instead they are coming out to look like this. I tried putting one tag inside the other and then attempting to remove the box model from it (margin and padding) but the div is offset. I've tried nesting both inside a div tag but that doesn't work either.
I attempted to do a jsfiddle but it's not loading correctly. Fiddle . required random code below of the html.
<div class="container">
<div class="row">
<div class="col-md-12" style="height:85.3px">empty top</div>
</div>
<div class="row">
<div class="col-md-4" style="height:85.3px">logo</div>
<div></div>
<div class="col-md-7" style="height:40px">head text
<div class="col-md-7" style="margin-left:0px;padding-left:0px;margin-top:40px;box-sizing:border-box;">nav</div>
</div>
</div>
</div>
Just fyi the bootstrap col-md-1 through col-md-12 are bootstraps grid positioning system. I think they have to add up to 12 to form a single line. Here is the bootstrap html i am using.
and the grid css . and bootstrap
Your jsfiddle is not displaying correctly because the default iframe size is too small, but you can change the width to view the page in a manner consistent with your problem. Your problem is that you have a div nested inside another div by mistake. Try the following instead:
<div class="container">
<div class="row">
<div class="col-md-12" style="height:85.3px">empty top</div>
</div>
<div class="row">
<div class="col-md-4" style="height:85.3px">logo</div>
<div class="col-md-8" style="height:45.3px">head text</div>
<div class="col-md-8" style="height:40px;">nav</div>
</div>
</div>
<!-- /container -->