I have webpage where I have implemented fullpage.js but the issue is there is padding-left and padding-right automatically added at container-fluid if I remove that,there is some white spaces on the left. This problem comes only when I add rows inside the container-fluid
html
<div class="container-fluid">
<div id="fullpage">
<div class="row section" id="home">HomePage</div>
<div class="row section" id="products">Products</div>
<div class="row section" id="pricing">Pricing</div>
<div class="row section" id="contact">Contact</div>
</div>
<div id="footer">Footer</div>
</div>
PS:Using bootstrap 4
.containers are meant to work together with .rows in Bootstrap. They have a clever system involving margins and paddings that cancel each other but make it look good on all devices.
Easiest way around that would be to place .container-fluid inside #fullpage, not the other way around.
As an alternative, if, for various reasons, you'd rather not (or cannot) change the markup, you could transfer the negative margins from .rows to #fullpage:
#fullpage {
margin-left: -15px;
margin-right: -15px;
}
#fullpage>.row {
margin-left: 0;
margin-right: 0;
}
Related
one take col-md-4, second col-md-8, but the second with a picture is not 100% width, there are gaps on the left and right sides, could anyone please advise how to remove gaps and make image full size ? Thanks. Here is screenshot
.upperDiv{
height: 100px;
width: 100%;
background: red;
margin-top: 20px;
margin-bottom: 20px;
}
.fixed-content {
width: 100%;
height: 100px;
object-fit: cover;
}
<div class="container">
<div class="row upperDiv">
<div class="col-md-4" style="background: #005AA1;">
</div>
<div class="col-md-8">
<img src="assets/libled.jpg" class="fixed-content">
</div>
</div>
</div>
Bootstrap put that padding for you to better align your content, you can remove it by inserting p-0 (padding = 0px) class name as I remember
<div class="container">
<div class="row upperDiv">
<div class="col-md-4 p-0" style="background: #005AA1;">
</div>
<div class="col-md-8 p-0">
<img src="assets/libled.jpg" class="fixed-content">
</div>
</div>
</div>
Looking at your HTML, you are using bootstrap's grid system (hinted by the col-md-X classes). The gap you see in your example is caused by the padding applied to the cells of the grid system to create the gutter.
You have two possibilities:
You put the picture as a background instead, since padding is part of the element, the picture will cover this space too.
You remove the gutter.
1 is pretty self explanatory so I'll go straight to two. You can read about the .no-gutter helper class. It needs to be applied to a row and will effectively remove all gutters for the columns in it. But that means you'll loose the gutter on your left column too. You could also remove the padding with a custom class that sets padding-left:0 !important;padding-right:0 !important; This will effectively remove the gutter for the specified column element.
Whatever the option you choose, remember that cols are not meant to be used directly for the styling. They are here to help you create columns in which to put your visual elements. Although I pointed 3 different approaches to your problem, the only "pure" solution is to use the .no-gutter. Others might have weird visual impacts such as making the gutter effectively only half wide (since the left col participates in half the gutter too) and will not look right if there are other columns near it.
I'm new to bootstrap 4 and am using the class "row" in multiple places. I want to add a margin-left to just one of these div tags with the class row, so I added an id to the div tag.
<div id="menumargin" class="row">
when I use this CSS
.row{
margin-left: -15px !important;
}
it works but affects all instances of row obviously.
However this CSS I write to just target this instance:
#menumargin.row{
margin-left: -15px !important;
}
doesn't work. It's as if the code isn't written at all.
Please advise.
I hope this question makes sense. I'm also new to Stack Overflow.
Columns have horizontal padding to create the gutters between individual columns, however, you can remove the margin from rows and padding from columns with .no-gutters on the .row.
The gutters between columns in our predefined grid classes can be removed with .no-gutters. This removes the negative margins from .row and the horizontal padding from all immediate children columns.
<div class="container">
<div class="row no-gutters">
<div class="col">col</div>
<div class="col">col</div>
<div class="col">col</div>
<div class="col">col</div>
</div>
<div class="row">
<div class="col-8">col-8</div>
<div class="col-4">col-4</div>
</div>
</div>
I have an article about bootstrap here How to Responsive Design with Bootstrap?
<div>
<div class="row">
<div class="col-xs-12">
Is it true that 'row' and 'col-xs-12' will cancel each other?
If above answer is yes, why I can see we use row and col class in Bootstrap official website (https://v4-alpha.getbootstrap.com/layout/grid/)?
If above answer is yes, Why?
Any reference document I can read about?
Updates: 'Cancel' means they have opposite effect.
In a sense, yes, they cancel each other out, meaning that the padding added by the parent of a .row will be eliminated with the negative margins of .row.
Let's take a look at even one of the examples from the Bootstrap 4 documentation, with some additional CSS:
/* Warning! It is generally a bad idea to style the Bootstrap elements such as .col and .row, but this is done only for the purpose of demo. */
.col {
background-color: lightgray;
border: 1px solid darkgray;
}
.row {
background-color: lightblue;
}
.container {
background-color: lightgreen;
padding-left: 30px !important;
padding-right: 30px !important;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<div class="container">
<div class="row">
<div class="col">
1 of 2
</div>
<div class="col">
1 of 2
</div>
</div>
<div class="row">
<div class="col">
1 of 3
</div>
<div class="col">
1 of 3
</div>
<div class="col">
1 of 3
</div>
</div>
</div>
Let's consider why the effect of cancelling happens: By default, Bootstrap 4 is styling the container and column classes with a padding of 15px on each side (X axis), and the row class with a negative margin of 15px. The effect of negative margins is the opposite of padding, adding to the size of element instead of shrinking it.
Therefore, the effect of having 15px side-spacing from .container, minus 15px from .row, and finally 15px from the columns, will result in a neat way of spacing the elements centrally on the page. This effect cannot be seen in the first example, as the background styling is applied directly to the column. For observing this effect, we can add markup into the columns so that the column spacing can be observed:
/* Warning! It is generally a bad idea to style the Bootstrap elements such as .col and .row, but this is done only for the purpose of demo. */
.col {
background-color: lightgray;
border: 1px solid darkgray;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<div class="container">
<div class="row">
<div class="col">
<div class="bg-info px-2">
<span>Gray color is</span>
</div>
</div>
<div class="col">
<div class="bg-warning px-2">
<span>the actual spacing.</span>
</div>
</div>
</div>
</div>
Without having that spacing on the columns will make the elements inside the columns stick to the edges of the page, which is not generally desirable. By omitting the negative margin on the .row, on the other hand, will potentially result into excessive spacing for the columns, so less content will fit in – this is also why it is very important to have proper markup for the Bootstrap Grid System, as otherwise its use will result in undesirable results.
Useful links for learning more:
Bootstrap 4 Grid System (the one you have even mentioned)
The Definitive Guide to Using Negative Margins (Smashing Magazine)
Padding (CSS-Tricks) – also look into box-sizing rule
So I have no idea in what sense do you mean "cancel" out. The only thing that cancels out is the row negative margin on the sides with the padding of the columns. This allows the spacing between the columns without having it on the outer sides.
To get a sense what the grid system provides there is a nice article about it even though it's a little bit old:
https://webdesign.tutsplus.com/articles/all-about-grid-systems--webdesign-14471
There are many other. Also on bootstrap.
No, it's not true, the col class is used inside a row class.
The row class defines the space that will be used together but the col class defines the spatial arrangement in that row.
I'll start off by stating that I know this question has been asked a lot, but none of the answers I saw seemed to work for me.
Basically, I have some divs inside of a larger div. They'll have dynamic text, so I don't know how many lines each will be. The problem is that I can't seem to get the divs to size themselves to the parent's height. I want the column divs to take up the entire height of the row div (basically, I want that blue part to fill all the space between the bars).
HTML:
<div class="container">
<div class="row divOne">
<div class="col-xs-3 divTwo">Some Text</div>
<div class="col-xs-3">
Some text that could wrap to multiple lines
</div>
</div>
<div class="row divOne">
<div class="col-xs-3 divTwo">Different Text</div>
<div class="col-xs-3 divThree">
With some more text
</div>
</div>
</div>
CSS:
.divOne
{
border-top:10px solid black;
}
.divTwo
{
background-color: #32649b;
height:100%;
color:white;
}
jsfiddle:
Now, what I've learned from other versions of this question are that
float:left might be screwing it up
height:100% doesn't work if the parent's height is defined
position:relative might help on the parent
The problem with the float is that I'm using bootstrap, and that's where the float is coming from, so I don't really want to mess with that.
I can't really define parent height, because it'll be dynamic based on the children.
I also tried messing around with position:relative on the parent and absolute on the child, but that seemed to get really screwy. I'm also guessing this won't work because I'm using bootstrap. It's possible that I'm just missing something, though. I'll admit to not being the greatest with CSS.
I don't know if I'm having these issues because I'm using bootstrap, or because I'm just being an idiot right now.
Something else that seems to be throwing a wrench into things: These columns will be laid out differently on smaller screens vs. larger ones. I actually want something along the lines of col-xs-12 col-md-3 for these.
The short answer is that you can't really achieve this within the constraints of the bootstrap framework. There are plenty of articles that explain why div elements can't stretch to the height of their container, and how to get around this problem. One of the solutions I'm most fond of is Faux Columns.
But, let's get a little more creative then that.
I came up with something that might work for your scenario, but requires a bit of change to your markup. Here's a solution that wraps the bootstrap grid with display: table.
http://jsfiddle.net/Wexcode/13Lfqmjo/
HTML:
<div class="table-container">
<div class="table-row divOne">
<div class="col-xs-3 divTwo">Some Text</div>
<div class="col-xs-3">
Some text that could wrap to multiple lines
</div>
<div class="col-xs-6"></div>
</div>
</div>
CSS:
.table-container {
margin: 0 -15px;
}
.table-row {
display: table;
width: 100%;
}
.table-row [class^="col"] {
display: table-cell;
padding: 0 15px;
float: none;
}
Note that for this solution to work, you must include enough col elements to stretch it all 12 columns (see that I added an empty .col-xs-6 div).
You can add
display:flex;
to divOne , and will act like you wanted.
in bootstrap 4 'row' class applies this on div, but in ealier versions you need to add manually if you expect such behavior.
Give .divOne a display: flex and remove the height: 100% from .divTwo:
.divOne
{
border-top:10px solid black;
display: flex;
}
.divTwo
{
background-color: #32649b;
/*height:100%;*/
color:white;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row divOne">
<div class="col-xs-3 divTwo">Some Text</div>
<div class="col-xs-3">
Some text that could wrap to multiple lines
</div>
</div>
<div class="row divOne">
<div class="col-xs-3 divTwo">Different Text</div>
<div class="col-xs-3 divThree">
With some more text
</div>
</div>
</div>
I'm starting to use Bootstrap 3 and it seems like you use it to define and over all structure but there are probably going to be a lot of containers that get your own custom classes?
I have a container which I've changed the definition of to be fluid so it's now:
.fluid-container {
padding-left: 15px;
padding-right: 15px;
margin-left: auto;
margin-right: auto;
min-width:500px;
}
but when it comes to the rows and sizing them I'm running into some problems here and I'm not sure if it's solved with my own custom classes or leveraging bootstrap in a way I don't know about.
The .fluid-container is going to be a header in this case and inside of it I have a container I'd like to be on the left, and then another container that will be on the right. Normally I'd just make two containers, float one left, the other right and then put a min width on the parent container.
In bootstrap what I've done is this (fiddle here http://jsfiddle.net/hg84F/2/):
<div class="lp">
<div class="lp-shell-head lp-fluid-container" style="border:1px solid red;">
<div class="row">
<div class="col-sm-2" style="border:1px solid blue;">left</div>
<div class="col-sm-2 col-sm-offset-8" style="border:1px solid green;">right</div>
</div>
</div>
</div>
The problem with this is when I make the page width smaller the two containers eventually become full width and stack on top of each other. What I want to have happen is have them stay on their respective sides no matter what and I wasn't sure how to make them do this. Any ideas of how to use bootstrap in this way?
What I want to have happen is have them stay on their respective sides no matter what and I wasn't sure how to make them do this. Any ideas of how to use bootstrap in this way?
http://getbootstrap.com/css/#grid -- More on Bootstrap grid.
<div class="row">
<div class="col-xs-2" style="border:1px solid blue;">left</div>
<div class="col-xs-2 col-xs-offset-8" style="border:1px solid green;">right</div>
</div>
All you're missing, based on your question is the Extra Small (always responsive) column class, which is col-xs-*
So this is a slightly different approach to your question. Based on your questions and comments to JonathanR's answer, I figured you need a little tweak.
Jonathan's solution is valid, but I'm really unsure of how far you want to "squeeze" the page before the "left" and "right" actually touch. Bootstrap uses percentage based widths and margins for the "col-" and "offset-" elements. If you attempt to squeeze it past a certain point, you will begin to see the horizontal scroll. This example solves that issue in a different manner.
Here's my working example: http://bootply.com/101136
<!-- 'Container-fluid' class no longer exists in 3.0, but I use it as a semantic wrapper class -->
<div class="container-fluid">
<!-- Make sure you use include the bootstap 'container' class -->
<div class="lp-shell-head lp-fluid-container container" style="border:1px solid red;">
<div class="row">
<!-- Use one XS col instead of 2 col-xs-2 and the offset -->
<div class="col-xs-12">
<!-- Use two div elements and float them left/right -->
<div class="pull-left" style="border:1px solid blue;">left</div>
<div class="pull-right" style="border:1px solid green;">right</div>
</div>
</div>
</div>
</div>
Minor change in the CSS. Switched your "min-width" to "max-width" in order to prevent your row from expanding past the 500px threshold.
.container-fluid {
border:1px solid purple;
}
.lp-fluid-container {
padding-left: 15px;
padding-right: 15px;
margin-left: auto;
margin-right: auto;
/* Switched to 'max-width' */
max-width:500px;
}