Is it possible, that instead of transforming all elements to width: 100% when you get to the min-width for that selected col-*, you could move the last element to the new line and update the width of the elements in the original line?
I am using also sass, if that makes it easier.
Is this possible with bootstrap CSS without writing any javascript code?
From:
To:
Not OK:
Now I am having problem when I have items on the left and right side of this content. The width should be static, and now changing size of window messes up the content. Add action should be in new line when Dimensions Names are horizontally.
Plus:
Dimension Name col-lg-2 min width is not big enough.
example: http://jsfiddle.net/mato75/s8tmqvoo/2/
Yes...
<div class="row">
<div class="col-lg-2 col-md-3 col-sm-4">Data 1</div>
<div class="col-lg-2 col-md-3 col-sm-4">Data 2</div>
<div class="col-lg-2 col-md-3 col-sm-4">Data 3</div>
<div class="col-lg-2 col-md-3 col-sm-4">Data 4</div>
<div class="col-lg-2 col-md-3 col-sm-4">Data 5</div>
<div class="col-lg-2 col-md-3 col-sm-4">Data 6</div>
</div>
On medium screens this will have four across. On small screens this will have three across, and the fourth element (Data 4 in this example) will display on a second line.
Whatever you end up using depends on how you want the content to display on different screen resolutions. If you want this to display on mobile as you describe then change col-sm-4 to col-xs-4.
Bootply Demo
Related
I want take 1/3 width of a single row for all device.
Is there any other option to do instead of this code....
<div class="row">
<div class="col-md-4 col-lg-4 col-sm-4 col-xs-4"></div>
<div class="col-md-8 col-lg-8 col-sm-8 col-xs-8"></div>
</div>
Since Bootstrap is defined mobile first, you should be able to just define the xs size, like so:
<div class="row">
<div class="col-xs-4"></div>
<div class="col-xs-8"></div>
</div>
use col-xs-4 it can act md-4 and lg-4 on larger devices.
you cannot use md-8 there is only 12 grids.
The scenario is:
[A][B][C]
When I move to XS, I want to order:
[A][C]
[B]
Is this possible with the following structure? Do I need to rearrange?
<div class="col-sm-3">A</div>
<div class="col-sm-6">B</div>
<div class="col-sm-3">C</div>
By default in Bootstrap, if the column count is greater than 12 in a given row, any columns over the mark will be moved to a new row.
Also, you can set individual column sizes for each screen size by chaining the screen size class to a <div>.
With that being said, you could do something like this:
<div class="row">
<div class="col-xs-6 col-sm-3">A</div>
<div class="col-xs-6 col-sm-6">B</div>
<div class="col-xs-12 col-sm-3">C</div>
</div>
On small screens, this would display as:
[___][______][___]
And on extra small screens as:
[______][______]
[______________]
Feel free to adjust the column sizes to fit your needs, just be sure to have > 12 columns in the <div class="row"> to force the extra column to push below.
Hope that helps!
EDIT
Bootstrap supports column reordering based on screen size, using the col-X-pull-Y classes (size, columns). So, a simple solution for this is:
<div class="row">
<div class="col-xs-6 col-sm-3">A</div>
<div class="col-xs-6 col-sm-3 col-sm-push-6">C</div>
<div class="col-xs-12 col-sm-6 col-sm-pull-3">B</div>
</div>
Notice the order has changed to accommodate the states at the lowest size, and I simply push and pull one column at any larger size to position them where they are needed.
Bootply : http://www.bootply.com/ziPH2ghaTB
HTML :
<div class="container">
<div class="col-xs-6 col-sm-4 a">a</div>
<div class="col-xs-6 col-sm-4 col-sm-push-4 c">c</div>
<div class="col-xs-12 col-sm-4 col-sm-pull-4 b">b</div>
</div>
In the following layout, I have a col-md-2 which doesn't seem to be rendering. You will see it in the part under "Current Projects". All of the blocks below that in the various sections are to be centered. I have a col-md-2, col-md-8, col-md-2 with content in the col-md-8. Right now they all appear to the left, as if that col-md-2 doesn't exist.
<div class="row featureBox">
<div class="col-md-2"></div>
<div class="col-md-8"> CONTENT HERE </div>
<div class="col-md-2"></div>
</div>
Use the .col-md-offset-2 class with your col-md-8 div. The code will look like this:
<div class="row featureBox">
<div class="col-md-offset-2 col-md-8"> CONTENT HERE </div>
</div>
If your first .col-md-2 is empty it's not rendered. If you want it rendered you need to put some content in it, eventually whitespace (not recommended, as it will show up on smaller widths as empty space above the content of your .col-md-8).
If the only reason you added that column was to offset the middle column, all you need is
<div class="row featureBox">
<div class="col-md-8 col-md-offset-2"> CONTENT HERE</div>
</div>
Same goes for xs, lg or sm.
having trouble with laying out a fluid column layout in bootstrap 3.
the structure of the HTML elements looks like this:
div.container-fluid
div.row.upperrow
div.row.contentrow
div.col-lg-3
div.col-lg-1
div.col-lg-5
div.col-lg-3
even the first 3 divs, which only add up to 9/12 of the 12-column layout, are much wider than the page. the div.col-lg-5 easily takes up 70% of the row (not 5/12). the div.col-lg-3 is pushed under the first 3 divs as they are too wide.
what could be the problem here?
As stated at http://getbootstrap.com/css/:
Content should be placed within columns, and only columns may be immediate children of rows.
Your layout has a row as child from another row. Put another col-12 in between or remove one row.
Look at this fiddle. Here is how it works.
<div class="container-fluid">
<div class="row">
<p class="text-center">Here is a row</p>
</div><br/>
<div class="row">
<div class="col-3 col-sm-3 col-lg-3 col">Col 3</div>
<div class="col-2 col-sm-1 col-lg-2 col">Col 2</div>
<div class="col-4 col-sm-5 col-lg-4 col">Col 4</div>
<div class="col-3 col-sm-3 col-lg-3 col">Col 3</div>
</div>
</diV>
I've got a couple of elements that I'm really struggling to align horizontally. I've got a JSFiddle example to try and illustrate it. The layout that I'm trying to achieve in particular is looking at the first/left most Email field.
I wish to have both the slider and input field aligned with the label if space, or both of them sitting below the label otherwise.
What I find however is that I end up with the controls wrapping, or large amounts of whitespace (or greyspace even) around the textbox - rather than it filling to take up the space.
Unfortunately I've found that I can't seem to use col classes on the toggle because this causes issues with the rendering of it.
EDIT
So I've tried using a bootstrap library for my sliders instead in the hope that it'll allow for a better layout, and attempted to use bootstrap column sizing. This leaves me with the similar problems as you can see in the following JSFiddle.
I would still prefer to use the first library if I can so bonus if I can solve the problem with the first library.
My HTML looks something like this:
<div id="settingsBar" class="">
<div class="well bs-component col-sm-6">
<form class="form-horizontal">
<fieldset>
<legend style="color: #ccc;">General</legend>
<div class="form-group row">
<label for="txtBackColor" class="col-sm-12 col-md-3 col-lg-4 control-label">Background Colour</label>
<div class="col-sm-12 col-md-9 col-lg-8 row">
<div class="col-xs-1 col-sm-0"></div>
<input id="tglBackColor" type="checkbox" name="tglBackColor" class="bootstrap-toggle form-control" checked data-on-color="success" data-off-color="danger">
<input id="txtBackColor" type="text" class="colorPicker form-control col-xs-10 col-sm-7 col-md-10 col-lg-11" />
</div>
</div>
</fieldset>
</form>
</div>
</div>
The problem I have is that depending on the size, the boxes overlap. What I want is for the final colour box to shrink down to fit on the same line, and the label sits either above or inline if there's enough space.
Bootstrap has col- controls for different sizes.
You can control rendering of collumns by using proper classes, e.g.:
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3"></div>
This means, collumn with such class will render over responsivity like 100% of container width (smartphones), 50% of container width (tablets), 33% of container width(small notebook/desktop screens) and 25% of container widht on high resolution displays.
You can also try put div with class="row" before your columns. Class row will cancel left and right padding of collumns. E.g.:
<div class="row">
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">some div</div>
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">some div</div>
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">some div</div>
</div>
You can find more info about bootstrap basics here