I'm using angular and bootstrap-ui. I have two columns beside each other, the right one has a larger height then the the left due to the presence of controls. All I want to do is add some text in the right column that is aligned with the bottom of the left column, which should be easy. I will not admit how long I struggled with it.
It looks like the problem is that the left column itself is top aligned. so I have something like this:
*****************
* * * *
* col 1* * col 2 *
******** * *
* *
*********
I would like to cause col 1 to align with the bottom of col 2 within the row. From there aligning text in col 1 with the bottom of the col should be easy.
I've found many supposed solutions, but they don't seem to work. The most common involve overriding the display and vertical-align properties of the CSS, but doing this seems to screw up the rows alignment in odd ways. I've seen col 1 end up after col 2 or the row shrinking to not use it's full width of the page. The point being my attempts to override elements are messing with bootstrap. I believe this is because most suggestions are not actually for angular and bootstrap-ui.
The closest I got to something working was setting display:fluid for the row. This got the columns to be the same size without interfering with the rest of the look and feel. However, I then couldn't use text-right or verticle-align to position the text within col 1 on the bottom right of the column.
How can I get my text in my first column to align with the bottom of col 2?
There are issues that you can have if you try to use vertical-align within a bootstrap container. Even if you also try use (parent) display:table; and then in (child) with display:table-cell;. You lose the height control.
Your best option here is probably as I have set up in this Fiddle.
But saying that... because we use margin-top and when you resize the window to a smaller screen size you still have the problem with the top margin as you will see in the Fiddle.
But you can control this by using Bootstrap's lg, md, sm and xs to keep your text lined up, again this is also set up in the Fiddle to show how you can control this problem.
Resize the window, I have the large view setup in the fiddle.
<html !DOCTYPE html>
<head>
<link rel="stylesheet"href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" >
<style>
.block{
overflow: visible;
}
.block-a {
margin-top:200px;
height:100px;
}
.block-b {
height:300px;
padding-top:200px;
overflow: visible;
}
</style>
</head>
<body>
<div class="container col-lg-12"><br></div>
<div class="container col-lg-12 bg-warning block">
<div class="col-lg-3 col-lg-offset-2 bg-primary block-a "> Hello</div>
<div class="col-lg-3 col-lg-offset-1 bg-info block-b ">Great, lined up to the left.</div>
</div>
<div class="container col-lg-12"><br></div>
<div class="container col-lg-12 bg-success block">
<div class="col-lg-3 col-lg-offset-2 col-md-3 col-md-offset-2 col-sm-3 col- sm-offset-2 col-xs-3 col-xs-offset-1 bg-primary block-a "> Hello</div>
<div class="col-lg-3 col-lg-offset-1 col-md-3 col-md-offset-2 col-sm-5 col- sm-offset-2 col-xs-7 col-xs-offset-1 bg-info block-b ">Great, lined up to the left.</div>
</div>
</body>
</html>
Related
I am currently using bootstrap 4. In my code, gap between two item (.items) is 30px due to bootstrap two columns padding. But container has padding 15px. I think if gap between two items is 15px which is equal to container padding would be better looking. How can I do that?
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel = 'stylesheet' href = 'https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css'/>
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class = 'col-sm'>
<div class = 'bg-primary items'>A</div>
</div>
<div class = 'col-sm'>
<div class = 'bg-success items'>B</div>
</div>
<div class = 'col-sm'>
<div class = 'bg-info items'>C</div>
</div>
</div>
</div>
</body>
30px padding means it will be divided as 15px left and 15px right padding for div. So what is happening is, it is adding 15px padding from first(right side padding) and second div(left side padding) at center. So here is the solution:
div class="container-fluid">
<div class="row">
<div class = 'col-sm'>
<div class = 'bg-primary items'>A</div>
</div>
<div class = 'pl-0 col-sm'>
<div class = ' bg-success items'>B</div>
</div>
<div class = ' pl-0 col-sm'>
<div class = ' bg-info items'>C</div>
</div>
</div>
</div>
This is what I changed:
Added "pl-0" bootstrap class to second and third div. Hope it works!
You could simply remove padding from the middle column using px-0...
<div class="container-fluid border">
<div class="row">
<div class="col-sm">
<div class="bg-primary items">A</div>
</div>
<div class="col-sm px-0">
<div class="bg-success items">B</div>
</div>
<div class="col-sm">
<div class="bg-info items">C</div>
</div>
</div>
</div>
Or, use a special CSS class to override Bootstrap's gutter (=7.5px) ...
.p-row-sm {
margin-left: -7.5px;
margin-right: -7.5px;
}
.p-row-sm > div[class^="col"] {
padding-left: 7.5px;
padding-right: 7.5px;
}
Demo: https://www.codeply.com/go/SZcY3X4hTY
You can use Bootstrap utility classes to tackle this. Here's an example from my project:
<div class="row">
<div class="col-lg-6 pr-lg-2">...</div>
<div class="col-lg-6 pl-lg-2">...</div>
</div>
The idea is very simple: I apply half-gutters when my screen is big enough to show both columns.
Please note that I use 1rem gutters and pr-lg-2/pl-lg-2 gives me .5rem padding. You might want to use different values according to your Bootstrap config e.g. pr-lg-1 or pr-lg-3.
There are several issues at play with the issue described above. When viewing a BS grid layout on mobile (col or xs) the container padding is removed. As a result, the combined left and right inner padding of a two-column layout make it look out of balance (too much padding between columns).
The solution, in theory, is straight forward. remove the left or right padding globally. However, this will result in other imbalances, and if you are working and a layout that has a variable number of items difficult to predict. The solution is to remove half of the right padding on the odd column elements and half the left padding on the even column elements using the :nth-child(even/odd) selector. see the solution here BS4 Reduce Padding Between 2-Up Grid Cards on Mobile
In the Flexboxgrid framework I see a margin of -1rem on the .row class. In small viewports this creates a small horizontal scroll of the container.
Since I've seen this negative margin on other frameworks, what is its purpose? Inner columns have a padding of the same qty, reversed.
In the picture, red line is .container, dashed line is .row. Btw the margin is visible only on the right.
Because you're supposed to use them in combination with columns.
Columns generally have a padding to push the contents of them away from the border, in order to make it look nicer. However, when you are nesting columns within columns, the content keeps getting pushed inwards, which is mostly not a desired effect. To keep this from happening the rows have a negative margin, which pulls the columns back. In your case, it looks like you need to add a col-xs-12 around the column groups within the rows . This will prevent the content from being pulled too far.
Take a look here for a nicely explained introduction.
Here's a demonstration of how the .row class works:
.col1 {
background: red;
}
.col2 {
background: green;
}
body {
font-family: sans-serif;
}
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/flexboxgrid/6.3.1/flexboxgrid.min.css" type="text/css">
<div class="row">
<div class="col-xs-12
col1">
<div class="col-xs-12
col2">
<div class="box">Without a row</div>
</div>
</div>
</div>
<br>
<div class="row">
<div class="col-xs-12
col1">
<div class="row">
<div class="col-xs-12
col2">
<div class="box">With a row</div>
</div>
</div>
</div>
</div>
In general row is placed in container. container has padding of 15 and row has margin of -15
(There's a similar question here, but I am too much of a noob yet to translate this onto Bootstrap)
What I want is to have an area on the page between "header" and "footer" (let's call it "body"), which may have a
some fixed section, like BS4 "row", put on the top,
some variable content, consisting of several BS "rows", AND aligned
vertically on the middle of what is left of the body (or of the body
itself)
Can it be done in a responsive manner, and without JS (using only Bootstrap 4 CSS) ?
I've tried some stuff:
<body>
<div id="root" class="container">
<div style="height: 100%;">
<div><h1>HEADER</h1></div><hr>
<div style="min-height: 60%;">
<div class="h100">
<div>some badge</div><br>
<div>
<div class="row justify-content-between">
<div class="col-3">Item #2</div>
<div class="col-3 text-right">
<div>some stats</div>
</div>
</div>
<div class="">
<div class="row justify-content-center">
<div class="col text-center"><h3>THIS SHOULD BE IN THE MIDDLE OF A BLANK SPACE</h3></div>
</div>
<div class="row justify-content-center">
<div class="col-4 text-right"><button class="btn btn-link">it's just below and left</button></div>
<div class="col-4 text-left"><button class="btn btn-link">it's just below and right</button></div>
</div>
</div>
</div>
</div>
</div><hr>
<div class="footer">FOOTER</div>
</div>
</div>
</body>
(https://jsfiddle.net/f93mhdbr/) but as long as I add "d-flex" onto "body" div, or any of it's children, all the previous "row"/"col"-based layout turns into horrible mess ! (see https://jsfiddle.net/f93mhdbr/2/)
I suspect this is due to Bootstrap itself using Flexbox for column and rows,
but maybe any solution exists?
I will try to work on improving this question, I know it's very poor, but I right now I am too much in a despair to work it all out...
UPDATE: added links to whatever I was trying to reproduce
You need to use the flex property to achieve it. Using flex-grow here will make your variable element to grow and fill the remaining height of its container, if there is any. Then all is left to do is set align-items-center on the element to align it on the x-axis.
Here is the Fiddle
Please note I added background-colors so it's easier for you to see how much space each element uses, or use an inspector.
You can set any fixed height for the header, footer and content-top. The height of content and content-remaining will adapt responsively, because they have the property flex-grow: 1 set on them. Here's an example.
To explain further, because the container wrap has a min-height: 100-vh, the content element will grow to fill the entire viewport relative to the rest of the flexible items inside the wrap container. The same logic applies to content-remaining, the only difference is that its parent is the content element and not the wrap container.
As last, I added the IE fix for the min-height property on flex-items. It's a known bug and a quick and reliable fix is to wrap it in a separate flex container.
Hopefully this was helpful to you, if you have any questions left please comment on this answer.
I don't know how to make this kind of col 3 and 6 size.
Middle column has no padding, but it is not enough.
I was trying to make different sizes of col.
#media (min-width:992px){
.col-md-6 { width: 52,5641%;}
.col-md-3 { width: 23,7179%;}
}
but no success.
With Bootstrap you dont need to add media queries or your own width, just use the BS grid system (you can read more here) and let it handle all the tough work. Based on your picture a 3 column layout would use something like this:
<div class="row">
<div class="col-md-3">.col-md-3</div>
<div class="col-md-6">.col-md-6</div>
<div class="col-md-3">.col-md-3</div>
</div>
Make sure you columns total 12 like above (3+6+3) If you need extra padding in between columns just add a nested DIV and apply the spacing you want to those.
<div class="row">
<div class="col-md-3">
<div class="myclass">
this will have extra padding
</div>
</div>
<div class="col-md-6">.col-md-6</div>
<div class="col-md-3">.col-md-3</div>
</div>
.myclass {
padding: 20px;
}
Updated
Based on your comment if you want column 6 to be slightly larger than it is you will either need to expand that column and "shrink" the outer 2 columns to something like this:
<div class="row">
<div class="col-md-2">.col-md-2</div>
<div class="col-md-8">.col-md-8</div>
<div class="col-md-2">.col-md-2</div>
</div>
If that's not what you are going for then you can create your own table within bootstrap.
<div class="row">
<div class="custom-col">My custom left side</div>
<div class="custom-main">my main column</div>
<div class="custom-col">My custom right side</div>
</div>
Sizing each of the column as you need.
Maybe Bootstrap is not the best option for your problem. It works if only you can divide the screen in 12 equal parts. Rewrite this rule could break other stuff.
What about using flexboxes or other CSS framework more flexible?
I want to create little panels/dashboard for my interface. In my case I want to have two panels like so
+-------------------------------+ +-------------------------------+
| | | |
| | | |
+-------------------------------+ +-------------------------------+
Generally it is easy with Bootstrap 3.
<div class="row">
<div class="col-md-5">
</div>
<div class="col-md-5 pull-right">
</div>
</div>
The problem is, the gap of col-md-2, as it is the case here, is way too big. I cannot use a col-md-1 gap, because then both sides do not have an equal size.
I also tried to add padding right and left, but that had not effect, too. What can I do here?
You could add a class which modifies the width of col-md-6. The width of this class is set to 50%. A smaller gap is achieved by reducing the width like so:
.dashboard-panel-6 {
width: 45%;
}
Add this to your div elements. This way the width rule of col-md-6 gets overriden.
<div class="row">
<div class="col-md-6 dashboard-panel-6">...</div>
<div class="col-md-6 dashboard-panel-6">...</div>
</div>
You can use another div inside and give padding to that.
<div class="row">
<div class="col-md-6">
<div class="inner-div">
</div>
</div>
<div class="col-md-6 pull-right">
<div class="inner-div">
</div>
</div>
</div>
.inner-div{
padding: 5px;
}
I posted this here already but it is still relevant the original question.
I have had similar issues with space between columns. The root problem is that columns in bootstrap 3 and 4 use padding instead of margin. So background colors for two adjacent columns touch each other.
I found a solution that fit our problem and will most likely work for most people trying to space columns and maintain the same gutter widths as the rest of the grid system.
This was the end result we were going for
Having the gap with a drop shadow between columns was problematic. We did not want extra space between columns. We just wanted the gutters to be "transparent" so the background color of the site would appear between two white columns.
this is the markup for the two columns
<div class="row">
<div class="col-sm-7">
<div class="raised-block">
<h3>Facebook</h3>
</div>
</div>
<div class="col-sm-5">
<div class="raised-block">
<h3>Tweets</h3>
</div>
</div>
</div>
CSS
.raised-block {
background-color: #fff;
margin-bottom: 10px;
margin-left: 0;
margin-right: -0.625rem; // for us 0.625rem == 10px
padding-left: 0.625rem;
padding-right: 0.625rem;
}
#media (max-width: 33.9em){ // this is for our mobile layout where columns stack
.raised-block {
margin-left: -0.625rem;
}
}
.row [class^="col-"]:first-child>.raised-block {
// this is so the first column has no margin so it will not be "indented"
margin-left: -0.625rem;
}
This approach does require an inner div with negative margins just like the "row" class bootstrap uses. And this div, we called it "raised-block", must be the direct sibling of a column
This way you still get proper padding inside your columns. I have seen solutions that appear to work by creating space, but unfortunately the columns they create have extra padding on either side of the row so it ends up making the row thinner that the grid layout was designed for. If you look at the image for the desired look, this would mean the two columns together would be smaller than the one larger one on top which breaks the natural structure of the grid.
The major drawback to this approach is that it requires extra markup wrapping the content of each columns. For us this works because only specific columns needed space between them to achieve the desired look.
Hope this helps
Here's another possibility:
Live view
Edit view
You will see that it uses 2 col-md-6, each with a nested col-md-11, and you position the nested row in the second div to the right.
The suggestion from Ken has clean HTML which I like. If your left and right panels use elements with widths defined by Bootstrap though (eg wells or form elements) the column padding could cause hassles and break the layout. This nested approach might be easier in this situation.
HTML
<div class="container">
<div class="row">
<div class="col-md-6">
<div class="row">
<div class="col-md-11">nested row col-md-11</div>
</div><!-- end nested row -->
</div>
<div class="col-md-6">
<div class="row">
<div class="col-md-11 col-md-offset-1">nested row col-md-11</div>
</div><!-- end nested row -->
</div>
</div>
</div>
Good luck!