Since Bootstrap 4 auto columns can adapt to whatever width is needed to fill a row, I thought I'd use it to populate a dropdown menu that may have 1 or 2 columns depending on user location.
The problem is the dropdown width does not expand to accommodate more than 1 column. When I add the second column it simply displays under the first, and if I change the class from "col" to "col-6" they display side by side but the contents of the columns overlap.
Setting an explicit width for the menu isn't an option since if I make it wide enough for 2 columns it will be unnecessarily wide when only 1 column is displayed.
How can I achieve a dropdown menu that will adapt to the width of it's contents, and to the width needed for another column when present?
Demo of the problem:
https://www.bootply.com/VH5uvew6eQ
The whole Bootstrap grid system is predicated on the idea that the parent of a .row has a determined width (typically provided by a .container or .container-fluid) and .row helps you divide that width.
It is designed to constrain/stretch column contents, not to accommodate the auto width of its columns, so that it provides your layout with some sense of order. Indeed, v4 is more flexible than previous versions, as it allows you to divide the space with a certain amount of flexibility (using flexbox) but, still, within the confines of its provided size.
If you don't need that, don't use the grid system for your particular element. Only use it where it makes sense.
In your case, adding a double class to the dropdowns you want enlarged and overriding Bootstrap's .dropdown-menu: min-width: 10rem with your own
.dropdown-menu.double { min-width: 20rem; }
and perhaps adding no-gutters class to your rows might be a step forward towards your goal.
Do note your layout has multiple duplicated ids which are invalid HTML.
Related
Often designers prototype our websites by using tools like Illustrator, Sketch, etc. and when doing so designers try to keep in mind the grid that the developer will be using to best communicate exact measurements to the developer.
Grids are often implemented in the following order:
Margin (Optional)
Column
Gutter
Repeat 2&3
Margin (Optional)
After setting up a grid in a tool, designers will attempt to place blocks to the grid system, starting with the column and NOT the gutter. As shown below:
However, in Bootstrap v3 some elements take up the width of the gutters and thus this may be inappropriate and leads to confusion on how properly to design for these websites. In the example below these are form inputs. Notice how the input starts and includes the 15px gutter padding (inserted twelve .col-xs-1 with spans inside to indicate borders). Codepen Link
.col-xs-1, .col-xs-3
background-color: blue
.col-xs-1 span, .col-xs-3 span
background-color: pink
.form-control
background-color: black !important`
Yet in my design, I've attempted to start from the column as shown below (The columns are indicated by the space in GRAY, the columns are just thin due to responsiveness but the gutters remain the same -- sized down for the iPhone 6 Plus).
Am I misunderstanding something? As I'm developing and designing the product myself, I'm unsure as to how I can get exact measurements in Bootstrap for these elements that contain the gutter in the design, then develop it to match the design. How do I design to a Bootstrap grid when some elements, it seems, take up the width of the gutter? Or conversely, how do I alter the Bootstrap code so that some elements do NOT take the width of the gutter?
Do elements TYPICALLY take the width of the gutter? If so, why are designers expected to design from the column?
(PS I am aware that there's a design Stack Exchange, but I feel like this question may come from a misunderstanding of Bootstrap rather than design principles)
I see your conundrum.
To truly understand TWBS' grid system one needs to disregard prior learning... the design framework of the margin-column-gutter, though correct, applies to frameworks like 960gs. This framework is based on fixed width grid systems with "columns" set a fixed px-based width. You've assumed this as your wireframe.
TWBS is a responsive framework - the major difference is that one cannot fix the widths because beeing responsive; the width needs to scale ("move" as the screen resizes), and thus based on percentages.
Web layout is a set of columns, like this:
<div class="container">
<div class="row">
<div class="col-md-*">content</div>
...
</div>
</div>
and the columns have "padding" (both left and right). The framework is thus padding-column-padding-repeated.
See this JSFiddle for an example.
although I am not quite sure I understand your question, let me give you some insight that might help you.
Although I have met clients that want their designs replicated 1:1, imho it doesn't really matter if a column is 90 or 100px wide as long as it follows the same principles along the whole site and looks uniform.
Bootstrap doesn't have gutter between columns as a margin but as a padding withing the columns. That is, each column has a specific percentage width - by default divided by 12ths - and within this column a padding exists in either side of the column - by default 15px.
The container of these columns - the row class, has a negative margin equal to the padding within this columns. This way, the first and last columns' width is actually the column-width minus one padding from either side of the column, but in total they end up the width of the parent wrapper container. The negative margin and the column padding should be defined depending on the GUTTER width you prefer between columns like:
gutter width = 2x padding width
padding width = row negative margin width
Hope it makes sense.
Thought of adding more to the answers above,
12 columns grids system is the default of TWBS 3.xx, as well as the 15px padding/gutter.
Note: 12 column grid system is a tested design for the best user experience for screen responsive
So the design template you used above is clearly for the default bootstrap. And designers does not have to be stick to it. Unless they are ok with it. And if designers want to have different gutter rhythm other than 15px, e.g. 10px. or different column numbers, still they can generate a custom version by compiling the bootstrap sourcecode. Or the easiest way is to use the customize tool on the site.
Tip: You can remove the gutters by using simple css lines if needed. See below for the solution
So explaining the TWBS grid system
Bootstrap starts with 100%/12 width column cells
And then each cells has 15px padding left & right
Explaining further,
<div class="container">
<div class="row">
<div class="col-md-*">content</div>
...
</div>
</div>
Starts with class="container" comes with 15px padding both left and right
Then class="row"comes with -15px padding both left and right
So this resets the 15px starting and ending gaps
Then class="col-md-*" has padding of 15px. So if you put another container inside and change the background color for it, you can see gaps on both sides.
So this is why you see the gutters there in your example.
Quick solution,
.no-gutter > [class*='col-'] {
padding-right:0;
padding-left:0;
}
I have in my layout a container that has 3 columns and should have many elements.
If all elements have the same height it looks very nice, but if one of them has a different height it will move the entire row instead of just one column.
This is how it looks:
This is how it should look:
How can I do that with bootstrap (v3)?
This is my html
To achive that, if you don't want to have a fixed height in elements, I think you should follow a column based strategy instead of row based one because your cols do not have an equal height, so when floating the break the flux you actually want.
But if you want it to exactly have it like in your design, I suggest using JavaScript.
FIRST ISSUE:
Let's say I have a section in my website where I want to break the width of the container 1200px width. In this section I need to position an image on the very left side of the browser screen and on the right side some text.
I assume that in order to make this I have to use container-fluid and I'm using it like this:
<div class="container-fluid">
<div class="row">
<div> HERE IS THE CONTENT FOR IMAGE AND TEXT </div>
</div>
</div>
When I check this in the browser:
It appears an horizontal scrollbar and I have to remove the negative margins of the .row class in order to get rid of the scrollbar.
Is this the normal way of doing this?
SECOND ISSUE:
Let's say I want to create a section where I want to have a full width background color and the content to be withing the default bootstrap grid width of 1200px.
Is it necessary to create an container-fluid in order to do this? Or is better just to create an extra div an add there the background color ?
In Bootstrap, the grid is defined by three components: the container, the row and the column(s). The container comes in two flavors: container, which sets the max-width of the container for each of the specific breakpoints defined in Bootstrap and centers the container within the viewport; and the container-fluid, which simply sets the width to 100% of the viewport display. Both the containers set the padding to 15px.
The purpose of the row is to contain the columns which float left by default, so it will automatically clear the float. It has a -15px margin to negate the padding added by the container.
The columns go inside your rows. Columns are based on a grid of 12. If you only need one column at the x-small breakpoint and up, then add one col-xs-12. Want two equal columns at that viewport width, add two col-xs-6. Columns have 15px of padding left and right, so there are always consistent gutters.
The row margins negating the container width may sound useless, but it's important and very clever, because it allows you to nest rows and columns inside other columns allowing you to create an endless combination of grid divisions.
So, your issue is that you're not using the grid the way it is designed. You must have at least one column inside a row inside a container.
In bootstrap you need the following structure:
<div class="container-fluid">
<div class="row">
<div class="col-xx-xx">
...content goes here...
</div>
</div>
</div>
The reason of this structure is that the container will try to grab and center the content, in the case of the .container-fluid, it grabs 100% width columns instead of the traditional ~960ish pixels that has been used.
The row will allow you to allocate 12 columns of content in the order you decide, which is the next div.
The class .col-xx-xx will allow you to specify the breaking point of that column, lg for large devices, md for medium devices sm and xs for mobile/tablet devices.
The second dual xx in .col-xx-xx will allow you to specify how many of the 12 columns you're going to take in that container. For Example, .col-lg-3 Will be a column who's breaking point is as large device (1200px or so) and it will take 3 column spaces.
So it is necessary to use the structure above, else you will have that scrollbar on the x-axis bothering.
EDIT
As for your second problem, it is really necessary that you use the structure given above in the code, you want it to be full width? that means, no margins and paddings, I have a small trick for that that I have been using for a while now, I'll explain it below:
Use a container with the class of jumbotron as follows:
<div class="jumbotron my-own-jumbotron">
...content goes here
<div>
Since the jumbotron es designed to be responsive, it will act as a responsive container. on the next class, .my-own-jumbotron specify the background image or color you want for it, and depending on the content you add to it, it will adjust the size of it. I don't know if that's the solution you're looking for, but here's a demo:
https://www.hsoto.me/00295134567891srgsrgsrht36erdrbd5ye546/ipotra/
The third div will be a jumbotron with a custom background-image that expands as needed, and you can resize it and view it on a mobile device, and it is complete responsive, and full width.
I found that this way, it is not necessary to use the .container-fluid div.
I develop a front-end for a site and run into a serious problem. I use bootstrap 3 to make the site responsive.
I use the grid feature to layout but I need to meet the following requirements:
- The columns must have the same height
- There should have space between columns
The first problem is sold via SO. I set the row to overflow: hidden; and the columns to margin-bottom: -99999px; padding-bottom: 99999px; This solve the column height problem but I can't put space the outer part of the columns because I use all of the 12 columns. (col-md-4, col-md-4, col-md-4 / col-md-8, col-md-4) If I set side margin to the columns the last column wrapped to the next line.
The other problem to use the column as container is margin-bottom and the padding-bottom values. I can't set border-radius because the bottom border is not visible.
It's obvious to use an inner container. I did that but the inner div didn't fill the available height. I made a Codepen example.
I tried the following:
- Set the inner div position to relative/absolute with bottom: 0 value
- Set height, min-height 100% with combination of
inline/block/inline-block
My first choice would be a CSS solution because of the mobile first approach but I will consider any other solution too. The jQuery is loaded (required by the JavaScript component of the bootstrap) and the knockout also loaded.
About the example. The purpose is that the aqua colored 'panels' have to be the same height (inside a row of course) even if its content is smaller than the available space. If you didn't use Codepen before, You could use the editor/full page menu to view the example in full screen.
Thanks for any advice.
Twitter bootstrap uses variable #grid-gutter-width which is used to set as padding for left and right of all columns if you want to increase or change space between columns then modify this variable value which you will find in variables.less
I am trying to create an input mechanism using the flex box model. I know it's not supported by all browsers, but that doesn't matter in this case. It really only needs to work on web-kit browsers.
I am trying to build a nice two column layout without needing to use specific widths. I have the flex property set to one on both the label and the input. However, as you can see, when the label element gets long, it messes up the width of the input that is next to it.
I want both label and input to be the same width down the column, but I want them to grow and shrink as the size of the window/device changes.
Is there a way to do this without having to set a width on either of the elements?
Update
I can set a max-width on the label elements to 5% and I basically get the desired effect. However, I'm still wondering if there is a way to do this without setting any width and using purely the flex box?
Here is a working jsFiddle.
The example you provided doesn't have columns at all, just the appearance that there are columns. Without actual columns you will have to set widths to make these 3 unreleated blocks look they are joined in some way.
You should be using the new CSS3 Flexible Box syntax, which is now 'flex' rather than 'box'. See the spec: http://www.w3.org/TR/css3-flexbox/ With this you can set the elements to have a <grow> <shrink> <default width> of 1 1 50%, so they will grow and shrink at the same rate and will each take up 50% of available width (you can adjust this or make it 60/40 or whatever).
Example JSFiddle: http://jsfiddle.net/XTa98/4/
Otherwise, if you want actual columns so that you don't have to set widths, you need to wrap all of the labels in their own "column" div and all of the inputs in their own "column" div.
JSFiddle: http://jsfiddle.net/XTa98/5/
This has actual columns and no widths set, but it does not degrade gracefully anymore since the elements are not in their own rows. To alleviate this you could always provide text-overflow: ellipses to truncate the text.
In any case, you have a trade-off. If you want the appearance of columns without actually using columns, you will need to set some type of width. Otherwise, you can use real columns but the elements are no longer joined as rows and you will need to account for the overflow when shrinking the browser width.
You don't have to wrap the elements in column divs to avoid setting widths. Just set each label and input to flex:1, and you'll get them dividing up the width equally. However, this is effectively just the same as setting each to be 50% wide, in this case, so I'm not sure what advantage it really has.