col-lg-8 not using 8/12ths of the screen? - html

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.

Related

Bootstrap 4 - How to achieve this layout

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>

Why is the padding between the bootstrap columns getting lost

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

Bootstrap 3.0: Full-Width Color Background, Compact Columns in Center

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>

How to keep space between three columns in Bootstrap?

I've done quite a bit of searching here on Stackoverflow on how to solve this problem efficiently, but I still haven't seemed to find exactly what I'm looking for.
Basically, I have three columns that I want evenly spaced and centered across my page. However, when I set col-md-4 for all three columns, the end result is they are all three bunched up to each other. How can I make it so that there is space between the columns? Like 10-15px or so without forcing them onto another row.
Here is some example code:
<div class="row-fluid">
<div class="col-md-4">
<p>Stuff that fills this column</p>
</div>
<div class="col-md-4">
<p>Stuff that fills this column</p>
</div>
<div class="col-md-4">
<p>Stuff that fills this column</p>
</div>
</div>
Maybe I'm just doing something wrong but I cannot seem to figure out how to make this work. I've seen several people suggest to just put them into another div with some padding but that doesn't seem to work for me.
Thanks for any help! I'm open to all suggestions!
Actually, your code already creates spaces between columns, because in bootstrap the column has 15px padding from each side.
Your code is working normally, check here: http://www.bootply.com/H6DQGdZxGy
It's a late answer but I guess that some people can be interessed by another explanation.
Bootstrap "cols" system is not made to decorate but to place elements in pages. If you need to space column contents, you need to wrap your content:
<div class="row-fluid">
<div class="col-md-4">
<div class="col-spaced">
<p>Stuff that fills this column</p>
</div>
</div>
<div class="col-md-4">
<div class="col-spaced">
<p>Stuff that fills this column</p>
</div>
</div>
<div class="col-md-4">
<div class="col-spaced">
<p>Stuff that fills this column</p>
</div>
</div>
Then you can add spacing on ".col-spaced" by using padding
.col-spaced {
margin-left: 15px
}
Note that:
margin will change you column size because the col-* should be placed to respect column layout
you may need to change col-* first and last child to fix some problem
A 'hacky' way to do what you want is to give the columns a border that is the same color as the background.
You can do something like:
[class*="col-"] {
padding-right: 15px;
padding-left: 15px;
}
[class*="col-"]:first-child {
padding-left: 0px;
}
[class*="col-"]:last-child {
padding-right: 0px;
}
You might add a content to wrap it, otherwise you'll have those rules applied to all columns in your layout!
.spaced-columns [class*="col-"] {
padding-right: 15px;
padding-left: 15px;
}
So then you can use:
<div class="spaced-columns">
<div class="col-md-4"> your content here</div>
<div class="col-md-4"> your content here</div>
<div class="col-md-4"> your content here</div>
</div>
or you can create just a class like: spaced-col and then add a padding on it:
.spaced-col {
padding: 0px 10px;
}
and then you apply this class on your cols
<div class="col-md-4 spaced-col"> your content here</div>
<div class="col-md-4 spaced-col"> your content here</div>
<div class="col-md-4 spaced-col"> your content here</div>
So you'll have your spacing as you want :)
Cheers
If you use padding and change the background color, you may notice that the colors of the columns don't have much spacing between them.
Perhaps a better option would be
.col-md-4 {
margin-left: 5px;
}
You have the option to use column offsetting col-md-offset-*. You wouldn't be able to maintain the spacing of your columns (reduce 4 to 3), but I believe it should somewhat do the job for responsive spacing.
Check this out: twitter bootstrap grid system. Spacing between columns
You can put another div to place your content inside the .col div, as the below example:
<div class="container">
<div class="row">
<div class="col-md-4">
<div class="content-wrapper" style="border:1px solid #000;">
<p>Some content here</p>
</div>
</div>
<div class="col-md-4">
<div class="content-wrapper" style="border:1px solid #000;">
<p>Some content here</p>
</div>
</div>
<div class="col-md-4">
<div class="content-wrapper" style="border:1px solid #000;">
<p>Some content here</p>
</div>
</div>
</div>
</div>
See it working here: https://codepen.io/pmfeo/pen/RVxPXg
That div will adjust to it's parent padding.

Is it necessary to have rows wrapped in a row class in Bootstrap?

I am curious if I need to wrap each of the rows in a grid of results within a row class div. In my case the results are identical dimensions. So I would have:
<div class="col-md-4">
...
</div>
<div class="col-md-4">
...
</div>
<div class="col-md-4">
...
</div>
<div class="col-md-4">
...
</div>
<div class="col-md-4">
...
</div>
<div class="col-md-4">
...
</div>
<div class="col-md-4">
...
</div>
Is there any specific benefit to using row if I am creating a grid? So like this:
<div class="row">
<div class="col-md-4">
...
</div>
<div class="col-md-4">
...
</div>
<div class="col-md-4">
...
</div>
</div>
<div class="row">
<div class="col-md-4">
...
</div>
<div class="col-md-4">
...
</div>
<div class="col-md-4">
...
</div>
</div>
I understand for other types of layouts where content is uneven then the row is essential. But again assuming identical dimensions is the first method acceptable?
According to my understanding:
.row gives you two imp styling:
margin-right: -15px;
margin-left: -15px;
Which nullifies the effect of container's styling:
padding-right: 15px;
padding-left: 15px;
Hence it is necessary to use row to make sure your container styling is overwritten. It also provides additional styling of setting the width in various media queries.
There is no hard and fast rule that you should include it. Although it is good practice to include it in order to avoid unexpected result and adding additional styling.
It's not necessary but it's better practice.
What .row actually does is that it "nullifies" the padding-left from the first column and padding-right from the last column by having margin: 0 -15px;
Using .row allows you to create your page filling the entire .container. Otherwise you will waste 30px of the viewport's width which is problem when the viewport's total width is only 320px.
It is handy also when you create nested grids. If you don't wrap your columns inside a .row, you will end up having padding: 0 15px; in your nested "row". Nested columns should look like this unless you want to have 15px of padding on both sides:
<div class="container">
<div class="row">
<div class="col-md-4">
<div class="row">
<div class="col-md-4></div>
<div class="col-md-8></div>
</div>
</div>
...
</div>
</div>