I have a question about what would cause the following error in bootstrap 3.
Earlier I was writing some HTML and using CSS to style and was using bootstrap 3 for the rows and the columns.
Now I had everything inside of a fluid container and the container had margins etc. It has a standard header, and each row was split into two columns where each size has a width of 6 ie col-lg-6 .... inside of the container and then I had labels and inputs inside of my rows. Just a basic layout.
Now, whenever I tried to give a bottom border to each row I noticed that after inspecting the element the row was actually outside of the designated
columns / div.
However, when I changed the class from row to row-fluid it works perfectly. Why is this? Also, I noticed that if I make a clear-fix div after using row-fluid it fixes some apparent spacing issues, is this a requirement when using row-fluid or is my code just messed up somewhere.
Asking, because I thought row-fluid was only a bootstrap 2 and not a 3 thing, or am I mistaken?
I would include a fiddle showing you exactly what I'm talking about, but don't have the code available atm.
TWBS-2
http://getbootstrap.com/2.3.2/scaffolding.html#global
TWBS-3
http://getbootstrap.com/css/#grid-intro
The <div> nested under your <div class="row"> carry the attributes container width dependent on viewport size, including all gutters and padding.
Comparing TWBS-2 and TWBS-3, TWBS-3's grid framework is designated as fluid for all viewport sizes. .row-fluid is not documented as an option, but I would refer to their version history for those specific changes. If the version history of the <div class="row-fluid"> applies, then the gutters and padding of its children's <div> columns becomes full-width to the size of the container rather than fixed-width as designated by the rules of the TWB-S3 grid system without .row-fluid designation.
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 used the bootstrap framework to create a responsive site, however I have not used the bootstrap .container class.
For my project, all the content sits withing a div with a class of .wrapper. The wrapper is fluid and has a width of 80%, max with 1200px and min width 360px.
Within the wrapper I have used the standard .row and .col Boostrap classes.
I have tested the site and everything works as expected. The site validates and (even works on ie-9) and mobile devices.
Is it OK to use the above method without the .container class?
Many thanks,
p
There's no reason that you must use container elements. However, the .container-fluid class does almost exactly what you describe. I'd consider switching your custom wrapper to that for standardization and ease of maintenance.
Regarding your row margins--that's not a great idea. You may find yourself wanting to do a modern "flat" design where you'll want some of your rows stacked tightly. It's usually better to leave grid elements alone, and apply margins and padding to inner elements. You could put a class on the row to do so:
.row.padded > div div { /* > div should be a column */
margin: 1em 0;
}
<div class="container-fluid">
<div class="row padded">
<div class="col-xs-12">
<div> ... </div> <!-- this will have a margin -->
If you don't use rows, you are fine. Rows go to negative margins without container.
edit: Anyway, if you use bootstrap3, you should be fine even with rows...
Bootstrap is a big set of classes that are meant to be useful; however, by no means are you forced to use them. If you want something more customized than the default Bootstrap classes, then using your own class is totally fine.
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've been playing with bootstrap 3 and I noticed that if you use the Grid System without a container it becomes fluid, someone told me I shouldn't do that because the system was design to be within a container. What happens if I don't use the container class?, do I need it?, if so could I make the container class width 100% without messing up bootstrap's media-queries, or is there any other or better way to build a fluid layout with bootstrap 3.
Update Bootstrap 4
Outermost rows should also be wrapping in container or container-fluid in Bootstrap 4 to prevent horizontal scolling caused by negative margins on the .row.
Bootstrap 3
You should wrap row in container or you'll have a problem with the negative margins that BS 3 uses for the row element. Basically the row is designed to be within a container. Read more on the Bootstrap grid
Play with this example on Bootply: http://bootply.com/83751
According to the latest documentation:
https://getbootstrap.com/docs/5.1/layout/gutters/#no-gutters
it is reasonable to drop the outer container (or at least its css class assignment):
Need an edge-to-edge design? Drop the parent .container or
.container-fluid.
This appears to have been in the documentation since the 4.0 release: https://getbootstrap.com/docs/4.0/layout/grid/
I think you need it.
Without the container it kind a works - but it shows a horizontal scroll bar at the bottom of the page and around 20px are cut off from rightside of the screen.
See yourself how it works without the container class - just go to http://getbootstrap.com/ and remove the container class using inspect element.
Just use the container-fluid class instead of the container class.
class="container-fluid" will allow you to use full width.