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
Related
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.
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;
}
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.
how to make 3 column layout where:
left column is fixed width
middle column is auto width (not fixed)
right column is fixed width
and all columns height are equal (but exact height is unknown)
Example:
I know i can do it by using tables, or display:table-cell, but is it possible to do it wihout using tables? I would go for table-cell but it doesn't work with older ios/android mobile devices and older browsers.
Is there some css hack available to do it without table-cell ?
Edit: In this particual case I just want to set full height color background (left: color #A, middle: color #B, right: color #C)
Edit2: I feel like 1999 table layout poltergeist/ghost is laughing in front of my face
Edit3: no js please
Have you tried using a separate <div> to draw desired backgrounds? Here, I've created an example http://plnkr.co/edit/WOaF3SZ9N8sswsxbZ116?p=preview
Take a look at my fiddle:
http://jsfiddle.net/RB9JZ/1/
I've had to use javascript to make the columns the same height:
$(".col").setMinHeight(3);
In the setMinHeight(3), 3 = number of columns, and give each column a class of col or whatever class you'd like.
This is an interesting question. Since Rich already figured out the columns, I'm going to address the issue of getting all the columns "the same height". Like you said, this is very difficult to do without table behavior. What I've always done is use background images on a div that wraps all columns. This div stretches to the height of the tallest column automatically, and if you have a repeating background, it will give the illusion of matched columns. Since you have a special case of 3 columns with a fluid width in the middle, you will probably need two divs to wrap the 3 columns, and have two background images. One aligns left, and one aligns right. Let me know if that doesn't make sense.
maybe this variant:
display:block;
height:100px;
I've been trying to come up with a way to create a 3 column web design where the center column has a constant width and is always centered. The columns to the left and right are variable. This is trivial in tables, but not correct semantically.
I haven't been able to get this working properly in all current browsers. Any tips on this?
Use this technique, and simply specify a fixed width for the centre column.
Check this out: http://www.glish.com/css/2.asp
And replace the width: xx% for #maincenter by a fixed value. Seems to work when I change it with Firebug, worth a shot?
#maincenter {
width: 200px;
float: left;
background: #fff;
padding-bottom: 10px;
}
I think you'd need to start off with initial (fixed) widths for both sidebar columns and then, when the page loads, use javascript to get the window width and calculate the new width of the sidebars.
sidebar width = (window width - center column width) / 2
You could then reapply the javascript if the window is resized.
This article at A List Apart has a solution resulting in a 3-column layout that will :
have a fluid center with fixed width sidebars,
allow the center column to appear first in the source,
allow any column to be the tallest,
require only a single extra div of markup, and
require very simple CSS, with minimal patches.