See Bootply for explanation
In my demo above, try to hover on the first box, others get affected. I expect it would be flexible like pinterest layout. I tried overflow and height thing but it doesn't solve my problem.
I wouldn't want to change the markup as it suits my case perfectly.
You'll need to use Bootstrap's column reset element between pairs of boxes, and hide them for mobile:
<div class="row">
<div class="col-lg-6">
<div class="productWrap"></div>
</div>
<div class="col-lg-6">
<div class="productWrap"></div>
</div>
<!-- Add the extra clearfix for only the required viewport -->
<div class="clearfix hidden-xs-block"></div>
<div class="col-lg-6">
<div class="productWrap"></div>
</div>
<div class="col-lg-6">
<div class="productWrap"></div>
</div>
...
</div>
Demo
http://getbootstrap.com/css/#grid-responsive-resets
As was suggested, rows would also work. To the contrary of your comment above, you can use nested rows and not affect your orange box sidebar.
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 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>
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
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 -->
Related to my earlier question
I would like to be able to align the pull-right div to the bottom of a div.
I have the following markup:
<div class="container">
<div class="container">
<div class="footer-images">
<img src="img1">
<div class="pull-right">
<img src="img2">
<img src="img3">
</div>
</div>
</div>
<div class="container">
<div class="copyright">
<p>© Some Company YYYY</p>
</div>
</div>
</div>
I can't figure out how to get the pull-right (or other div classes) to align to the bottom of the footer-images div class.
If I understand the question right. You just have to make sure you float the elements inside it (the tags). But it will only be aligned from the top if you have different image sizes.
Would be much more easier to give you advice if you can show us an image of what you want to do and what does it look like as of now. (Would be better if you also show the css)