I'm having a problem about loading 2 sections in Bootstrap and as you can see here in jsfiddle there is a little white space between the page header and the top menu... So how to remove that so the both sections will stick together... Not that I also tried margin-top:0; padding-top:0; but they didn't work !
The bootstrap .navbar has a default margin-bottom of 50px. To remove that, add a new style which overrides it.
.navbar {
margin-bottom: 0;
}
Related
I have just started learning Bootstrap 5. I made a very simple webpage with basic blocks using the row/column guidelines on Bootstrap. One of these columns that I made is not displaying the gutter padding. The other columns are displaying the gutter padding to the left and right, but not the content1 column that consists of the two "posts". I am attaching my HTML and CSS code here.
Here is the webpage that I made in Bootstrap 5: Click Here to View
And I am attaching my CSS code here:
.header1 {
background:#ededed;
border-bottom:1px solid #ddd;
}
.content1 {
padding:40px 0;
}
.post {
background:#ffe6fa;
margin-bottom:30px;
}
.sidebar1 {
padding:40px 0;
}
#widget1, #widget2, #widget3 {
background:rgb(233, 250, 205);
padding:30px;
margin-bottom:30px;
}
.footer1 {
background:#000;
color:#fff;
}
Can you please help me understand what did I do wrong in my code? Why is the Bootstrap gutter padding not displaying for the column with class "content1"?
Thank you so much.
There is a way for Bootstrap to do all the work and you get to shrink down your CSS file too.
blahblahblah{
etc.etc.etc
etc.etc.etc
etc.etc.etc
}
^ done for one tiny UX result eventually adds up to a large file that needs to be loaded by each visitor. You could do it all by adding 4 characters only to your HTML.
You are adding a lot of CSS when Bootstrap will take care of it for you. In the same way that you can add rows and columns to your HTML to make a cool layout where all the CSS is pre-written, you can also add margins and padding to your HTML and the CSS is all automatic too. You've already been doing this by adding gutters (if you were also following the GetBootstrap info for those rather than adding your own).
In your thing above, the two items that require a gutter on their right hand side could just have a little margin on their right hand side, or the column they are housed in could have a little right-side padding.
So, padding in Bootstrap, use any number between 0 and 5. Everything below also applies to Margins, just swap the p to an m.
<div class="p-0">
Padding - None
<p class="p-5">
Padding - Maximum (but you can add CSS)
<a class="pt-0">
Padding Top - None
<h1 class="pb-5">
Padding Bottom - Maximum
In Bootstrap we don't use left and right for some things, we use Start and End.
<nav class="ps-5">
Padding Start (the left side of whatever is being padded)
<footer class="pe-2">
Padding End (the right side of whatever is being padded)
^ That last one can be added to the parent div of your two boxes. Adding pe-2 to your HTML is better than brain-aching over custom CSS? As promised, 4 characters only ;)
Couple of variations...
<img class="px-0">
Padding left and right
<button class="py-0">
Padding top and bottom
The main point is, especially with the layout of the page. Let Bootstrap do the work, adding more and more layout CSS often results in a negative.
The thing is you are adding padding for content1 as padding: 40px 0; which makes the padding zero on both left and right of the content1.
If you want to have some padding,
.content1{
padding: 40px 10px;
}
will do the trick.
And if you want to add some padding to .post classes as well, you can use,
.post{
padding: 30px;
}
Pretty self explanatory. I've spent hours messing around with the code...and cannot get the multicoloured navbar to align to the left to match rest of the content.
As you can see...there's a small gap on the left of about 20px. I have no idea what's causing it.
I would like the green menu button and top navbar to move slightly to the left where the grey header starts.
I've tried adding the following to menu styles #session:
margin-left:0;
left:0;
padding-left:0;
doesn't work!
Fiddle
ul has padding, that comes into play by default
Remove padding from #session
use
#session{
padding:0;
}
you just need to take the padding off
#session{
/* other styles */
padding-left: 0;
}
use
#session{padding-left:0}
DEMO
I was writing a page in bootstrap when I stuck an issue. I have made a menu-bar or a navbar in bootstrap. Just below the navbar there is a slider. But there is an extra space in between the navbar and the slider. When I debugged, I found that extra space was of the navbar.
How could I remove the white-space between navbar and slider so that they are attached to each other.
Here is a jsfiddle of it.
By default the bootstrap navbar includes a 20 pixel margin. If you remove the margin by overriding the default bootstrap css they will be connected.
Add this to your css:
.navbar{
margin-bottom: 0px;
}
Updated fiddle here: http://jsfiddle.net/DTcHh/3490/
Add some CSS:
.navbar {
margin-bottom: 0;
}
in your fiddle you have
.navbar {margin-bottom: 20px;}
so you could also override it inline directly inserting style in html-markup...
(you can set it to 0 or none)
I've made website with bootstrap fixed navbar. It has fixed navbar so in stylesheet body have top-padding of 70px.
When i print the page it add that extra space at top of paper. What can i do to remove that extra space causing by that top-padding.
Below is print preview with padding
Below is print preview without padding which i want with less space at top.
If i remove the padding the print is as i want but the in browser the content get behind the nav bar and i can't see the first 2-3 lines.
Please give me some solution to retain the fixed navbar and also the padding don't get include in print.
Add a new print stylesheet like so (place this after your main stylesheet):
<link rel="stylesheet" href="/css/print.css" media="print">
In print.css set your new CSS rule for the body tag like so:
body {
margin-top: 0;
}
I know you may or may not want to show the navbar in print. I wanted to show it, so I added this in my CSS (Bootstrap 3):
#media print {
.navbar {
display: block;
border-width:0 !important;
}
.navbar-toggle {
display:none;
}
}
The accepted answer works perfectly, but if you don't want to add a new style sheet, an alternative is to wrap the body padding in a media tag. In your Site.css:
#media screen {
body {
padding-top: 50px;
padding-bottom: 20px;
}
}
This specifies that the style should only be applied when viewing the page, not printing.
I've made a site using with a CSS made from scratch.
The Page The CSS
Randomly there are unwanted white spaces in two places:
Above the main content area (below
the menu bar).
Below the main content area and
sidebar and above the footer.
I've experimented with various methods of fixed the problem like margins and paddings but they didn't seem to work.
What could I do to get rid of these white areas?
The extra white space comes from the browser's default stylesheet. Add these rules:
h2 {
margin: 0;
}
h4 {
margin: 0;
}
To solve this problem, and prevent future ones, I recommend using a CSS reset. Eric Meyer's is a widely recommended one; another good option is the YUI CSS Reset.
You need a css reset. For example the white space below the menu bar is caused by the browser default margins of the .maincontent h2.
Personally I prefer to reset the styles for the selectors that I use, but there are general css resets like Eric Meyer's Reset CSS.
Your maincontent h2 and footer h4 both have margins(.83em and 1.33 em respectively) set them both to 0
Have you checked out your css in IE?
.maincontent {
background: #0F3;
height: 300px;
width: 580px;
float: left;
}
basically, you need to add float:left; to your maincontent css
1.) The "Main Page" header has a top margin of 19 pixels. This causes that 19 pixel area of white space.
2.) The entire Footer has a top margin of 21 pixels. This causes that 21 pixel area of white space. Also, for fixing the issue below sidebar, solving 1 + 2 may automatically resolve this.
try adding the following to the top of your stylesheet:
body, h1, h2, h3, p
{
margin:0;padding:0;
}
This ensures that all browsers' default padding/margin are set to 0, so its consistent. Then you can add padding/margin where you need it.