I have a weird problem with bootstrap columns.
I am using grid as below:
<div class="row">
<div class="col-sm-3">Content1</div>
<div class="col-sm-3">Content2</div>
<div class="col-sm-3">Content3</div>
<div class="col-sm-3">Content4</div>
</div>
And these columns are randomly generated and sometimes there can be no content in any of the columns like as below
<div class="row">
<div class="col-sm-3">Content1</div>
<div class="col-sm-3"></div>
<div class="col-sm-3">Content3</div>
<div class="col-sm-3">Content4</div>
</div>
Now the problem is that when there is no content in column2 then column3 content shifts left. I want to avoid that.
Below is the presentation that i am getting
When all blocks have content
Content1 Content2 Content3 Content4
When second block do not have content
Content1 Content3 Content4
Representation that want is that:
Content1 Content3 Content4
You should add an inner Div inside your columns and set min-height property for better solution:
New HTML
<div class="row">
<div class="col-sm-3"><div class="column-content">Content1</div></div>
<div class="col-sm-3"><div class="column-content"></div></div>
<div class="col-sm-3"><div class="column-content">Content3</div></div>
<div class="col-sm-3"><div class="column-content">Content4</div></div>
</div>
CSS
.column-content {
min-height: 100px;
}
Taken help form this page: http://www.tutorialrepublic.com/css-reference/css-min-height-property.php
The easiest solution will be to add “ ” to the end of a column.
It will not change much your lay out but will help with “empty” columns
I think there is no such a solution in bootstrap for your problem.
But You can use an jquery script for checking the div is null or not, if null assign an css property display:none; to that div( using script)
Related
I'm using Bootstrap and I want to change first column the distance from left. This is illustrated in this picture:
My code:
<div class="container">
<div class="row">
<div class="col-sm-1">
<div class="panel panel-default">
<div class="panel-body">A Basic Panel</div>
</div>
</div>
<div class="col-sm-8">.col-sm-7</div>
<div class="col-sm-1">.col-sm-1</div>
</div>
</div>
I try with margin-left, padding-left, but I don't found where it's need change.
Change
<div class="container">
to
<div class="container-fluid">
Fiddle here: https://jsfiddle.net/DTcHh/23360/
The .container class adds a max width to that element, and centers it on the page. If you want col-sm-1 all the way to the left, you'll want to remove/adjust how you're using the .container class.
On top of that, .row and .col-sm-* come with some additional margin/paddings. Try using chrome inspector to look at your elements on the page and see how/why they are laid out the way they are.
I don't know how to make this kind of col 3 and 6 size.
Middle column has no padding, but it is not enough.
I was trying to make different sizes of col.
#media (min-width:992px){
.col-md-6 { width: 52,5641%;}
.col-md-3 { width: 23,7179%;}
}
but no success.
With Bootstrap you dont need to add media queries or your own width, just use the BS grid system (you can read more here) and let it handle all the tough work. Based on your picture a 3 column layout would use something like this:
<div class="row">
<div class="col-md-3">.col-md-3</div>
<div class="col-md-6">.col-md-6</div>
<div class="col-md-3">.col-md-3</div>
</div>
Make sure you columns total 12 like above (3+6+3) If you need extra padding in between columns just add a nested DIV and apply the spacing you want to those.
<div class="row">
<div class="col-md-3">
<div class="myclass">
this will have extra padding
</div>
</div>
<div class="col-md-6">.col-md-6</div>
<div class="col-md-3">.col-md-3</div>
</div>
.myclass {
padding: 20px;
}
Updated
Based on your comment if you want column 6 to be slightly larger than it is you will either need to expand that column and "shrink" the outer 2 columns to something like this:
<div class="row">
<div class="col-md-2">.col-md-2</div>
<div class="col-md-8">.col-md-8</div>
<div class="col-md-2">.col-md-2</div>
</div>
If that's not what you are going for then you can create your own table within bootstrap.
<div class="row">
<div class="custom-col">My custom left side</div>
<div class="custom-main">my main column</div>
<div class="custom-col">My custom right side</div>
</div>
Sizing each of the column as you need.
Maybe Bootstrap is not the best option for your problem. It works if only you can divide the screen in 12 equal parts. Rewrite this rule could break other stuff.
What about using flexboxes or other CSS framework more flexible?
I may sound stupid, but this is all new to me.
I'm guessing I have overlooked something.I have no ideea how to fill the white spaces between my columns(end-to-end)
This is my code:
<div class="container" id="cfoot">
<div class="col-lg-3">
<h3>despre noi</h3>
<p>Pensiunea Delia</p>
<p>Echipa Noastra</p>
</div>
<div class="col-lg-3">
<h3>link-uri utile</h3>
<p>Intrebari frecvente</p>
<p>Serviciile noastre</p>
<p>Contact</p>
</div>
<div class="col-lg-3">
<h3>ultimele postari</h3>
<p>Titlul postare blog vine aici</p>
<p>Titlul postare blog vine aici</p>
<p>Titlul postare blog vine aici</p>
</div>
<div class="col-lg-3">
<img src="imgs/logodelia.png" alt="logobottom">
<p># 2014 Pensiunea Delia. Designed by Kinkara Web</p>
</div>
CSS:
#cfoot.container{
background-color:#f4f4f4;
color:#6c6c6c;
background-image:none;
}
Can anyone help please?
When I use developer tools to look at the markup, I'm seeing this applied by the browser:
body {
display: block;
margin: 8px;
}
If you simply add
body {
margin: 0;
}
.container {
margin: 10px; // adjust as needed
}
I think you'll be on your way.
note: you're also missing the Bootstrap row
<div class="row">
fiddle: http://jsfiddle.net/XEF8v/1/
I'm not quite clear on your question. I think you are asking us how you can use bootstrap to achieve the layout of four columns, like in the second image that you have posted.
You can get most of the way there by using Bootstraps built-in grid system.
Overview of Bootstrap's grid system: http://getbootstrap.com/css/#grid
<div class="container-fluid">
<div class="row">
<div class="col-md-1" id="col-1"><!-- empty space on left --></div>
<div class="col-md-2" id="col-2"><!-- despre noi column --></div>
<div class="col-md-2" id="col-3"><!-- link-uri-title column --></div>
<div class="col-md-2" id="col-4"><!-- ultimele column --></div>
<div class="col-md-4" id="col-5"><!-- delea logo column --></div>
<div class="col-md-1" id="col-6"><!-- empty space on right --></div>
</div>
</div>
The col-md-<#> class determines the horizontal width of a column. Per Bootstrap's documentation, these numbers should add up to 12.
I love bootstrap, but i'm trying to achieve something totally outsides its expected grid, which is to have cells stack under each other without grouped lines. Something like Pinterest, if you will.
Bootstrap normal grid:
Bootstrap no rows concept:
Perhaps the correct answer is "don't use bootstrap" but having built many sites with it, I would love to continue using it and find a way around this.
If indeed i should use another responsive framework with a grid system more like what I need, what would you recommend?
tia
I've worked on a similar problem for a nested drag'n-drop box api with goal to be compliant with bootstrap grid on final render, the builder wasn't a bootstrap grid but a home made similar paradigm of bootstrap grid and I've fixed it with the CSS3 marvelous flexbox
take a look at Solved by flexbox
I have putted a root row (only one for multiline) and added a class to it which implement
display: flex;
flex-wrap: wrap;
eg:
<div class="row flex-row">
<div class="col-6">Variable height content</div>
<div class="col-3">...</div>
<div class="col-12">...</div>
<div class="col-3">...</div>
...
</div>
and the css
.flex-row{
display: flex;
flex-wrap: wrap;
}
this will have the effect to adjust automatically the height of all the box that is on same line to the bigger one
Looks like you have to use JS to reach goal.
You can use following libs:
Jquery Wookmark - Light weight and fast. Used in myself resolving similar issue
Isotope - Flexible and reach functions one
Mansonry - Popular lib, similar to Isotope
You could try inverting columns and rows in bootstrap.
<div class="row">
<div class="col-sm-4">
<div class="row">Some content here</div>
<div class="row">Some content here with more text than the first content but it still needs some more</div>
<div class="row">Some content here</div>
<div class="row">Some content here</div>
<div class="row">Some content here</div>
</div>
<div class="col-sm-4">
<div class="row">Some content here</div>
<div class="row">Some content here</div>
<div class="row">Some content here</div>
<div class="row">Some content here</div>
</div>
</div>
Here is a jsfiddle of this.
The key thing to realize about the col-(size)-(gridsize) is that they will wrap left to right then top to bottom. So, if you make a col with a grid size less than 12, other col will begin to wrap around. You can also nest them as needed to split up the page. So, it's possible to create a 'rowless' layout like so:
(this isn't an amazing demo but it illustrates that what you want is possible)
http://jsfiddle.net/7575A/1/
you can use row in col and then but new cols in these rows
if you have problem in padding make your
classes no-padding / no-left-padding / no-right-padding
<div class="row">
<div class="col-md-3">
<div class="row">
<div class="col-md-12"></div>
</div>
</div>
<div class="col-md-9">
<div class="row">
<div class="col-md-4"></div>
<div class="col-md-4"></div>
<div class="col-md-4"></div>
</div>
</div>
</div>
Using Foundation, I sometimes have an empty column in a row, and that column gets collapsed entirely, engendering a mismatch between column data and column headers. Is there a way that I can prevent this collapse, making even empty columns get full width? (Is there a way besides inserting non-breaking spaces or other text into the otherwise empty columns?)
<div class="row">
<div class="small-1 columns">Bruce</div>
<div class="small-1 columns"></div> <!-- this gets collapsed to 0 width! -->
<div class="small-1 columns">Dickinson</div>
</div>
Apply the following css:
.column, .columns{
min-height: 1px;
}
You could add some pseudo content to the containing element to trigger rendering.
Markup:
<div class="row">
<div class="column">
<p class="middlename"></p>
</div>
</div>
CSS:
.middlename:before {
content: "\00a0";
font-size: 0;
}
You can tag the last column (you are using) with "end".
<div class="row">
<div class="medium-3 columns">3</div>
<div class="medium-3 columns">3</div>
<div class="medium-3 columns end">3 end</div>
</div>