I have two rows in two containers, but I can't figure out how to reduce the bottom and top margin/padding to bring the content closer.
The bottom content is way too far and I would like to bring it closer to the first row/container.
I tried to apply padding and margin to the rows and containers with no luck.
Here's a fiddle of the html below.
<html lang="en">
<head>
<title></title>
<link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/css/bootstrap-combined.min.css" rel="stylesheet" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/js/bootstrap.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
});
</script>
</head>
<body>
<div class="container-fluid">
<div class="row-fluid">
<div class="span12">
<ul id="top-nav" class="nav">
<li data-current-nav="Home">Home</li>
</ul>
</div>
</div>
</div>
<div class="container-fluid">
<div class="row-fluid">
<div class="span12">
bottom content
</div>
</div>
</div>
</body>
</html>
Try removing the margin-bottom on ul#top-nav:
#top-nav {
margin-bottom: 0 !important;
}
See the updated jsFiddle for a demonstration > http://jsfiddle.net/6pbPd/1/
You should remove the bottom margin of ul.nav (20px) and the rule applied to the min-height of the container div (30px):
.row-fluid [class*="span"] {
min-height: 20px;
}
#top-nav {
margin-bottom: 0;
}
Demo: http://jsfiddle.net/6pbPd/4/
Related
The padding on the div in the following snippet only pads it vertically:
.col-sm-2 {
background: pink;
padding: 100px;
}
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<div class="container">
<div class="row">
<div class="col-sm-2"></div>
</div>
</div>
This is because Bootstrap's has .row > * applying padding-left and padding-right.
However, overriding the padding with !important only takes effect starting from a certain point (which seems to be padding: 45px in this case), so that setting it to less than that doesn't work horizontally:
.col-sm-2-a {
background: pink;
padding: 30px !important;
}
.col-sm-2-b {
background: pink;
padding: 40px !important;
}
.col-sm-2-c {
background: pink;
padding: 50px !important;
}
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<div class="container">
<div class="row">
<div class="col-sm-2 col-sm-2-a"></div>
</div>
<br />
<div class="row">
<div class="col-sm-2 col-sm-2-b"></div>
</div>
<br />
<div class="row">
<div class="col-sm-2 col-sm-2-c"></div>
</div>
</div>
And here it is animated:
.col-sm-2 {
background: pink;
animation: myanim 10s infinite;
}
#keyframes myanim {
50% {
padding: 100px;
}
}
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<div class="container">
<div class="row">
<div class="col-sm-2"></div>
</div>
</div>
Question: What makes the padding not work both vertically and horizontally until a certain point, and what changes from that point that allows the padding to work horizontally?
In the snippet, the width of the row is 540px, thus the width of a col-sm-2 is 2 / 12 * 540 = 90px. The corresponding rule :
#media (min-width: 576px)
.col-sm-2 {
flex: 0 0 auto;
width: 16.66666667%;
}
But we also have this rule declaration setting the box-sizing property of all elements to border-box :
*, ::after, ::before {
box-sizing: border-box;
}
With box-sizing: border-box; :
The dimensions of the elements are calculated as: width = border +
padding + width of the content, and height = border + padding + height
of the content.
In this example we have no border, only padding and width/height. The width of ~16.7% will be applied to the border-box of the element.
With a padding set to 30px, the width of the element is 30 (padding-left) + 30 (padding-right) + the missing pixels to reach 16.7% (30).
When set to 45px, the width is 45 + 45 + 0.
According to the documentation :
The content box can't be negative and is floored to 0, making it
impossible to use border-box to make the element disappear.
That is why with a padding of 50px, the total width is 100px (50 + 50 + 0) and not 90px (50 + 50 - 10).
Consequently, the width of the element can go beyond 90px only when the padding is set to more than 45px (more precisely if padding-left + padding-right > 90px).
In relation to the answer of #onkar ruikar please have in mind that when you are using an external library such as Bootstrap in your case, the overwriting of styles might not work even with !important due to the priority of rules.
In many cases, such libraries generate really specific rulesets for their elements.
Your options for overwriting them are either be MORE specific than them (which doesn't always work) or use !important as you have tried.
The reason that #onkar ruikar's answer works - putting the your styles in the head is because when browsers are reading multiple !important rules for any given style, they cannot know what to prioritize and they "give up" after the fist one and apply it.
In your first code snippet you've mentioned that 100px pads only vertically. Then you've used !important in next snippet. So I think you are using important because 100px padding didn't have any effect in first code snippet. And you didn't put link to bootstrap css intentionally in the body instead of putting it in head section before your own style tag. If that is not the case then ignore following suggestion.
Order where you put CSS rules does matter. If you put the links in head section, before your own styles, then 100px padding will work.
<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<style>
.col-sm-2 {
background: pink;
padding: 100px;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-sm-2"></div>
</div>
</div>
</body>
</html>
As for why 45px is the turning point. As #tom suggested the element has 90px width. And as you keep on adding padding it eats into width till width becomes 0. After that the element starts growing to accommodate padding.
<!DOCTYPE html>
<html>
<head>
<style>
.one {
background: pink;
height: 100px;
padding: 0px !important;
}
.two {
background: wheat;
height: 100px;
padding: 46px !important;
}
</style>
</head>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<body>
<div class="container">
<div class="row">
<div class="col-sm-2 one"></div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-sm-2 two"></div>
</div>
</div>
</body>
</html>
First dive has 0 padding thus it has full width 90px:
Second div has 46 padding thus it has no width left:
#MRadev has made a good suggestion. You should try to stick to the library/framework/toolkit you are using.
Following is the same first code snippet in OP trying to use as many bootstrap classes as possible.
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<body>
<!-- using available bootsrap classes-->
<div class="container">
<div class="row">
<div class="col-sm-2 bg-danger p-5"></div>
</div>
</div>
<!-- extending with specific classes -->
<style>
.p-100 {
padding: 100px !important;
}
.bg-pink {
background-color: pink !important;
}
</style>
<div class="container">
<div class="row">
<div class="col-sm-2 bg-pink p-100"></div>
</div>
</div>
This discussion will help you add more spacing options: https://stackoverflow.com/a/46125059/15273968
https://getbootstrap.com/docs/4.6/utilities/spacing/
https://getbootstrap.com/docs/4.6/utilities/colors/
The columns will automatically stack on top of each other when the screen is less than 768px wide. I want to, that than 991px wide but in bootstrap 4?
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container-fluid">
<h1>Hello World!</h1>
<p>Resize the browser window to see the effect.</p>
<p>The columns will automatically stack on top of each other when the screen is less than 768px wide.</p>
<div class="row">
<div class="col-sm-4" style="background-color:lavender;">.col-sm-4</div>
<div class="col-sm-4" style="background-color:lavenderblush;">.col-sm-4</div>
<div class="col-sm-4" style="background-color:lavender;">.col-sm-4</div>
</div>
</div>
</body>
</html>
Just chang scrips to bootstrap-4:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
Here is code:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<div class="container-fluid">
<h1>Hello World!</h1>
<p>Resize the browser window to see the effect.</p>
<p>The columns will automatically stack on top of each other when the screen is less than 768px wide.</p>
<div class="row">
<div class="col-sm-4" style="background-color:lavender;">.col-sm-4</div>
<div class="col-sm-4" style="background-color:lavenderblush;">.col-sm-4</div>
<div class="col-sm-4" style="background-color:lavender;">.col-sm-4</div>
</div>
</div>
Use media-query to 991px jsFiddle:https://jsfiddle.net/9p3nws1h/
#media only screen and (min-width: 991px) {
.col-sm-4{
width:33.333333%!important;
}
}
Please read the Bootstrap 4 Documentation. It shows that the lg breakpoint is 992 pixels ...
Therefore, the markup is simply:
<div class="row">
<div class="col-lg-4" style="background-color:lavender;">.col-lg-4</div>
<div class="col-lg-4" style="background-color:lavenderblush;">.col-lg-4</div>
<div class="col-lg-4" style="background-color:lavender;">.col-lg-4</div>
</div>
Working demo
Please refer Grid options section in bootstrap documentation for information on the breakpoints in grid.
https://getbootstrap.com/docs/4.0/layout/grid/#grid-options
You are using col-sm-4 in your code and the breakpoint for sm is 540px.
Other options are
md at 720px
lg at 960px
xl at 1140px
If you want to define your own breakpoints then write your own media css queries.
In bootstrap 4, 991px resolution is not defined in media queries but then too if you want to add it, then you need to add it manually like this:
Bootstrap provides 992px resolution which comes in ".col-lg-"
#media only screen (min-width:991px) {
// Here comes your code
}
This isn't bootstrap, but it's a demonstration of how straightforwardly you can achieve your desired effect, using CSS3 Flexbox and a single #media query.
Working Example:
.row {
display: flex;
flex-wrap: wrap;
}
.row div {
flex: 1 1 33%;
height: 100px;
}
.row div:nth-of-type(1) {
background-color: lavender;
}
.row div:nth-of-type(2) {
background-color: lavenderblush;
}
.row div:nth-of-type(3) {
background-color: lavender;
}
#media only screen and (max-width: 991px) {
.row div {
flex: 0 0 100%;
}
}
<main>
<p>The columns will automatically stack on top of each other when the screen is less than 991px wide.</p>
<div class="row">
<div>Column 1</div>
<div>Column 2</div>
<div>Column 3</div>
</div>
</main>
I need to put my span inside a div,but because the content of div is more, it is overflown out of the border of the parent div.
How to solve it?
My outer div should be flexible because the contents in span is dynamic.
Here is the plunker link = DEMO
.outerDiv {
width: 100%;
border: 2px solid black;
}
.div40 {
width: 40%;
}
.div60 {
width: 60%;
float: right;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
</head>
<body>
<h1>Hello Plunker!</h1>
<div class="outerDiv">
<span class="div40">
hello
</span>
<span class="div60">
hello i am trying to insert this content inside the parent div,but i am not able to do so. My content should be inside the border of this div and i want the height not to be fixed as my content is dynamic.
</span>
</div>
</body>
</html>
You need to add a new element after div60
<div class ="outerDiv">
<span class = "div40">
hello
</span>
<span class = "div60">
hello i am trying to insert this content inside the parent div,but i am not able to do so. My content should be inside the border of this div and i want the height not to be fixed as my content is dynamic.
</span>
<div class="clear"></div>
</div>
and add the following in your CSS
.clear {
clear: both
}
set the outerDiv to display: inline-block
/* Styles go here */
.outerDiv
{
width:100%;
border:2px solid black;
display: inline-block;
}
.div40
{
width:40%;
}
.div60
{
width:60%;
float:right;
}
<h1>Hello Plunker!</h1>
<div class ="outerDiv">
<span class = "div40">
hello
</span>
<span class = "div60">
hello i am trying to insert this content inside the parent div,but i am not able to do so. My content should be inside the border of this div and i want the height not to be fixed as my content is dynamic.
</span>
</div>
By adding display inline block to outer div class you can achieve it.
/* Styles go here */
.outerDiv
{
width:100%;
border:2px solid black;
display:inline-block;
}
.div40
{
width:40%;
}
.div60
{
width:60%;
float:right;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
</head>
<body>
<style>.outerDiv span{}</style></style>
<h1>Hello Plunker!</h1>
<div class ="outerDiv">
<span class = "div40">
hello
</span>
<span class = "div60">
hello i am trying to insert this content inside the parent div,but i am not able to do so. My content should be inside the border of this div and i want the height not to be fixed as my content is dynamic.
</span>
</div>
</body>
</html>
Move to fluid content... bootstrap.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"/>
</head>
<body>
<h1>Hello Plunker!</h1>
<div class="container">
<div class="row">
<div class="col-md-4">
hello
</div>
<div class="col-md-8">
hello i am trying to insert this content inside the parent div,but i am not able to do so. My content should be inside the border of this div and i want the height not to be fixed as my content is dynamic.
</div>
</div>
</div>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://getbootstrap.com/dist/js/bootstrap.min.js"></script>
<script src="https://getbootstrap.com/assets/js/ie10-viewport-bug-workaround.js"></script>
</html>
I have a div that will not stay put, it travels outside of the parent. The div I'm having trouble with is marked "6". It travels outside the parent to the right.
Here is my code.
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
html{
border:1px solid;
height:99%;
}
body{
height:100%;
margin:0;
padding:0;
}
#pageWrapper{
padding:0;
margin:0;
height:100%;
position:relative;
}
</style>
</head>
<body>
<div id="pageWrapper">
<div style="width:50%;border-right:0px solid;height:100%;float:left;position:relative;">
<div style="width:100%;height:30%;border:1px solid;">1</div>
<div style="width:100%;height:40%;border:1px solid;">2</div>
<div style="width:100%;height:30%;position:absolute;bottom:0;border:1px solid;">3</div>
</div>
<div style="width:50%;border:0px solid;height:100%;float:right;">
<div style="width:100%;height:40%;border:1px solid;">4</div>
<div style="width:100%;height:40%;border:1px solid;">5</div>
<div style="width:100%;height:20%;position:absolute;bottom:0;border:1px solid;">6</div>
</div>
</div>
</body>
</html>
Add position:relative to the parent div or remove position:absolute from the div you marked
Get rid of the position:absolute;bottom:0 on the lower two divs - It's unnecessary and causes your erratic behaviour.
I am trying to display a background image for a website header, however, it won't display. Here is the code:
HTML:
<!DOCTYPE html>
<html>
<head>
<title>Matt Hayward's Blog</title>
<link rel="stylesheet" type="text/css" href="styles/main.css">
</head>
<body>
<div id="wrapper">
<div id="header">
</div> <!-- header -->
<div id="navbar">
<ul>
</ul>
</div> <!-- navbar -->
<div id="maincontent">
</div> <!-- maincontent -->
<div id="rightmenu">
</div> <!-- rightmenu -->
</div> <!-- wrapper -->
<div id="footer">
</div> <!-- footer -->
</body>
</html>
And the CSS for the header div:
#header
{
background: #fff url(header.png) no-repeat;
width: 960px;
height: 121px;
}
This is something I have used a hundred times before, and never had problems displaying the background image, so I'm totally perplexed to as to why it isn't working. If anyone can help, that would be great.
I have tried the url() property both with and without single quotes, but neither way works.
(I know similar questions have been asked before, and I've looked at several of them but the answers don't solve my problem.)
Your code is good. Make sure header.png exists and resides in the styles folder.