I'm currently working on a website and I have come across with the following problem thinking the best practice to achieve the following layout using Bootstrap 4. (Wrapped in Red)
As you can see the first column is a col-md-7 and the other one is col-md-5. However, the first column includes an image and it has to touch the left corner of the page. However, the right column has to have the standard width and column size. To give you more insight following is what I'm trying to achieve.
[JS Fiddle][2]
You mean something like that using align-self-start class?
.row {
background: #f8f9fa;
margin-top: 20px;
}
.col {
border: solid 1px #6c757d;
padding: 10px;
}
.image {
height: 200px;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<div class="container">
<div class="row d-flex">
<div class="col image">
Image
</div>
<div class="col align-self-start">
Test
</div>
</div>
</div>
You will need to wrap the left image and the right column in a row, set the column width for each, then place each item in the right column inside of that div with a full width.
I think if you continue to ask "do it for me" questions on SO you will get roasted, I know I have. But I'm here to help. LMK if you want more details.
There are a million solutions to this problem, This would be a great time to look into CSS Grid and learn the new new.
Here is a codepen of the general approach
<div class="row">
<div class="col-md-7 left-box"></div>
<div class="col-md-5">
<div class="col-md-12 item"></div>
<div class="col-md-12 item"></div>
<div class="col-md-12 item"></div>
</div>
</div>
Related
.background-color {
background-color: lightgrey;
height: 200px;
border: 1px solid black;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<div class="container">
<div class="row">
<div class="col-4 background-color">1</div>
<div class="col-4 background-color">2</div>
<div class="col-4 background-color">3</div>
</div>
</div>
So I have three columns which are each 4 columns in width and whenever I add m-3 (margin all around) they break off because of that, how can I contain them? So they stay all 3 on the same line?
.background-color {
background-color: lightgrey;
height: 200px;
border: 1px solid black;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<div class="container">
<div class="row">
<div class="col-4 background-color m-3">1</div>
<div class="col-4 background-color m-3">2</div>
<div class="col-4 background-color m-3">3</div>
</div>
</div>
Only way I saw around this was to nest other elements.
<div class="container">
<div class="row">
<div class="col-4"><div class="col-12 background-color m-3">1</div></div>
<div class="col-4"><div class="col-12 background-color m-3">2</div></div>
<div class="col-4"><div class="col-12 background-color m-3">3</div></div>
</div>
</div>
The Bootstrap column system (as you probably know) is based on the idea that the page has 12 notional columns. You then use the col-* classes to indicate how many of those 12 columns each element takes up. So, in this case, you've declared that each element takes up 4 columns, which means they use all 12 notional columns.
The problem is that margins in HTML are outside the element. So, if you have three elements, each using 4 columns, and then add some margin, you now have more than the width of the 12 columns available (here, 12 columns plus three lots of m-3). As a result, the third element doesn't have enough space to be displayed and flows to the next line.
To avoid this, you can use padding instead of margins (because paddings are inside the element, you get visual separation while sticking to the grid widths). Alternatively, you could reduce the width of the elements to col-3 and add your margin outside that. However, this may mean (depending on your layout) that it doesn't use the full width.
Ultimately, if you need three elements across the page with margins, it may be best to define your own classes rather than trying to use the Bootstrap classes. Frameworks are great when you work with them, and a pain when you work against them!
.background-color {
background-color: lightgrey;
height: 200px;
border: 1px solid black;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<div class="container-fluid">
<div class="row">
<div class="col background-color m-3 ">1
</div>
<div class="col background-color m-3">2</div>
<div class="col background-color m-3">3</div>
</div>
</div>
use col instead of col-4
I am pretty new to bootstrap and have been beating my head up with the following problem. Whenever I use the following code, the padding between the columns is getting lost.
<body>
<div class="container-fluid">
<div class="row">
<div class="col-sm-4 col"></div>
<div class="col-sm-4 col"></div>
<div class="col-sm-4 col"></div>
</div>
</div>
</body><!--end body-->
But whenever I move the class col inside the column, then the code works exactly as expected.
<body>
<div class="container-fluid">
<div class="row">
<div class="col-sm-4">
<div class="col"></div>
</div>
<div class="col-sm-4">
<div class="col"></div>
</div>
<div class="col-sm-4">
<div class="col"></div>
</div>
</div>
</div>
</body><!--end body-->
Following is the CSS class that I am using
<style>
.col{
min-height: 500px;
background-color: gray;
}
</style>
Bootstrap does not add space between the columns, it adds space inside each column. So if you put another div inside each column that will give the space you want.
The way I look at it is the columns only act as containers for the actual content, which goes inside them.
jsfiddle of the kind of thing I think you should do instead: https://jsfiddle.net/bqadptzL/
CSS:
.col {
/* just to demonstrate */
background-color: red;
}
.box {
background-color:gray;
min-height: 500px;
}
HTML:
<body>
<div class="container-fluid">
<div class="row">
<div class="col-sm-4 col">
<div class="box">
Content
</div>
</div>
<div class="col-sm-4 col">
<div class="box">
Content
</div>
</div>
<div class="col-sm-4 col">
<div class="box">
Content
</div>
</div>
</div>
</div>
</body><!--end body-->
If you look at the grid system examples, you will see there is no space between the columns, only inside them. http://getbootstrap.com/css/#grid
Hope that helps.
Sidenote: you should not put columns inside columns, you should only put columns inside rows. But you can put rows inside columns. So you can alternate row - column - row - column, not row - column - column. This is how Bootstrap system is meant to work.
When you use the second version you get a margin created by the div you added,
if you add a margin to the .col css class you should see the difference.
You can take a look here for a more detailed answer about how to work with the columns in bootstrap with a similar issue
The padding is not getting lost. In Bootstrap, col-sm-* has 15px padding. Remember, the background color fills entire the width of the cell, padding included.
You're putting the bg color on the column with padding, and in the other case it's on the inner column that doesn't have padding.
Put the background-color and a border, only on the col-sm-4. and you'll see the difference. The padding is there, and the same in both cases...
http://www.codeply.com/go/lf2V9vlIsr
I was looking to make a striped business theme, similar to the one created by W3Schools. The theme can be found here. It is characterized by horizontal sections, separated by different background colors.
The one issue I had with it was that the columns in Services, Portfolio and Pricing, spanned pretty much the full width of the page, which I did not think looked great, particularly for the three pricing boxes, which i feel should be much narrower and still centered. Let's take those pricing boxes as the example for the purpose of the questions.
So, I embarked upon the task of squeezing these three pricing boxes into a narrower shape, centered on the page, while still maintaining the full-width alternating background color. I came up with three ways to do it:
1) Place a Container inside a Container-Fluid:
<div id="pricing" class="container-fluid">
<div class="container">
<div class="row">
<div class="col-sm-4 col-xs-12">
BlaBlaBla
</div>
...
</div>
</div>
</div>
2) Make the following additions/changes to the css and html:
.fixed-width {
display: inline-block;
float: none;
width: 300px;
}
.row-centered {
text-align: center;
}
-
<div id="pricing" class="container-fluid">
<div class="row row-centered">
<div class="col-sm-4 col-xs-12 fixed-width">
BlaBlaBla
</div>
...
</div>
</div>
3) 3x col-sm-2, with empty columns on each side
Keep the container-fluid layout, but instead of having three col-sm-4, I have an empty col-sm-3, three col-sm-2, and finally an empty col-sm-3 (for a total of 12 columns).
4) 3x col-sm-2, with offset-3 to center
Instead of having three col-sm-4, I have one col-sm-2 col-sm-offset-3, then two col-sm-2 (this does not add to 12, but i center with offset).**
The problem with both (3) and (4) is that once i shrink the browser window, the boxes become too small before they wrap to the next line (i.e. the text flows out of the box). In (4) it seems if i use container (as opposed to container-fluid), the boxes become too narrow in full-screen even.
What is the correct way of doing this? I assume this is an issue almost everyone making business websites stumbles across, yet I was not able to find the answer online having worked on it for hours.
Thanks in advance,
Magnus
Below follows what I think is the best way to solve this. I will divide it up in whether or not it is a background image or color we are looking to apply accross the full width.
CSS (formatting for illustration purposes and fixed width)
.content{
padding:20px;
border: 1px solid #269abc;
background:#d6ec94;
}
[class*="col-"] {
padding-top:10px; /* 15px side paddings automatically applied */
padding-bottom:10px;
border: 1px solid grey;
background: transparent;
}
.fixed-width {
display:inline-block;
float:none;
width: 300px;
}
The key here is the fixed-width class, and follows your approach (2). The other styles are just so you can try it and easily see how it works.
CSS (background image)
#one {
background-image: url([insert-url]);
background-repeat: no-repeat;
background-size: contain;
height:500px;
}
The key here is the background-size: contain element. As long as the width/height ratio of your background image is larger than the section's ratio, the image will fill the full background.
CSS (background color)
#two {
background-color: grey;
height:500px;
}
background-color works without any tweaks.
HTML
<section id="one">
<div class="container">
<div class="row text-center">
<div class="col-sm-4 fixed-width">
<div class="content">HERE</div>
</div>
<div class="col-sm-4 fixed-width">
<div class="content">HERE</div>
</div>
<div class="col-sm-4 fixed-width">
<div class="content">HER</div>
</div>
</div>
</div>
</section>
As seen, by adding a <section> around the container, you can apply the background image or color to the full width of the page.
IN Bootstrap,
Col-lg is large screen,
Col-sm is small screen,
Col-md is medium devices,
Col-xs is Small screen.
According to the browser ,we can use the all classes.In my experience we can use the col-lg-offset-3 for large screen,Remaining screen we should use without offset,like us,
UL list format:
<style>
ul{
margin:0;padding:0;
text-align:center;
}
ul li
{
display:inline-block;
text-align:center;
width:300px;
}
</style>
<ul>
<li>box1</li>
<li>box2</li>
<li>box3</li>
</ul>
whatever screen all list will come in center position of screen.
other format:
<div class="container">
<div class="row text-center">
<div class="col-lg-offset-3 col-lg-2 col-sm-4 col-md-4 col-xs-12">contenbox..</div>
<div class="col-lg-2 col-sm-4 col-md-4 col-xs-12">contenbox..</div>
<div class="col-lg-2 col-sm-4 col-md-4 col-xs-12">contenbox..</div>
</div>
</div>
we should use all classes to our business requirement.if we can alter-ate the various offset class for col-sm-offset-,col-md-offset.,
<div class="col-sm-4 col-xs-12">
Is the important line. The col-sm-4 is saying on small screens and above, take up 4 of 12 bootstrap columns. So, try decreasing this to 3 of 12 bootstrap columns, i.e. col-sm-3. Here it is within the example source code:
<div class="col-sm-3 col-xs-12">
<div class="panel panel-default text-center">
<div class="panel-heading">
<h1>Basic</h1>
</div>
<div class="panel-body">
<p><strong>20</strong> Lorem</p>
<p><strong>15</strong> Ipsum</p>
<p><strong>5</strong> Dolor</p>
<p><strong>2</strong> Sit</p>
<p><strong>Endless</strong> Amet</p>
</div>
<div class="panel-footer plan">
<h3>$19</h3>
<h4>per month</h4>
<button class="btn btn-lg">Sign Up</button>
</div>
</div>
Hi all I'm using this bit of code
<section id="post1">
<div class="container-fluid post-1">
<div class="row">
<div class="col-lg-12">
<div class="col-lg-8 oblongbig">
</div>
<div class="col-lg-4">
<div class="row">
<div class="=col-lg-6 oblong">
</div>
</div>
<div class="row">
<div class="col-lg-6 oblong">
</div>
</div>
</div>
</div>
</div>
</div>
</section>
to create three boxes, have a look at http://deliciousproductions.com.au
My problem is that the first and larger box is fine but the second two boxes should start after the first col-lg-8, but they just start right up against the large box, as though there's no padding/margin. I added a 10px margin so it's easier to understand. So the col-lg-8 isn't making it's width 8/12's of the screen?
The 2 boxes in rows also aren't responsive, they are but when you make the page smaller this happens: https://gyazo.com/4929147de70b0a88ac54d29f4ff2c243
and then finally: gyazo[.]com/c57374233a4e0f14fc4f757841893cc5
What would you recommend to make it so when the page resizes the 2 smaller boxes resize so they fit next to each horizontally under the larger box. This is for a blog style site btw.
cheers, Nik
here's the css for each box too
.oblongbig {
float: left;
width: 600px;
height: 300px;
background-color: #050505;
border-width: 1px;
border-style: solid;
border-color: rgba(0,0,0,.2);
margin: 10px;
}
.oblongbig:hover, .oblong:hover {
background-color: #121212;
}
.oblong {
float: left;
width: 300px;
height: 150px;
background-color: #050505;
border-width: 1px;
border-style: solid;
border-color: rgba(0,0,0,.2);
margin: 10px;
}
similar to this: demo
There is some problem with your grid code. Use this one
<div class="container-fluid">
<div class="row">
<div class="col-lg-12">
<div class="row">
<div class="col-lg-8">
<div style="height:330px;background:#000;"></div>
</div>
<div class="col-lg-4">
<div class="row">
<div class="col-sm-12">
<div style="height:150px;background:#000;margin-bottom:30px;"></div>
</div>
</div>
<div class="row">
<div class="col-sm-12">
<div style="height:150px;background:#000;"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Also don't apply styles directly on grid column. Place content div inside grid column and apply whichever styles you want on that div.
Check out this URL for better understanding of Bootstrap grid system - http://www.tutorialrepublic.com/twitter-bootstrap-tutorial/bootstrap-grid-system.php
To count a column you need to consider the value of the intervals between them.
Here you can see a visual explanation
There are a couple of issues going on in your code. For Bootstrap columns to work properly, you can't have a column div inside another column div without starting a row. For example, you must format it like this:
<div class="container-fluid">
<div class="row">
<div class="col-lg-8">
<div class="row">
<div class="col-lg-6"></div>
<div class="col-lg-6"></div>
</div><!-- .row -->
</div>
<div class="col-lg-4"></div>
</div><!-- .row -->
</div>
In your example you have two nested columns with no row in between. This will mess up your column padding & margins.
Refer to the docs: http://getbootstrap.com/css/#grid-nesting
Next, you're applying your own classes (.oblong, .oblongbig) with set float, fixed width, and margin to the Bootstrap column div. These are overriding the Bootstrap styles and preventing your columns from working properly.
The best idea is to use elements with Bootstrap classes to build your layout, then put elements inside these layout elements with your own custom classes. For example:
<div class="col-lg-6">
<div class="oblong">Your content here, separate from the Bootstrap element</div>
</div>
Avoid overriding the framework's styles, as this results in confusing code. Once you reformat your code so that columns are correctly nested and you're not overriding the Bootstrap classes with your own custom widths, it should come together how you want.
I have 3 divs inside one div horizontally aligned.
| 1 | 2 | 3 |
In smaller devices, I want 3 to move to under 1 and look like this:
| 1 | 2 |
| 3 | 2 |
I can do that creating different layouts maybe, but is there anyway to do in bootstrap using grids?
EDIT
Here is a demonstration of what I want to achieve. In desktop, I want it to look like this:
In Mobile:
Demo
HTML:
<div class="col-xs-4 col-sm-4" style="height:100px;background:red;">A</div>
<div class="col-xs-8 col-sm-4 float" style="height:100px;background:blue">B</div>
<div class="col-xs-4 col-sm-4" style="height:100px;background:green">C</div>
CSS:
#media (max-width: 768px)
{
.float
{
float:right!important;
height:200px!important;
}
}
Yes you can do it via col-sm-push and col-sm-pull similar post;
Column order manipulation using col-lg-push and col-lg-pull in Twitter Bootstrap 3
Also check a much detail post here.
I'm assuming you want the 3rd box to be directly below the 1st box while the 2nd box is higher than the 1st box. This can only be achieved in Bootstrap by duplicating the contents of the 3rd box and hiding/showing it based on the grid size (e.g. sm). Pushing or pulling columns, using e.g. col-sm-push-4, won't help as they'll never make a column wrap to the next line.
As Bootstrap is a mobile first framework, the first step is to create the small layout. In order to get the 3rd box directly below the 1st box we'll need to use column nesting. The idea is to put the 1st and 3rd box in an inner grid inside the left column of the outer grid, while the 2nd box will be put in right column of the outer grid. Notice that the inner grid needs a .row to offset the padding of its parents col-xs-6, and that the columns inside the inner grid count up to 12. Some people think it needs to count up to 6 as they exist inside a col-xs-6, but that isn't the case.
<div class="container">
<div class="row">
<div class="col-xs-6">
<div class="row">
<div class="col-xs-12">
<div class="box box--one">One</div>
</div>
<div class="col-xs-12">
<div class="box box--three">Three</div>
</div>
</div>
</div>
<div class="col-xs-6">
<div class="box box--two">Two</div>
</div>
</div>
</div>
The small layout now looks good. To get the other layout (I've assumed md as its breakpoint) change both col-xs-6 to col-xs-6 col-md-4 and add a 3rd column to the outer grid containing the 3rd box.
<div class="container">
<div class="row">
<div class="col-xs-6 col-md-4">
...
</div>
<div class="col-xs-6">
...
</div>
<div class="col-md-4">
<div class="box box--three">Three</div>
</div>
</div>
</div>
It now looks completely broken, the 3rd box is shown twice and one of them is overlapping the 1st and 2nd box on screens smaller than md. We can fix this by hiding the columns containing the 3rd box for specific grid sizes. To hide the 3rd box inside the inner grid for larger screens change <div class="col-sm-12"> into <div class="col-sm-12 hidden-md hidden-lg">. And to hide the 3rd outer column for smaller screens change <div class="col-md-4"> into <div class="col-md-4 hidden-xs hidden-sm">
See the entire example code below:
.box {
border: 1px solid #c66;
background-color: #f99;
padding: 15px;
color: #fff;
font-family: Helvetica, Arial;
font-size: 24px;
}
.box--one,
.box--three {
height: 100px;
}
.box--two {
height: 200px;
}
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row">
<div class="col-xs-6 col-md-4">
<div class="row">
<div class="col-xs-12">
<div class="box box--one">One</div>
</div>
<div class="col-xs-12 hidden-md hidden-lg">
<div class="box box--three">Three</div>
</div>
</div>
</div>
<div class="col-xs-6 col-md-4">
<div class="box box--two">Two</div>
</div>
<div class="col-md-4 hidden-xs hidden-sm">
<div class="box box--three">Three</div>
</div>
</div>
</div>
PS If you don't like duplicating the 3rd box, as perhaps there's a lot of content inside, you can also use JavaScript to move the box into it's proper column when a breakpoint change occurs. I've made some jQuery plugin prototype that should be able to do this, see https://github.com/ckuijjer/jquery-breakpointspy
PS I just saw your updated question: if the boxes have a fixed height, simply add a class to the 3rd box of the large layout that gets a fixed height. If they don't have a fixed height, create some JavaScript that set the height to be equal and attach it to the resize event. A completely different solution would be to look into flexbox.