I've been working on an application that dynamicaly adds elements to the DOM. The added elements are of two types: ones with height 50px and ones with 100px. They are displayed in with the help of the bootstrap grid system.
Working example:
<div>
<div class="col-xs-6" style="height: 100px;">1</div>
<div class="col-xs-6" style="height: 50px;">2</div>
<div class="col-xs-6" style="height: 50px;">3</div>
</div>
But when i try to rearrange, some unexpected spaces occur on certain layouts:
<div>
<div class="col-xs-6" style="height: 50px;">2</div>
<div class="col-xs-6" style="height: 100px;">1</div>
<div class="col-xs-6" style="height: 50px;">3</div>
</div>
Between element '1' and '3' there is a 50px wide gap. Is there any arrangement where the element '3' is placed in that gap?
Why is this gap occuring?
This is happening because you have added inline style for height.
style="height: 100px;
style="height: 50px;
style="height: 50px;
To know it better look the example here
jsfiddle 1
jsfiddle 2
#Gaurav is correct.. it's happening because you have specific height set. When the height:100px col is placed 2nd it forces #3 to wrap to a new row since the Bootstrap colums float left, but do not float right.
A workaround would be to use the pull-right class on the taller (100px) column...
http://bootply.com/129818
Related
one take col-md-4, second col-md-8, but the second with a picture is not 100% width, there are gaps on the left and right sides, could anyone please advise how to remove gaps and make image full size ? Thanks. Here is screenshot
.upperDiv{
height: 100px;
width: 100%;
background: red;
margin-top: 20px;
margin-bottom: 20px;
}
.fixed-content {
width: 100%;
height: 100px;
object-fit: cover;
}
<div class="container">
<div class="row upperDiv">
<div class="col-md-4" style="background: #005AA1;">
</div>
<div class="col-md-8">
<img src="assets/libled.jpg" class="fixed-content">
</div>
</div>
</div>
Bootstrap put that padding for you to better align your content, you can remove it by inserting p-0 (padding = 0px) class name as I remember
<div class="container">
<div class="row upperDiv">
<div class="col-md-4 p-0" style="background: #005AA1;">
</div>
<div class="col-md-8 p-0">
<img src="assets/libled.jpg" class="fixed-content">
</div>
</div>
</div>
Looking at your HTML, you are using bootstrap's grid system (hinted by the col-md-X classes). The gap you see in your example is caused by the padding applied to the cells of the grid system to create the gutter.
You have two possibilities:
You put the picture as a background instead, since padding is part of the element, the picture will cover this space too.
You remove the gutter.
1 is pretty self explanatory so I'll go straight to two. You can read about the .no-gutter helper class. It needs to be applied to a row and will effectively remove all gutters for the columns in it. But that means you'll loose the gutter on your left column too. You could also remove the padding with a custom class that sets padding-left:0 !important;padding-right:0 !important; This will effectively remove the gutter for the specified column element.
Whatever the option you choose, remember that cols are not meant to be used directly for the styling. They are here to help you create columns in which to put your visual elements. Although I pointed 3 different approaches to your problem, the only "pure" solution is to use the .no-gutter. Others might have weird visual impacts such as making the gutter effectively only half wide (since the left col participates in half the gutter too) and will not look right if there are other columns near it.
Using the HTML below, I want the first div to have a static width of 265px. The second div should be next to the first one, but should be responsive (by shrinking the window this div should also shrink). How can I achieve this?
<div class="styles container">
<h1>Styles</h1>
</div>
<div class="preview container">
<h1>Preview</h1>
</div>
width: calc() will not work in all browsers.
Look at browser-support
<div style="width: 265px; float: left; background: #00f;">
test
</div>
<div style="width: calc(100%-265px); background: #000;">
test
</div>
I've been working with one problem way too long and haven't found any proper solution to it. I'm currently working with grid product display on foundation5 framework and can't find proper jscript or css code to align my product accordingly to one another.
Here's how it looks now :
I need to look like this atleast :
I need bigger product windows below to fill above smaller windows blank space.
Hope somebody would be able to help, thanks!
If you know divs height it's pretty easy, just add position: relative to your bigger div and move it upper.
If you don't it is very similar but you have to set height of the divs and the offset of the bigger one by JavaScript.
HTML
<div class="row">
<div class="small-4 column">
<div class="inner"></div>
</div>
<div class="small-4 column">
<div class="inner"></div>
</div>
<div class="small-4 column">
<div class="inner small"></div>
</div>
</div>
<div class="row">
<div class="small-4 column">
<div class="inner"></div>
</div>
<div class="small-4 column">
<div class="inner"></div>
</div>
<div class="small-4 column">
<div class="inner big"></div>
</div>
</div>
SASS
$div-height: 200px;
$big-div-height: 250px;
$small-div-height: 100px;
div.inner {
height: $div-height;
background: #99CCFF;
border: 3px solid black;
border-radius: 25px;
}
div.row {
margin-top: 25px;
}
div.big {
height: $big-div-height;
position: relative;
top: $div-height - $big-div-height;
}
div.small {
height: $small-div-height;
}
CodePen example
You can't easily make the Foundation grid do that (it provides a regular grid, that's what it's for). However you could create a div inside the relevant grid column(s) to hold your content, and position that absolutely to get what you want.
Give the containing grid column position: relative, then give your new div inside a class name something like my-class, then do:
.my-class {
position : absolute;
bottom : 0;
left : 0;
width : [same percentage width of the screen as your other columns]
}
Now, since that cell's content will have been taken out of the content flow, the containing row will be able to close up to just be the height of the largest of the remaining grid cells (ie the ones that have not been positioned absolutely), and your content will be positioned on the bottom of that row, extending up as far as it needs.
Just check the height of the smaller cell above, plus the larger cell below, don't exceed the height of the two rows together, or you might have to something extra to cater for that.
I'm starting to use Bootstrap 3 and it seems like you use it to define and over all structure but there are probably going to be a lot of containers that get your own custom classes?
I have a container which I've changed the definition of to be fluid so it's now:
.fluid-container {
padding-left: 15px;
padding-right: 15px;
margin-left: auto;
margin-right: auto;
min-width:500px;
}
but when it comes to the rows and sizing them I'm running into some problems here and I'm not sure if it's solved with my own custom classes or leveraging bootstrap in a way I don't know about.
The .fluid-container is going to be a header in this case and inside of it I have a container I'd like to be on the left, and then another container that will be on the right. Normally I'd just make two containers, float one left, the other right and then put a min width on the parent container.
In bootstrap what I've done is this (fiddle here http://jsfiddle.net/hg84F/2/):
<div class="lp">
<div class="lp-shell-head lp-fluid-container" style="border:1px solid red;">
<div class="row">
<div class="col-sm-2" style="border:1px solid blue;">left</div>
<div class="col-sm-2 col-sm-offset-8" style="border:1px solid green;">right</div>
</div>
</div>
</div>
The problem with this is when I make the page width smaller the two containers eventually become full width and stack on top of each other. What I want to have happen is have them stay on their respective sides no matter what and I wasn't sure how to make them do this. Any ideas of how to use bootstrap in this way?
What I want to have happen is have them stay on their respective sides no matter what and I wasn't sure how to make them do this. Any ideas of how to use bootstrap in this way?
http://getbootstrap.com/css/#grid -- More on Bootstrap grid.
<div class="row">
<div class="col-xs-2" style="border:1px solid blue;">left</div>
<div class="col-xs-2 col-xs-offset-8" style="border:1px solid green;">right</div>
</div>
All you're missing, based on your question is the Extra Small (always responsive) column class, which is col-xs-*
So this is a slightly different approach to your question. Based on your questions and comments to JonathanR's answer, I figured you need a little tweak.
Jonathan's solution is valid, but I'm really unsure of how far you want to "squeeze" the page before the "left" and "right" actually touch. Bootstrap uses percentage based widths and margins for the "col-" and "offset-" elements. If you attempt to squeeze it past a certain point, you will begin to see the horizontal scroll. This example solves that issue in a different manner.
Here's my working example: http://bootply.com/101136
<!-- 'Container-fluid' class no longer exists in 3.0, but I use it as a semantic wrapper class -->
<div class="container-fluid">
<!-- Make sure you use include the bootstap 'container' class -->
<div class="lp-shell-head lp-fluid-container container" style="border:1px solid red;">
<div class="row">
<!-- Use one XS col instead of 2 col-xs-2 and the offset -->
<div class="col-xs-12">
<!-- Use two div elements and float them left/right -->
<div class="pull-left" style="border:1px solid blue;">left</div>
<div class="pull-right" style="border:1px solid green;">right</div>
</div>
</div>
</div>
</div>
Minor change in the CSS. Switched your "min-width" to "max-width" in order to prevent your row from expanding past the 500px threshold.
.container-fluid {
border:1px solid purple;
}
.lp-fluid-container {
padding-left: 15px;
padding-right: 15px;
margin-left: auto;
margin-right: auto;
/* Switched to 'max-width' */
max-width:500px;
}
I have the following div:
<div style="background:red;width:100%;height:100%">Red</div>
When I stick it into the page without a container div, I can see it. But when I stick it into a container
<div class="container">
<div style="background:red;width:100%;height:100%">Red</div>
</div>
I can't see that div at all. When I stick it into an additional:
<div class="row">
<div class="span3">
<div style="background:red;width:100%;height:100%">Red</div>
</div>
</div>
I can see it, but there is a lot of padding and tons of spacing all around. How can I create a container div that doesnt have any margins/padding etc. that is equal to 0?
In fact, if you are using Bootstrap grid system, some margins and padding are added to maintain spacing between columns and page boundaries. So direct answer to your question is: no, you can't.
However, you can simply have a div that is not wrapped in div with .container class - then your div will not have any margins and paddings derived from grid system.
<div class="container">
<div class="row">
<div class="col-md-8">8-units column</div>
</div>
</div>
<div style="width: 100%; background: red;">Your div to be expanded to full page's width</div>
<div class="container">
<div class="row">
Another div within grid system
</div>
</div>