I need to create a full height divider without breaking Bootstrap CSS grid layout because I might need to make the right column to be wrapped and go after the left column for some screen sizes.
Here is an image which shows the issue:
And here is a Bootply sandbox to play with.
My question differs from other questions about making the column 100% high. Although I have implemented the divider as a border of the right column, this is not mandatory - I don't care about the height of the right column, it might be left as it is, and the divider could as well be a separate HTML element. I need only the divider to be 100% high and not entire column.
Is there any way to create this red vertical divider while keeping Bootstrap grid layout intact to preserve responsive design?
Related
I am trying to achieve the following layout for one of the pages I am building using bootstrap 4.
Sections 1 and 2 are basically container fluids with col-4/col-8 and col-5/col-7 layouts and have a background image or background color.
On top of this I have to place a div with some text and button, and depending on the placement, left or right column, the content must be confined to the size of container i.e. left and right margins same as set by container. This also needs to be responsive in nature.
I have tried adding margins based on media queries that seems to be a very ugly solution.
How do I achieve this in a more efficient way?
Thanks!!
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 am a bootstrap newbie. I am trying to create a layout with full width and height. I need to have two divs, one as the header and the bottom one will have the content to fill the entire space below the header.
What is the best approach to accomplish this?
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 have a request to make a HTML/CSS 3-column layout that meets these criteria:
middle and right column have a fixed width
left column has a max-width
the 3 columns are horizontally centered
ff the browser's viewport gets shrinked and the left border of the left column touches the left border of the viewport, then, by further shrinking the viewport, the left column starts shrinking in width until width is 0. (like in this example, except for that here the left column also has a min-width).
I could not find such a layout. If it is possible, how do I achieve this? (Telling me, it's not possible, would also earn the checkmark).
Here is a guide to responsive layouts and another to some responsive frameworks you might consider using to achieve what you need to.
Generally it's good ettiqute on the stack network to try and create code yourself and then post specific questions if you get
stuck.