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">
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 having an issue where the height of one of my panels increases dramatically when I reduce the window size. Specifically, I have two panels in one row - one is col-grid-5 and the other is col-grid-4. The col-grid-4 header height (2nd one below AKA Recent Active Projects) is the one that is increasing way more than it should. Here's a plunkr:
http://plnkr.co/edit/NfI2xjth4ZU02duwLKDv
<div class="col-md-5">
<div class="panel">
....
</div>
</div>
<div class="col-md-4">
<div class="panel">
....
</div>
</div>
If you resize the window of the plunkr, you'll see it happen during a certain window width range. The problem goes away if I reorder the tables (i.e. put the 2nd one first). However, I can't figure out why that works.
Any tips would be great!
This is a float clearing issue. You need to include another .row tag around your nested .col-sm-6's. Simple answer is that any time you have a group of columns in bootstrap, you need a row around them.
<div class="col-md-5">
<div class="panel">
<div class="panel-heading no-border bg-primary">
<span class="text-lt">Time Summary</span>
</div>
<div class="row">
<div class="panel m-n col-sm-6 padder-v">
Hours Today
<i class="icon-arrow-right pull-right m-t-lg"></i>
<div class="h2 b-b m-t-sm">2.50 </div>
</div>
...
</div>
</div>
</div>
Updated plunker: http://plnkr.co/edit/rQqusAmUEWFrKMEqxRmz?p=preview
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.
I'm using Twitter Bootstraps grid system and inside that I use their panels. I have two cols and in each col I have one panel. But this creates a horizontal scrollbar on my page.
I could probably disable the horizontal overflow. But I'd rather "fix" the problem in a cleaner way that Bootstrap is causing.
What would be a good way to solve this problem?
Example: http://www.bootply.com/iPdjlxuexk
<div class="row">
<div class="col-md-6">
<div class="panel panel-default">
<div class="panel-heading">Form widgets</div>
<div class="panel-body">
Panel content
</div>
</div>
</div>
<div class="col-md-6">
<div class="panel panel-default">
<div class="panel-heading">Selected page widgets</div>
<div class="panel-body">
Panel content
</div>
</div>
</div>
</div>
If I wrap a <div class="container"></div> around the row div, then the panels inside are really small. A big margin-left and margin-right apprears on the container. Not really what I'm after either.
http://www.bootply.com/BWMTAFeO8x
The problem is occurring because of the following HTML class:
col-md-6
Specifically, with Bootstrap, this means that whatever is currently in this column will extend to be 6 column spaces wide. This is not good if you are looking to only have something, let's say, 3 column spaces wide because it actually stretches what you are trying to do.
How do we fix it?
Use a smaller width space and then use Bootstraps ability to push/pull things. I will demonstrate what I mean via a JsFiddle, which is found here.
Basically, I altered your HTML to become the following:
<div class="row">
<div class="col-lg-3 col-md-3 col-lg-push-3 col-md-push-3">
<div class="panel panel-default">
<div class="panel-heading">Form widgets</div>
<div class="panel-body">
Panel content
</div>
</div>
</div>
<div class="col-lg-3 col-md-3 col-lg-push-3 col-md-push-3">
<div class="panel panel-default">
<div class="panel-heading">Selected page widgets</div>
<div class="panel-body">
Panel content
</div>
</div>
</div>
</div>
NOTE
In my demonstration, I added the ability to view the panels in both a large screen setting and a medium screen setting versus just having it in a medium setting. I also had to push the columns according to the screen sizes. You can see this in effect with the JSFiddle by changing the width of the portion of the output screen in the demo. This is useful because you can see the difference between a large/medium sized screen to a small/extra-small sized screen.
More Information:
You can find more information on the grid system via the actual website. It will show you how the grid system is laid out and how you can use the push/pull aspect as well.
http://getbootstrap.com/examples/grid/