A picture is worth a thousand words so...
Structure:
<div class="row">
<div class="col-lg-2 col-md-3 col-sm-4 text-center column-fix">
<div class="row-fluid">
<div class="row-fluid">
<div class="image">
<img src.... />
</div>
</div>
<div class="row-fluid">
<div class="category-link">
<a href...></a>
</div>
</div>
</div>
</div>
...
</div>
Output:
Basically, when a column is higher than the others, it causes the order to break. I understand this is how floats work, but I need a nice and clean solution for this. At the moment, this is my workaround:
.column-fix {
float: none !important;
display: inline-block !important;
margin: 0 -0.125em !important;
vertical-align:top;
}
And this is the output I get with the fix:
Is there a nice solution that will override all columns in all widths without setting a custom class to every element? I want the bootstrap col-* classes to behave like inline-blocks instead of floats.
Related
I have a complex nested row & column layout using Zurb Foundation. I want to make the divs with text '.grid-text' the same height as the row. I've tried various strategies to do this, but it ends up breaking the flexbox vertical text centering. I've also searched through StackOverflow questions and none address this issue.
I ended up using Foundation's Equalizer but for some reason it isn't working. Any suggestions? I'm open to different strategies.
http://codepen.io/anon/pen/bVNjyv
I tried jquery and equalizer:
$(document).ready( function() {
var rowHeight=$('.v-align').height();
$('.grid-text').height(rowHeight);
});
<div class="row v-align" data-equalizer data-equalizer-mq="large-up">
<div class="large-4 column b full-width">
<div class="grid-text" data-equalizer-watch>
<h3>A</h3>
<p>text</p>
</div>
</div>
<div class="large-8 column full-width">
<img src="http://placehold.it/2604x1302/00FFCC" data-equalizer-watch>
</div>
</div><!--/row9-->
For this kind of layout I tend to use Masonry which plays nice with Foundation.
I'm not sure what environment you're using or if you're just using codepen but you were missing a few JS files that Foundation requires which I added to the pen:
jquery.js
foundation.js
foundation.equalizer.js
Then make sure Foundation is initialised:
$(document).foundation();
I updated your HTML as follows:
<div class="row">
<div class="show-for-large-up large-3 column full-width">
<img src="http://placehold.it/1302x2604/FF3333">
</div>
<div class="large-9 column">
<div class="row" data-equalizer data-equalizer-mq="large-up">
<div class="large-4 column b full-width">
<div class="grid-text" data-equalizer-watch>
<div class="inner">
<h3>A</h3>
<p>text</p>
</div>
</div>
</div>
<div class="large-8 column full-width" data-equalizer-watch>
<img src="http://placehold.it/2604x1302/00FFCC">
</div>
</div>
</div>
<div class="large-6 columns full-width">
<img src="http://placehold.it/2604x1302">
</div>
<div class="show-for-large-up large-3 columns full-width last">
<img src="http://placehold.it/1302x2604/FFFF99">
</div>
<div class="large-9 columns">
<div class="row" data-equalizer data-equalizer-mq="large-up">
<div class="large-8 columns full-width" data-equalizer-watch>
<img src="http://placehold.it/2604x1302/FF9966">
</div>
<div class="large-4 columns b full-width">
<div class="grid-text" data-equalizer-watch>
<div class="inner">
<h3>A</h3>
<p>text</p>
</div>
</div>
</div>
</div>
</div>
</div>
As for the css centring there are many ways you can do this, a great article to read on the subject is Centering in the unknown which I often reference. I would recommend not using flexbox as it's only supported in the latest browsers. In this instance I used the table cell method which I find works best with horizontal centering in Foundation.
I added the div .inner inside your .grid-text div. I then added the following css:
.grid-text {
display: table;
text-align: center;
width: 100%;
// no need to set the height here
// as it's set by data-equalizer
}
.grid-text .inner {
display: table-cell;
vertical-align: middle;
}
Hope that helps.
http://codepen.io/thmsmtylr/pen/EVjXye
well if you mean font size just try:
.v-align {
align-items: center;
font-size: 10px;
}
but test for the size that works properly, of course.
I am new with Bootstrap 3 and just want to know how can I use .container class from Bootstrap with my own fixed wrapper.When I have fixed container of the page for example
.wrapper {
width:960px;
}
and .container class from Bootstrap, how can I combine and use in my web page ?
<div class="container">
<div class="wrapper">
<div class="row">
<div class="col-md-12">
Text content here
</div> </div> </div> </div>
is it correct ?
Thanks!
no need for the extra div. You could just do
<div class="container wrapper">
<div class="row">
<div class="col-md-12">
Text content here
</div>
</div>
</div>
.wrapper {
max-width: 960px;
}
Note that I used max-width in stead of width, or the responsiveness would be lost.
I am using Bootstrap grid system. The spacing between rows is too large.
How can I reduce it?
<div class="row">
<div class="col-md-6">
<h1 id="Heading"> Heading </h1>
<div class="row" style="margin-left:6px;">
<div class="col-md-12">
<div class="row">
<div class="col-md-12">
<div id="rect"> <span id="Heading" style="margin-left:15px;font-weight:bold; font-size: 18pt;color: #2373B3;"> Span </span> </div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div id="rect"> <span id="Heading" style="margin-left:15px;font-weight:bold; font-size: 18pt;color: #2373B3;"> Span </span> </div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div id="rect"> <span id="Heading" style="margin-left:15px;font-weight:bold; font-size: 18pt;color: #2373B3;"> Span </span> </div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div id="rect"> <span id="Heading" style="margin-left:15px;font-weight:bold; font-size: 18pt;color: #2373B3;"> Span </span> </div>
</div>
</div>
</div>
</div>
</div>
<div>
There are 2 quick solutions possible for this:
Edit bootstrap core css/sass which will be a bad idea as it will affect core functionality of page scaffolding.
Write a separate class and add it in your div for ex:
.row-bottom-margin { margin-bottom:20px; }
and you can use it as
<div class="row row-bottom-margin">
Option 1 is not suggested until unless you are really looking for this change to be applied at all the relevant places and do consider your future designs.
Hope this helps!
Using Bootstrap 4 now you no more need to use any CSS for this as it has utility classes for this purpose.
By default, row elements expands in related to their childs. So your problem is not in .row class but in #rect
On rect element you have a line-height of 1.4 by default bootstrap css. Make it a class rather than id.
You can reduce it to 1.2 for your case...
Do it on a separate css file and overwrite it. That would be a better design for you.
.rect {
line-height: 1.2; // overwrite it on a different css if you prefer
}
In twitter bootstap there is a default margin-bottom:15px property set between rows of the grid system.You can remove this property or overwrite the margin property
<div class= "row marginRow"></div>
Your Css
.marginRow{
margin-bottom:0px !important;
}
or just remove any margin present using
.marginRow{
margin:0px !important;
}
I am using the following to create a 3 columns layout feel to my website:
<div>
<div class="foo col-md-4">
</div>
<div class="foo col-md-4">
</div>
<div class="foo col-md-4">
</div>
<div class="foo col-md-4">
</div>
</div>
The above works great, and no matter how many foo items I added, it will format it to three columns layout automatically. However, I wanted to add a boxed feeling to each of the foo item, so that it does not look like that they're attached to each other. To achieve this, I added margin to the foo class:
.foo
{
margin: 3px 3px 3px 3px;
}
Adding the above, changes the layout become a two column layout.
My goal is to replicate responsive boxed layout, just like one we find in google plus.
Since the Bootstrap cols already having padding, you could make the content of your columns boxed.. For example, the panel creates a boxed effect.. No additional CSS required:
<div class="col-md-4">
<div class="panel panel-default">
<div class="panel-heading">Title</div>
<div class="panel-body">Content here..</div>
</div>
</div>
Demo on Bootply: http://bootply.com/96277
Also, you may be interest in this Bootstrap Google+ project:
http://iatek.github.io/bootstrap-google-plus/
http://jsbin.com/akaQufU/3
Put a div inside the col-* this can be done.
CSS
body {background:#eee}
/* demo */
.container {padding:3%;}
/* put a div inside .foo style for demo */
.foo > div {
background:#fff;
margin-bottom:4px;
padding:2%
}
/* adjust row margins */
.row.foo-row {
margin-left: -2px;
margin-right: -2px;
}
/* adjust padding */
.row.foo-row .col-sm-4,
.row.foo-row .col-md-4,
.row.foo-row .col-lg-4 {
padding-left: 2px;
padding-right: 2px;
}
HTML
<div class="container">
<div class="row foo-row">
<div class="foo col-md-4">
<div>
something
</div>
</div>
<div class="foo col-md-4">
<div>
something
</div>
</div>
<div class="foo col-md-4">
<div>
something
</div>
</div>
<div class="foo col-md-4">
<div>
something
</div>
</div>
<div class="foo col-md-4">
<div>
something
</div>
</div>
<div class="foo col-md-4">
<div>
something
</div>
</div>
<div class="foo col-md-4">
<div>
something
</div>
</div>
<div class="foo col-md-4">
<div>
something
</div>
</div>
<div class="foo col-md-4">
<div>
something
</div>
</div>
</div>
</div>
how about adding inset border instead
.foo
{
border-color:transparent;
border:inset 3px;
}
because margin will be calculated as a column extra width
anyway if you want to seperate them without using borders , then just use padding
.foo
{
padding:3px 3px 3px 3px;
}
Your columns should already spaced properly by your code and bootstrap's grid system, you just need need to added a margin to the bottom to stop them touching.
margin-bottom: 3px;
The problem you had with it converting to a 2 column was because you were adding side margin of 3px as well, which throws bootstraps grid system out.
You can't use padding (well) because bootstrap uses it for spacing and that will be more pain than gain.
I am using bootstrap fluid layout. The layout I desire is as follows:
My html code
<div class="container">
<div class="row-fluid">
<div class="span4 well">span4</div>
<div id="h" class="span8 well ">span8</div>
</div>
<div id='calendar' ></div>
</div>
It gives span4 and span8 column in a row for desktop. On a small device, it puts span4 at the top and displays span8 below it. But, when the screen is resized, I wanted to have span8 at the top and span4 below it.
The solution I tried
<div class="container">
<div class="row-fluid">
<div id="h" class="span8 well pull-right">span8</div>
<div class="span4 well ">span4</div>
</div>
<div id='calendar' ></div>
</div>
It works but it gives following layout for big screen. span4 leaves some margin initially which I want to avoid.
How can I do that?
Try adding this style:
#x{
margin-left: 0px;
}
And updating your html to:
<div class="container">
<div class="row-fluid">
<div id="h" class="span8 well pull-right">span8</div>
<div id="x" class="span4 well">span4</div>
</div>
<div id='calendar' ></div>
</div>
The id is just trumping this portion of the Bootstrap css:
[class*="span"] {
float: left;
min-height: 1px;
margin-left: 20px;
}