I need to make my bootstrap column span the full height of a row. The issue i am having is that I cannot get it to change size.
currently my HTML looks like this
<div class="container">
<div class="row">
<div class="col-sm-1">
</div>
<div class="col-sm-11">
<!-- Content removed for demo | large form here -->
</div>
</div>
</div>
The col-sm-11 contains a form which is x height (around 400/500px)
the col-sm-1 contains no content but I want to make it 100% height so it matches the form next to it. How do I go about doing this
Attempts
I have tried applying height 100% to that column but it remains the same.
I have also tried setting a static amount like 300px but this just pushes the form down. and i need it to be 100% anyway
The easiest way I can think of for you to do this is to use one line of jQuery, if possible.
Add a class, two separate ones, to each of your two columns.
<div class="col-sm-1 col1">
</div>
<div class="col-sm-11 col2">
</div>
In jQuery, simply add this line of code at the top of your $(document).ready(function() {...});
$('.col1').height($('.col2').height());
Here is a JSFiddle
Note: I made your col-sm's col-xs's so that you could see it in JSFiddle without resizing.
Note #2: You may want to put the line of jQuery inside of a $(window).resize(function() {...}); so that it changes with the responsiveness.
Related
I'm currently working with bootstrap, but there's just a few things that confuse me about the grid management.
In this case, my grid structure tends to go (as an example)..
<div class="container">
<div class="row">
<div class="col-xs-6">
<div class="row">
<div class="homeBox">
</div>
</div>
</div>
<div class="col-xs-6">
<div class="row">
<div class="homeBox">
</div>
</div>
</div>
</div>
</div>
(Apologies for poor formatting)
This works fine for full width elements (col-xs-12), however if i'm trying to have two elements next to each other (col-xs-6) with a row before adding the content, they simply touch each other in the middle, and if adding a background it makes it seem like one element. Here's a JFiddle showing what I mean. If i was to add a row before the homebox, it makes them touch. I can also just not add a row after the col-xs-x, but then it won't align correctly to the other full width elements on the page.
In sites I'm working on, I workaround this by adding a 'leftRow/rightRow' class for small devices onwards, but this seems a bit of a bodged way of doing it.
What's the correct way to approach this?
Cheers.
I am doing a products page using Bootstrap and most of the images appear fine, but the last line on the two bottom rows checker in a smaller screen size.
To let you know what I mean I've included an image here.
Here is the code of one of the rows that are not working right:
<div class= "row">
<div class="col-sm-6 col-md-3">
<img src="images/seasonal_1.jpg">
</div>
<div class="col-sm-6 col-md-3">
<img src="images/seasonal_2.jpg">
</div>
<div class="col-sm-6 col-md-3">
<img src="images/seasonal_3.jpg">
</div>
<div class="col-sm-6 col-md-3">
<img src="images/seasonal_4.jpg">
</div>
</div>
This usually happens when you have some padding or border that is increasing the size of the element.
Grids work on the basis of % so if you have 2 elements that width each equal 50% but then you add something like some padding or a border you are going over a total of 100% and the element is pushed to the next line.
My advice (given I don't have the actual code) would be to review your styles using the browser dev tools to see what styles are being applied when this happens. You should be able to track down the offending property.
Hope this is useful even if not a definitive answer.
So I eventually fixed the problem by making the all the images the exact same size/dimensions (some were a few pixels off). Just thought I'd follow up on this.
Also I later discovered that if you have an extra line of text or two underneath the picture that might throw the pattern off.
http://www.razaprinters.com/bootstrap.html
Hi I have made this page using bootstrap it is working fine on Desktops i am mostly using classes like col-xs-4 or 12 but when i open my website on a cellphone it is not optimizing things are behaving awkwardly like the about us divs goes all the way up and etc. any help with the code will be helpful i am not posting the code as you can go to inspect element or view source code to access it.
In order for bootstrap to "work" you should put your columns inside container and row classes.
<div class="container">
<div class="row">
<div class="col-xs-12"></div>
</div>
</div>
For more information go here Bootstrap Grid System
Container is a parent to content you want to style, it can have multiple rows inside. A row is sort of horizontal group (like a row in a table). Rows have 12 columns, but you can apply different widths to elements to target different views (dektop, mobile) depending on screen width. You need a row element if you want columns to work. For instance if you use:
<div class="container">
<div class="row">
<div class="col-lg-6 col-md-6 col-sm-12 col-xs-12"></div>
</div>
</div>
Then this will take 50% width (it will be on the left) of parent .container element on larger screens and 100% width of parent .container on smaller screens. Hope that clarifies something. I really recommend reading Bootstrap documentation - it's short and simple.
I am creating a website in bootstrap. I need to make a right hand side column makes a big serial number 4. When I fill the column height make the big simultaneously space is come out the between the serial no 3 and 6.
How can I solve the problem?
<div class="col-md-3">content goes here</div>
<div class="col-md-3">content</div>
<div class="col-md-3">content</div>
<div class="col-md-3">BIG COLUM</div>
<div class="col-md-3">content</div>
<div class="col-md-3">content</div>
<div class="col-md-3">content</div>
Example
The only other thing I can think of is to use: on your vertical column. Check out this link http://getbootstrap.com/css/#grid-options
Check out the offset column section as well.
Remember to wrap your page in a <div class="container", then wrap it in a <div class="row"... also remember that the grid width is only 12 wide, so you have to many divs as col-md-3, you can use only four.
trying to change bootstrap panel height's to be equal the body height's
so to be like side bar :
<div class="container-fluid">
<div class="row">
<div class="col-sm-2">
<div class="panel panel-primary ">
<div class="panel-heading">Welcome User!</div>
<div class="panel-body client-left-side">
Cpanel Menu
</div>
<div class="panel-footer">Logout Button</div>
</div>
</div>
</div>
</div>
result :
I want to stretch it , so it's height from the end of the navigation bartill the beginning of the footer...
EDIT: link to the test page
I like this, personally:
.panel-primary {
height: calc(100vh - 145px);
}
Two points
1) Bootstrap-3 doesnot let you play with height easily. If you want to play with height then you have to go for table structure where you can set the row-span of each columns, BUT this is NOT a good approach.
2) The other way (easy) is that to use jquery for this. All you need to do is to get the height of #body and set the height of panel to #body's height. You might some media queries here too.
If you want to set the heights to 100% you should give your enclosing div's the proper height as well. I am guessing your col,row and container are not the full height till the footer.
If you could provide the URL, its easier to see and provide you with a concrete answer.
I think you want to increase the panel-body height, not the entire panel. One way to do this is to use CSS flexbox and make sure any of the panels containers are 100% height (including the html and body)
http://www.bootply.com/BZQYq01ABC