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
Related
I'm learning Bootstrap and I want to create simple div which is centered on the page.
I really like that auto-margin of container class, but it seems to be jump-changing based on breakpoints when resizing window width.
I want to make margins getting smaller smoothly until they become 0 when window is small enough.
I have tried to explicitly set one column layout like this:
<div class="container border">
<div class="row">
<div class="col-12">
<p>container with some content</p>
</div>
</div>
</div>
but the results are just the same and breakpoints all still used.
For that you shouldn't use bootstrap containers, because they have fixed width on breakpoints. For smooth transition you should manually set width to you container in % or vw and margin in same units.
There are two types of Bootstrap 4 Container: Fixed and Fluid.
Choose from a responsive, fixed-width container (meaning its max-width changes at each breakpoint) or fluid-width (meaning it’s 100% wide all the time).
If you don't want the breakpoints, use the container-fluid class:
Use .container-fluid for a full width container, spanning the entire width of the viewport.
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid border">
<div class="row">
<div class="col-12">
<p>container with some content</p>
</div>
</div>
</div>
If you must, you can manually override Bootstrap's responsive max-width settings.
.container.nobreakpoints {
max-width:100%;
width:800px; /* maximum width before margins appear */
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container border nobreakpoints">
<div class="row">
<div class="col-12">
<p>container with some content</p>
</div>
</div>
</div>
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
I'm new in bootstrap and I don't know if it's possible to have bootstrap containers wrapped in another element, Or if that wrapper can have some width, something like this,
<div style="background:url('xycv.jpg') center top no-repeat; width:100%">
<div class="container-fluid">
<div class="row">
<div class="col-md-6">col1</div>
<div class="col-md-6">col2</div>
</div>
</div>
</div>
<div style="background:url('bla.png') center top no-repeat; width:100%">
<div class="container-fluid">
<div class="row">
<div class="col-md-6">col1</div>
<div class="col-md-6">col2</div>
</div>
</div>
</div>
Or what happens if wrapper will have width:950px?
.container-fluid itself behaves like your wrapper, so your wrapper is kind of obsolete. Setting the background on the .container-fluid is what I would do.
If you need to wrap some bootstrap elements in your own element, you sure can do this.
yes you can have, only in case when you are using container-fluid class.
I'm trying to set some divs to width: 100% on Twitter Bootstrap 3 (including no paddings or margins).
JSfiddle: http://jsfiddle.net/rq9ycjcx/
HTML:
<div class="container">
<header>
<div class="row">
<div class="col-md-2">
<img src="http://placehold.it/150x50">
</div>
<div class="col-md-10">Menu</div>
</div>
<div class="row gray">
<div class="col-md-6">
<h1>Page Title</h1>
</div>
<div class="col-md-6">
<div class="breadcrumbs">Main page > page </div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<img src="http://placehold.it/350x150" />
</div>
</div>
</header>
<footer>
<div class="row">
<div class="col-md-12">Content</div>
</div>
<div class="row dark">
<div class="col-md-3">Footer 1</div>
<div class="col-md-3">Footer 2</div>
<div class="col-md-3">Footer 3</div>
<div class="col-md-3">Footer 4</div>
</div>
</footer>
</div>
What is the right way to get image http://placehold.it/350x150 width: 100%, including no paddings or margins?
Page title and breadcrumbs height is 80px.
If I resize window to smaller screen (e.g. mobile), text Main page > page disappears (it's somewhere but not on own row).
How to fix it?
Use <div class="container-fluid">. As per Bootstrap Docs: Use .container-fluid for a full width container, spanning the entire width of your viewport.
There is 0 padding on container-fluid.
In your code you have what appears to be body content in your header and you also have a div class="container" outside of your header and footer. This is not correct, you should have your container/container-fluid inside of your body. Also for your header you should use <nav="nav navbar-nav">.
Updated Fiddle
As suggested above, you can create a helper class
.padding-0 {
padding: 0;
}
and apply it to any HTML elements for which you need a padding reset. So in your case, it would look like this:
<div class="row">
<div class="col-md-12 padding-0">
<img src="http://placehold.it/350x150" />
</div>
</div>
For the second problem, set height of .gray class to auto :
#media () {
.gray {
height: auto;
}
}
Note: You could also remove line-height: 80px, it's optional :)
http://jsfiddle.net/rq9ycjcx/8/
There is no "right" way to do that in Bootstrap 3. It means you have to reset padding for the exact column.
You can create a class such as this one:
.col-md-12.resetPadding { padding:0px }
About Main page > page disappearing, I don't see this problem on my browsers (tested on Chrome and FF), but you have line-height: 80px there and as you said your breadcrumbs div has height: 80px;, so try to reduce line-height property and see how it works.
A simple way would be to remove the <div class="col-md-12">...</div> and add your content directly inside the row tag. The row tag removes the left & right gutters, whereas the cold-md-12 essentially adds the gutters back in.
The Bootstrap 3 documentation says that for single full width items you don't need any markup, eg just wrap it in <p> tags. However this will show the 15px gutters due to the page markup. So by simply adding in the row tag and placing your content directly inside this you will get 100% width content and be compliant with the BS3 documentation.
How can I solve this problem?
When you add borders to a div, the div is not centered and
the span12 class is not centered.
I would like to center the div with the borders
<div class="row" >
<div class="span12" style="border: 2px solid black">
<div class="row">
<div class="span4">
1
</div>
<div class="span4">
2
</div>
<div class="span4">
3
</div>
</div>
</div>
</div>
Unfortunately, that's what borders do, they're counted as part of the space an element takes up. Allow me to introduce border's less commonly known cousin: outline. It is virtually identical to border. Only difference is that it behaves more like box-shadow in that it doesn't take up space in your layout and it has to be on all 4 sides of the element.
http://codepen.io/cimmanon/pen/wyktr
.foo {
outline: 1px solid orange;
}
As of Bootstrap 3, you can use Panel classes:
<div class="panel panel-default">Surrounded by border</div>
In Bootstrap 4, you can use Border classes:
<div class="border border-secondary">Surrounded by border</div>
There's a property in CSS called box-sizing. It determines the total width of an element on your page. The default value is content-box, which doesn't include the padding, margin, or border of the element.
Hence, if you set a div to have width: 500px and 20px padding all around, it will take up 540px on your website (500 + 20 + 20).
This is what is causing your problem. Bootstrap calculates set widths for things just like the above example, and these things don't have borders. Since Bootstrap fits together like a puzzle, adding a border to one of the sides would yield a total width of 501px (continuing the above example) and break your layout.
The easiest way to fix this is to adjust your box-sizing. The value you would use is box-sizing: border-box. This includes the padding and border in your box elements. You can read more about box-sizing here.
A problem with this solution is that it only works on IE8+. Consequently, if you need deeper IE support you'll need to override the Bootstrap widths to account for your border.
To give an example of how to calculate a new width, begin by checking the width that Bootstrap sets on your element. Let's say it's a span6 and has a width of 320px (this is purely hypothetical, the actual width of your span6 will depend on your specific configuration of Bootstrap). If you wanted to add a single border on the right hand side with a 20px padding over there, you'd write this CSS in your stylesheet
.span6 {
padding-right: 20px;
border-right: 1px solid #ddd;
width: 299px;
}
where the new width is calculated by:
old width - padding - border
Depending what size you want your div to be, you could utilize Bootstrap's built-in component thumbnail class, along with (or without) the grid system to create borders around each of your div items.
These examples on Bootstrap's website demonstrates the ease-of-use and lack of need for any special additional CSS:
<div class="row">
<div class="col-xs-6 col-md-3">
<a href="#" class="thumbnail">
<img src="..." alt="...">
</a>
</div>
...
</div>
which produces the following div grid items:
or add some additional content:
<div class="row">
<div class="col-sm-6 col-md-4">
<div class="thumbnail">
<img src="..." alt="...">
<div class="caption">
<h3>Thumbnail label</h3>
<p>...</p>
<p>
Button
Button
</p>
</div>
</div>
</div>
</div>
which produces the following div grid items:
What others have mentioned about border vs border box is definitely correct. You can still get this to work without having to create any custom classes though: http://jsfiddle.net/panchroma/yfzdD/
HTML
<div class="container">
<div class="row" >
<div class="span12">
<div class="row">
<div class="span4"> 1 </div>
<div class="span4"> 2 </div>
<div class="span4"> 3 </div>
</div><!-- end nested row -->
</div><!-- end span 12 -->
</div> <!-- end row -->
</div><!-- end container -->
CSS
.span12{
border:solid 2px black;
background-color:grey;
}
Good luck!
While it's probably not the correct way to do it, something that I've found to be a simple workaround is to simply use a box-shadow rather than a border... This doesn't break the grid system. For example, in your case:
HTML
<div class="container">
<div class="row" >
<div class="span12">
<div class="row">
<div class="span4">
1
</div>
<div class="span4">
2
</div>
<div class="span4">
3
</div>
</div>
</div>
</div>
</div>
CSS
.span12{
-moz-box-shadow: 0 0 2px black;
-webkit-box-shadow: 0 0 2px black;
box-shadow: 0 0 2px black;
}
Fiddle
You can't just add a border to the span because it will break the layout because of the way width is calculate: width = border + padding + width. Since the container is 940px and the span is 940px, adding 2px border (so 4px altogether) will make it look off centered. The work around is to change the width to include the 4px border (original - 4px) or have another div inside that creates the 2px border.
If you need a basic border around you just need to use bootstrap wells.
For example the code below:
<div class="well">Basic Well</div>
If you are using Bootstrap 4 and higher try this to put borders around your empty divs use border border-primary here is an example of my code:
<div class="row border border-primary">
<div class="col border border-primary">logo</div>
<div class="col border border-primary">navbar</div>
</div>
Here is the link to the border utility in Bootstrap 4:
https://getbootstrap.com/docs/4.2/utilities/borders/