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
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>
I have a simple bootstrap row with two columns:
<div class="row">
<div class="col-md-5 col-md-push-7">
This should show on right
</div>
<div class="col-md-7 col-md-pull-5">
This should show on left
</div>
</div>
I want the first row to show on the right and the second row on the left. All of this works, however when the screen size becomes small or extra small, the first column shows up first and second shows up second.
I would like to display second column first and first column second on small and extra small devices. I tried to achieve this with pull-right and pull-left classes but it did not work.
Would appreciate your suggestions.
P.S. I want the divs to stack
Something like this might work if you want the horizontal column ordering reversed:
<div class="row">
<div class="col-xs-5 col-sm-push-7">
This should show on right
</div>
<div class="col-xs-7 col-sm-pull-5">
This should show on left
</div>
</div>
Here is a JSFiddle demo.
If you do want these to stack rather than being side by side like the comments are talking about.
And if you want the second dive to show on top of the stack then you would do it something like this. Show and hide to swap between divs/blocks.
Here is a Fiddle I set the media breakpoints low at 320px.
<div class="row showhide1">
<div class="col-xs-5 col-xs-push-7 col-sm-5 col-sm-push-7 col-md-5 col-md-push-7 bg-primary">
This should show on right on larger views
</div>
<div class="col-xs-7 col-xs-pull-5 col-sm-7 col-sm-pull-5 col-md-7 col-md-pull-5 bg-info">
This should show on left on larger views
</div>
</div>
<div class="row showhide2">
<div class="col-xs-12 bg-primary">
Was on right, now on top on smaller views
</div>
<div class="col-xs-12 bg-info">
This should show on left on smaller views
</div>
</div>
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/
I've been trying to adapt my website to extra small window sizes with Bootstraps but I didn't found any solution for myself.
I want to shown one column when the window is too small and keep the left version otherwise. At this point, the code is something like:
<div class="container-fluid">
<div class="row">
<div class="col-md-3" id="divLeft">
<div class="panel panel-success" id="divChart">
<!-- Some progress bars -->
</div>
</div>
<div class="col-xs-12-offset-6 col-sm-6" id="divMain">
<h2>Observations</h2>
<div class="list-group" id="observations">
<!-- Some panels -->
</div>
</div>
What I have to do? I tried to add multiple classes to my divs divLeft and divMain but it doesn't work as I want.
Thanks in advance fellas! : D
Each row should always add up to 12 columns.
Have a look at the Bootstrap Docs which tell you about how to work with their grid system:
http://getbootstrap.com/css/#grid
I'd suggest something like the below for your example:
<div class="container-fluid">
<div class="row">
<div class="col-xs-12 col-md-3"></div>
<div class="col-xs-12 col-md-9"></div>
</div>
</div>
The above should result in the two columns displaying one above the other on extra small devices.