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.
Related
I'm new in bootstrap and I don't know if it's possible to have bootstrap containers wrapped in another element, Or if that wrapper can have some width, something like this,
<div style="background:url('xycv.jpg') center top no-repeat; width:100%">
<div class="container-fluid">
<div class="row">
<div class="col-md-6">col1</div>
<div class="col-md-6">col2</div>
</div>
</div>
</div>
<div style="background:url('bla.png') center top no-repeat; width:100%">
<div class="container-fluid">
<div class="row">
<div class="col-md-6">col1</div>
<div class="col-md-6">col2</div>
</div>
</div>
</div>
Or what happens if wrapper will have width:950px?
.container-fluid itself behaves like your wrapper, so your wrapper is kind of obsolete. Setting the background on the .container-fluid is what I would do.
If you need to wrap some bootstrap elements in your own element, you sure can do this.
yes you can have, only in case when you are using container-fluid class.
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>
I believe to provide standard margin-left we can use class "Offset" in bootstrap. At the same time what is the class that can be used to provide standard margin-right?
example:
<div class="row-fluid">
<div class="offset2 span8"></div>
</div>
for some reason I need to give margin-right equivalent to offset2. Some solution will be of great help. Thank you.
There is no equivalent class to offset-x for margin-right and for good reason, it is not needed. Think of it this way, if you need a 6 column div that is offset both right and left 3 columns, you would use:
<div class="row">
<div class="span6 offset3">Your content...</div>
</div>
Also, if you have a 6 column div that needs to only be offset 2 columns BUT, the offset should be 2 columns on the right, the code would be:
<div class="row">
<div class="span6 offset4">Your content...</div>
</div>
Keep in mind you are always working in 12 columns (unless changes in variables.less) so you can use span-x AND offset-x to achieve position desired. If you are looking to tweak additional pixels, add an additional class(or ID) to your content container inside of your span. For example:
<div class="row">
<div class="span6 offset4">
<div class="tweaked-margin">Your content...</div>
</div>
</div>
The CSS:
.tweaked-margin {
margin-right: 4px; // or whatever you need
}
I have the following:
<div class="container-fluid">
<div class="row-fluid">
<div class="span3"></div>
<div class="span3"></div>
<div class="span3"></div>
<div class="span3"></div>
</div>
</div>
By default, this div.span* spans the entire width of the screen, like this:
[x][x][x][x]
At a certain screen width, I want this to appear in a 2x2 grid, like this:
[x][x]
[x][x]
How do I do this?
Sorry about my earlier attempts, I did not fully understand your question:
The thing which you are trying with bootstrap is not really possible unless you go for your own #media selectors. There is a library called Neat. I think this is the example you are looking for.
EARLIER ATTEMPTS:
Try this, from here:
<div class="container-fluid">
<div class="row-fluid">
<div class="span6">
<div class="row-fluid">
<div class="span6">A</div>
<div class="span6">B</div>
</div>
<div class="row-fluid">
<div class="span6">C</div>
<div class="span6">D</div>
</div>
</div>
</div>
</div>
This should give you the following result:
[A][B]
[C][D]
Well that's a lot of divs. Not really sure if this can be made lighter.
The original question appears to be for an older edition of bootstrap.
Here's what solves the issue neatly in Bootstrap 3 markup. The key element is the clearfix div that affects xs and sm viewports [typical use case]. (sm not included in example below).
<div class="row">
<div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
<div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
<!-- Add the extra clearfix for only the required viewport -->
<div class="clearfix visible-xs-block"></div>
<div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
<div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
</div>
via getbootstrap.com
Here are 2 options that are responsive without the need for media queries. Resize the windows to see how they react.
CSS Columns:
http://jsfiddle.net/88t4L/
.row-fluid {
columns: 2 8em;
}
Here, the columns must be at least 8em wide, but if there's room for all of them to appear in a row, it will do so.
http://caniuse.com/#search=columns
CSS Flexbox:
http://jsfiddle.net/88t4L/1/
.row-fluid {
display: flex;
flex-flow: row wrap;
}
.row-fluid .span3 {
flex: 1 0 8em; /* grow equally, don't shrink, preferred width of 8em */
}
http://caniuse.com/#search=flexbox
We've just started to redesign our site following the responsive web design + mobile first philosophy and guidelines.
In a particular page, we are facing the following situation: in the "mobile view" of the page we want to have the elements arranged as the left part of the image shows.
That's why in the HTML these elements are declared as follows:
<div id="container">
<div id="A">A</div>
<div id="B">B</div>
<div id="C">C</div>
<div id="D">D</div>
<div id="E">E</div>
</div>
Up to this point, all of it is straightforward. The problem is that, using media queries, for higher screen resolutions we want to rearrange the items as shown in the right part of the image.
The general question, which solves our particular problem with this page, is: is it possible to float arbitrary elements to each of the two columns without having to change the HTML markup between the two versions? A pure CSS solution would be much desired.
Note: the height of the elements is unknown, and the width is percentual.
EDIT: For clarification, and regarding our particular case, we need the item E to be attached under item B, and not vertically aligned to D. This fiddle shows what we don't want.
You could float A, C and D to the right. However you might need to apply overflow:auto to B and E. Also note, that if B is higher than A, C is getting pushed down to align accordingly.
Fiddle
Could you do something like this?
<div id="container">
<div id="A">A</div>
<div id="B" class = "left">B</div>
<div id="C">C</div>
<div id="D">D</div>
<div id="E" class = "left">E</div>
</div>
<style>
.left { float:left; }
</style>
You can just set float:left in the media query you want and ignore it in the other one.
Edit:
In response to OP's feedback that B and D were not sitting directly on top of each other, revising the code to float: right instead fixes this. ie
<div id="container">
<div id="A" class = "right">A</div>
<div id="B" >B</div>
<div id="C" class = "right">C</div>
<div id="D" class = "right">D</div>
<div id="E" >E</div>
</div>
<style>
.right { float:right; }
</style>
For the normal layout, you should do it like this.
Both divs should be left floated.
<div id="container1">
<div id="left">
<div id="B">B</div>
<div id="E">E</div>
</div>
<div id="right">
<div id="A">A</div>
<div id="C">C</div>
<div id="D">D</div>
</div>
</div>
The problem is that the mobile version uses another arrangement.
So one solution is to make onther version for the mobile page and hide #container1 (and vice versa for the other site).
<div id="container2">
<div id="A">A</div>
<div id="B">B</div>
<div id="C">C</div>
<div id="D">D</div>
<div id="E">E</div>
</div>