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?
Related
If I have a scenario using Bootstrap 5 like...
<div class="container">
<div class="row row-cols-auto">
<div class="col">One</div>
<div class="col">Two</div>
<div class="col">Three</div>
</div>
</div>
All columns currently take whatever width their content needs.
I want column two to be as wide as it can be without interfering with the display of columns one and two.
Is this possible with Bootstrap alone or would I need to rely on additional CSS styling?
Just found the answer. Make all columns EXCEPT the one I want to take up all the space col-auto. Make that one class="col".
<div class="container">
<div class="row">
<div class="col-auto">One</div>
<div class="col">Two</div>
<div class="col-auto">Three</div>
</div>
</div>
I have a little web app that I want to show 5 columns responsive equal width.
But I only want this layout for a devices with ≥992px of width.
For devices <992px of width I want to show the 5 HTML elements in one full-width row.
Equal-width columns can be broken into multiple lines, but there was a
Safari flexbox bug that prevented this from working without an
explicit flex-basis or border.
Two workarounds have been documented in a reduced test case outside
Bootstrap, though if the browser is up to date this shouldn’t be
necessary.
Source: https://getbootstrap.com/docs/4.0/layout/grid/
So, I'm a bit confused in how can I achieve this responsive behaviour that I want using Bootstrap 4.
I have this "idea", but I think will pretty ugly, what do you think about it?
Let's consider this markup
<div class="container">
<div class="row">
<div class="col">Column</div>
<div class="sep"></div>
<div class="col">Column</div>
<div class="sep"></div>
<div class="col">Column</div>
<div class="sep"></div>
<div class="col">Column</div>
</div>
</div>
Then, with jQuery I can select .sep and add bootstrap4 class w-100 in the case of width <992px.
Thanks for reading and please forgive my bad english.
Maybe I don't understand the question. Why not just use the lg auto layout columns (col-lg)?
https://www.codeply.com/go/OohsSfM7Zu
<div class="row">
<div class="col-lg">
</div>
<div class="col-lg">
</div>
<div class="col-lg">
</div>
<div class="col-lg">
</div>
<div class="col-lg">
</div>
</div>
The first thing to remember about Bootstrap is that rows must contain 12 columns. If you have a row with a number that doesn't go into 12 (such as 5), you should be making use of offsets.
For example, 12 / 5 is 2, with 2 left over. So you want to make use of columns that occupy a width of 2, for a total of 10 columns. From here, you would offset by 1 on the left. Considering you now have a total of 11, you've automatically also offset by 1 on the right.
This can be demonstrated in the following:
.row {
margin: 0 !important; /* Prevent scrollbars in the fiddle */
text-align: center; /* Helps illustrate the centralisation */
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css">
<div class="row">
<div class="col-sm-2 offset-sm-1">One</div>
<div class="col-sm-2">Two</div>
<div class="col-sm-2">Three</div>
<div class="col-sm-2">Four</div>
<div class="col-sm-2">Five</div>
</div>
If you're not happy with this offset, then you can simply make use of a custom media query such as width: calc(100% / 5) ...though this would completely violate the point of using Bootstrap; another framework might be more suitable :)
Hope this helps!
I am working on a print stylesheet for a web application. The application uses bootstrap. Every page should be printable and as much whitespace should be removed as possible.
My problem involves the following HTML code:
<div class="row">
<div class="col-xs-6">
<div class="line">...</div>
<div class="line">...</div>
<div class="line">...</div>
</div>
<div class="col-xs-6">
<div class="line">...</div>
<div class="line">...</div>
<div class="line">...</div>
</div>
</div>
I have a two column layout and each column features several lines. Is there a way to enable page-break between lines in the columns?
The columns can have a lot of lines and I want to avoid that the whole div is shifted to a new page. Instead I want to have a page-break between the lines of the div.
I think the main problem I am facing is that I have table that is constructed column by column and not row by row like a normal HTML table.
You're right: because this is structured as css columns instead of as a <table>, you won't be able to do this without using a script to heavily modify the DOM.
But the solution isn't too tricky. Let's think about what you want: a grid that #media screen has three rows and on #media print puts each row on its own page. If each row was grouped in a single element, you could use the page-break-after and/or page-break-before CSS properties to put each row on its own page. In your markup each row is
.row .col-x .line
which both gets in the way of your print formatting and isn't semantic. Let's make each row a .row!
#import 'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css';
#media print {
.rows-print-as-pages .row {
page-break-before: always;
}
/* include this style if you want the first row to be on the same page as whatever precedes it */
/*
.rows-print-as-pages .row:first-child {
page-break-before: avoid;
}
*/
}
<div class="container rows-print-as-pages">
<div class="row">
<div class="col-xs-6">first row left</div>
<div class="col-xs-6">first row right</div>
</div>
<div class="row">
<div class="col-xs-6">second row left</div>
<div class="col-xs-6">second row right</div>
</div>
<div class="row">
<div class="col-xs-6">third row left</div>
<div class="col-xs-6">third row right</div>
</div>
</div>
(Here the breaks don't go in the right place without a .container. Depending on the rest of you page, the .container may not be necessary.)
Checking #media print styles is a little inconvenient, but you can do it by making a demo in codepen, selecting the "debug" view, and then looking at the print preview or saving as a pdf. Here's a link to the codepen debug view of the above snippet
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!
I believe to provide standard margin-left we can use class "Offset" in bootstrap. At the same time what is the class that can be used to provide standard margin-right?
example:
<div class="row-fluid">
<div class="offset2 span8"></div>
</div>
for some reason I need to give margin-right equivalent to offset2. Some solution will be of great help. Thank you.
There is no equivalent class to offset-x for margin-right and for good reason, it is not needed. Think of it this way, if you need a 6 column div that is offset both right and left 3 columns, you would use:
<div class="row">
<div class="span6 offset3">Your content...</div>
</div>
Also, if you have a 6 column div that needs to only be offset 2 columns BUT, the offset should be 2 columns on the right, the code would be:
<div class="row">
<div class="span6 offset4">Your content...</div>
</div>
Keep in mind you are always working in 12 columns (unless changes in variables.less) so you can use span-x AND offset-x to achieve position desired. If you are looking to tweak additional pixels, add an additional class(or ID) to your content container inside of your span. For example:
<div class="row">
<div class="span6 offset4">
<div class="tweaked-margin">Your content...</div>
</div>
</div>
The CSS:
.tweaked-margin {
margin-right: 4px; // or whatever you need
}