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>
Related
I am using this structure but
<div class="row">
<div class="col-sm-4">
<div class="card">
Your card
</div>
</div>
<div class="col-sm-4">
<div class="card">
Your card
</div>
</div>
<div class="col-sm-4">
<div class="card">
Your card
</div>
</div>
<div class="col-sm-4">
<div class="card">
Your card
</div>
</div>
<div class="col-sm-4">
<div class="card">
Your card
</div>
</div>
<div class="col-sm-4">
<div class="card">
Your card
</div>
</div>
<div class="col-sm-4">
<div class="card">
Your card
</div>
</div>
</div>
For some reason the has as much padding as it would take to "match" the next div in the horizontal row. For example, if the first div is text, then the second is text, and the third is an image...the first two divs "grow" to be the size of the third. I thought with this Bootstrap 4 it was supposed to be flexible? Thanks.
Bootstrap 4 utilizes flexbox (display: flex) for a lot of it's layout, including it's cards. That is the reason that all the cards grow in accordance to it's siblings. You can learn more about flexboxes here:
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
and
https://demos.scotch.io/visual-guide-to-css3-flexbox-flexbox-playground/demos/
You're using col-sm-4 which will make all the columns be the same size which may be what you're referring to as the first two divs grow. If you mean something else, I would look into how Bootstrap 4 works with flexbox which may also help you understand how the columns act in Bootstrap 4
Sometimes the images can push out the divs. Set a style to the image to be width: 100% and see if that makes any difference
Ok this works. Thanks everyone above for your help, I took many things from it to get the answer. It turns out if I'm reading this correctly flex itself won't allow for "three columns with shrunken divs" so one div can be bigger than the others but they all shrink to their own respective sizes around their content. So I used Masonry. I just included the .js in my head section as a script reference then added the below. If you aren't using .NET (meaning you're using PHP) just erase out the itemtemplate and repeater stuff...the code is the same for you.
<div class="row" style="display:flex;" data-masonry='{ "gutter": 0, "itemSelector": ".col-4" }'>
<asp:repeater id="ItemsList" runat="server">
<div class="card">
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>
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
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 -->