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
Related
This picture should help sum up what I want done.
The code for this can be found here: https://codepen.io/MatteCrystal/pen/xxXpLmK
<div class="container">
<div class="row">
<div class="row gy-2">
<div class="col text-end minWidth200 maxWidth200">
<b>Title: </b>
</div>
<div class="col minWidth350">
Info that spans <br />
multiple lines
</div>
</div>
<div class="row gy-2">
<div class="col text-end minWidth200 maxWidth200">
<b>Title 2: </b>
</div>
<div class="col minWidth350">
More info, that gives lots of details about somthing to the user
</div>
</div>
<div class="row gy-2">
<div class="col text-end minWidth200 maxWidth200">
<b>Title 3: </b>
</div>
<div class="col minWidth350">
Even more info. To give the user a very detailed overview of somthing super important and relevant to their task. This info is integral if you want you're users to have a good user experince.
</div>
</div>
</div>
</div>
Basically, I want the contact page to be made of two pieces of content each. The title portion and then info portion to the right of the title. But on small screens instead of having the title take up valuable width I would prefer to just place the info portion underneath the title.
the title elements are forced to be the same size so they all look uniform, The text portion has a minimum size it can be but it can also grow larger to fit the page.
The problem is the title elements have the bootstrap text-end class to align the title right. But when the minimum size constraints are met the two columns will be stacked on top of each other. When this happens the title element needs to be aligned left otherwise it looks awkward. You can see what I mean in this image.
So is there any elegant or built in class for bootstrap that can achieve the results I want? I want a solution that will be flexible and not require additional changes if I decide to increase or decrease the min or max width allowed for the title or info elements. Ideally I need an option that can detect when a bootstrap row with two or more cols becomes sized small enough that each col becomes stacked on top of each other instead of side by side. Due to various factors this can't be a hard coded value since the moment this happens could differ depending on the circumstances.
This is a classic stacked to horizontal bootstrap layout.
You just need to use the responsive .col-* classes.
Remember BS uses the "mobile first" scheme, so start with .col-12 to ensure full-width on the smallest screens. Then add the appropriate col class(es) for the width(s) you want above each particular breakpoint i.e. .col-md-2 to be 2/12 of the width for medium and above. You can combine this with the responsive text alignment class .text-md-end to only right-align above medium.
Also, note in the example below there is no need to nest multiple .row.gy-2s (unless you have another requirement), columns will automatically wrap to a new line at 12 columns so, I have simplified your markup.
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<div class="container">
<div class="row gy-2">
<div class="col-12 col-md-2 text-md-end">
<b>Title: </b>
</div>
<div class="col-12 col-md-10">
Info that spans <br /> multiple lines
</div>
<div class="col-12 col-md-2 text-md-end">
<b>Title 2: </b>
</div>
<div class="col-12 col-md-10">
More info, that gives lots of details about somthing to the user
</div>
<div class="col-12 col-md-2 text-md-end">
<b>Title 3: </b>
</div>
<div class="col-12 col-md-10">
Even more info. To give the user a very detailed overview of somthing super important and relevant to their task. This info is integral if you want you're users to have a good user experince.
</div>
</div>
</div>
Recently, I started making an admin page on my site to edit multiple small tables (1-5 entries). They got all displayed on one page, and the tables got nested in a div as follows:
<div class="row">
<div class="col-xs-12 col-sm-4 col-md-4">
<!--table 1-->
</div>
<div class="col-xs-12 col-sm-4 col-md-4">
<!--table 2-->
</div>
...
</div>
I did this with six tables, and this is how it looks like if they have the same amount of records (one table is one black block):
When now the first table has one more record, the first table is larger and therefore the last div is wrapped to a third row:
What I actually want to achieve (if possible with the boostrap grid system) is that the 6th table does not get wrapped to a third line but just placed a little bit lower, just like this:
Is that possible somehow using or not using boostrap?
This variant would also be acceptable, but not using a table but a responsive layouting (EDIT: This was achieved by using #Skelly 's answer):
Thanks for advice!
UPDATE
I just randomly found out one possibility to achieve the first desired variant: You just define one div per column and place all the elements (in this case tables) inside, so they don't rely on each other.
Something like that:
<div class="row">
<div class="col-xs-12 col-sm-4 col-md-4">
<!--table 1-->
<!--table 4-->
</div>
<div class="col-xs-12 col-sm-4 col-md-4">
<!--table 2-->
<!--table 5-->
</div>
<div class="col-xs-12 col-sm-4 col-md-4">
<!--table 3-->
<!--table 6-->
</div>
</div>
This is due to varying column height. You need a "clearfix" reset every 3 columns to force even wrapping. One way is to use the approach recommended by Bootstrap, or in this specific case you can use a simple CSS clearfix like this..
#media (min-width:992px) {
.auto-clear .col-md-4:nth-child(3n+1){clear:left;}
}
Demo: http://codeply.com/go/mONLiFj30T
For other "clearfix" scenarios with different col width and grid tiers, there is a universal CSS only clearfix solution which will fit more scenarios (unsupported).
Another solution would be CSS columns, for a "masonry" style layout, but it doesn't use the Bootstrap grid:
http://www.bootply.com/mYkzRDvbEq
See my more complete answer on this issue
You can solve this in various ways, depending on what you want to use and needed browser support.
Grid: The Rambo way
If you're sure your tables won't have more than five records, you could try giving them all an appropriate min-width. Surely not the most elegant of things, though.
Grid: The FlexBox way
As you can see from caniuse, FlexBox's browser support nowadays surely isn't bad. By setting this on the container element
.container {
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
and then doing the same on the children, or elements of the grid, you can make it so they all stretch to fill in that ugly white space, thus achieving another grid layout without being... unelegant?
Grid: The Javascript way
Another way to achieve a grid layout in this case is obviously using JavaScript to make it so they all have the same height as the highest element in the grid. The faster way would be using a jQuery plugin, which also lets you give them the same size by row only if needed, which seems fitting in your case. You already have to use jQuery because of Bootstrap anyway.
Masonry: The Javascript way
The non-grid system you specified with differing dimensions is called a Masonry Layout. There's a useful library for that as well, although I don't think it'd be worth if you only need to use such a layout in that area only. It also makes your markup quite dirty, and I don't know whether it fares well with Bootstrap.
Masonry: The Boostrap way
I'm not sure as I haven't tried it, but you could try organizing content this way:
<div class="row">
<div class="col-sm-4">
<!-- table 1 -->
<!-- table 2 -->
</div>
<div class="col-sm-4">
<!-- table 3 -->
<!-- table 4 -->
</div>
<div class="col-sm-4">
<!-- table 5 -->
<!-- table 6 -->
</div>
</div>
It might not be an optimal solution in case your tables need to be in a precise order, as well.
All the columns in one container > row?
<div class="row">
<div class="col-xs-12 col-sm-4 col-md-4">
<!--table 1-->
</div>
<div class="col-xs-12 col-sm-4 col-md-4">
<!--table 2-->
</div>
...
<div class="col-xs-12 col-sm-4 col-md-4">
<!--table 6-->
</div
</div>
You could use
<div class="clearfix visible-xs-block"></div>
For the various sizes at certain positions while keeping it flexible for different layouts.
<div class="row">
<div class="col-xs-12 col-sm-4 col-md-4">
<!--table 1-->
</div>
<div class="col-xs-12 col-sm-4 col-md-4">
<!--table 2-->
</div>
<div class="col-xs-12 col-sm-4 col-md-4">
<!--table 3-->
</div>
<div class="clearfix visible-sm-block visible-md-block"></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.
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
I'm using Twitter Bootstraps grid system and inside that I use their panels. I have two cols and in each col I have one panel. But this creates a horizontal scrollbar on my page.
I could probably disable the horizontal overflow. But I'd rather "fix" the problem in a cleaner way that Bootstrap is causing.
What would be a good way to solve this problem?
Example: http://www.bootply.com/iPdjlxuexk
<div class="row">
<div class="col-md-6">
<div class="panel panel-default">
<div class="panel-heading">Form widgets</div>
<div class="panel-body">
Panel content
</div>
</div>
</div>
<div class="col-md-6">
<div class="panel panel-default">
<div class="panel-heading">Selected page widgets</div>
<div class="panel-body">
Panel content
</div>
</div>
</div>
</div>
If I wrap a <div class="container"></div> around the row div, then the panels inside are really small. A big margin-left and margin-right apprears on the container. Not really what I'm after either.
http://www.bootply.com/BWMTAFeO8x
The problem is occurring because of the following HTML class:
col-md-6
Specifically, with Bootstrap, this means that whatever is currently in this column will extend to be 6 column spaces wide. This is not good if you are looking to only have something, let's say, 3 column spaces wide because it actually stretches what you are trying to do.
How do we fix it?
Use a smaller width space and then use Bootstraps ability to push/pull things. I will demonstrate what I mean via a JsFiddle, which is found here.
Basically, I altered your HTML to become the following:
<div class="row">
<div class="col-lg-3 col-md-3 col-lg-push-3 col-md-push-3">
<div class="panel panel-default">
<div class="panel-heading">Form widgets</div>
<div class="panel-body">
Panel content
</div>
</div>
</div>
<div class="col-lg-3 col-md-3 col-lg-push-3 col-md-push-3">
<div class="panel panel-default">
<div class="panel-heading">Selected page widgets</div>
<div class="panel-body">
Panel content
</div>
</div>
</div>
</div>
NOTE
In my demonstration, I added the ability to view the panels in both a large screen setting and a medium screen setting versus just having it in a medium setting. I also had to push the columns according to the screen sizes. You can see this in effect with the JSFiddle by changing the width of the portion of the output screen in the demo. This is useful because you can see the difference between a large/medium sized screen to a small/extra-small sized screen.
More Information:
You can find more information on the grid system via the actual website. It will show you how the grid system is laid out and how you can use the push/pull aspect as well.
http://getbootstrap.com/examples/grid/