I am trying to make an "Inbox" in bootstrap similar to Gmail's look and feel.
I am having some issues with the Panel that the mail items are in however.
http://jsfiddle.net/64t872o1/
I am having trouble getting rid of this Margin or padding and I cant figure out what it is.
I have set the margins and padding of the panel body to zero but it still remains.
.panel-body{
padding: 0px;
padding-bottom: 0px;
margin-bottom: none;
}
Is there an easy way to figure out where this padding is coming from?
You are seeing the margin that is set on the .list-group element.
Updated Example
.tab-content .list-group {
margin-bottom: 0;
}
Here is the initial styling set in the main Bootstrap file:
.list-group {
padding-left: 0;
margin-bottom: 20px;
}
The best way:
.tab-content .list-group {
margin-bottom: 0;
}
Add this in your css :
.tab-content .list-group{margin-bottom:0;}
Use this:
.list-group { margin-bottom: 0px; }
Related
I am trying to add padding after a <details> tag because the next <p> is basically touching it...
I tried adding padding-bottom but it just makes the grey tag larger and doesn't add space...
The CSS I currently have is:
// Start Drop Down Details
details {
padding: .8em;
background: #353535;
border-radius: 20px
}
summary::-webkit-details-marker {display: none; }
details summary::before {
content:"►";
padding: .7em;
}
details[open] summary::before {
content:"▼";
padding: .7em;
}
If you want to see what it looks like live you can see it here: https://www.seekadventure.net/d/198-myog-backpacking-quilt-outdoorink
Padding adds space between the content and the border i.e. making the grey tag bigger.
Margin adds space between the border of an element and the border of other elements.
If you want to add space between the two elements you will need to add margin.
details {
margin-bottom: 1rem;
padding: .8em;
background: #353535;
border-radius: 20px
}
Navbar component-
body {
margin-top: 0;
padding: 0;
font-size: 18px;
}
.container {
width: 95%;
margin: 0 auto;
}
header {
margin-top: 0;
background: blue;
padding: 1em;
}
a {
color: white;
text-decoration: none;
}
a.logo {
font-weight: bold;
}
nav {
float: right;
}
ul {
list-style-type: none;
margin: 0;
display: flex;
}
li:hover {
filter: brightness(50%);
}
li a {
padding: 1em;
}
<header class="head">
<div class="container">
Home
<nav>
<ul>
<li> hello</li>
<li> whatsup</li>
</ul>
</nav>
</div>
</header>
<div class="container">
<router-outlet></router-outlet>
</div>
I am using chrome I notice a thin white strip of space at the top and the left and the right of the header component containing the navbar. How can i remove this such that the white space is replaced by navbar color ie. blue.
I am new at css, and Would be good if an explanantion of the cause could be provided.
Thanks
body {
display: block;
margin: 8px;
margin-top: 8px;
margin-right: 8px;
margin-bottom: 8px;
margin-left: 8px;
}
Added the css that displays on the inspect element for further clarity
I changed the margin-top:0 with the margin:0 for the body.
I hope it would work.
body {
margin: 0;
padding:0;
font-size: 18px;
}
Styling inline for body was one workaround that worked incase the browser doesnt recognize body css(assuming there wasnt any errors in the css ofcourse) and applies default styling.
From the update in your question where you show us the CSS being applied, as seen in the element inspector, we can see that your CSS is not being picked up by the browser at all.
Its difficult to tell why, but here are a few things that can help you fix it:
If it is in an external CSS file, check that the file is being included
Check for typos in the CSS for the body
Check for typos or misplaced } in any CSS before the body CSS - an error in preceding CSS could prevent the rest of the CSS in that file from being applied
Try adding that CSS directly into the HTML in a style tag to see if it works there... if so:
Try deleting the CSS and retyping it manually - Very occasionally I've seen issues where code copied from the internet or elsewhere can have hidden characters that cause problems.
I am learning web-designing. Trying to replicate a web for practice. Everything seem to be OK.However the space between the nav bar and the first div takes 20px margin space. I want the margin space to be 0px. The css file hold margin as 0px but there is always 20px when I inspect the page. how do i solve this? Thanks in Advance.
You can overwrite the css class that has the 20px margin by using
.className {
margin: 0px !importart;
}
As you suggested i tried the above soln.It didnt work.
I am sending an image and the code.. hope it helps.
.navbar {
padding-top: 15px;
padding-bottom: 15px;
border: 0;
border-radius: 0;
margin-bottom: 0;
font-size: 12px;
letter-spacing: 5px;
}
.navbar-nav li a:hover {
color: #1abc9c !important;
}
the image is for the inspect of the nar bar...where the margin is not accepting 0px.
Please see the attachment for more detailed comprehension
I'm using Bootstrap in my current project. As you can see from the picture, there's a blank space that comes in a first column right after the content. Though if I just use columns without any styling, clearly the desired space isn't going to take place. What is the best solution for this problem? I was thinking of wrapping the content in a div with min-height rule but obviously it's a clumsy option.
Thank you.
That is your grid gutter. You can change the width of it with a custom build or by using the source code and changing the scss variable $grid-gutter-width.
As said, the problem is with the gutters.
I use this classes to avoid gutter when I don't want them:
css:
.row.no-gutters {
margin-right: 0;
margin-left: 0;
}
.row.no-gutters > [class^='col-'],
.row.no-gutters > [class*=' col-'] {
padding-right: 0;
padding-left: 0;
}
// I use those for removing side padding when necessary for an specific col
[class^='col-'].no-pad, [class*=' col-'].no-pad {
padding: 0px;
}
[class^='col-'].no-left-pad, [class*=' col-'].no-left-pad {
padding-left: 0px;
}
[class^='col-'].no-right-pad, [class*=' col-'].no-right-pad {
padding-right: 0px;
}
sass:
.row.no-gutters {
margin-right: 0;
margin-left: 0;
> [class^='col-'], > [class*=' col-'] {
padding-right: 0;
padding-left: 0;
}
}
// I use those for removing side padding when necessary for an specific col
[class^='col-'].no-pad, [class*=' col-'].no-pad {
padding: 0px;
}
[class^='col-'].no-left-pad, [class*=' col-'].no-left-pad {
padding-left: 0px;
}
[class^='col-'].no-right-pad, [class*=' col-'].no-right-pad {
padding-right: 0px;
}
I am trying to make it so my navbar at link
is not long in height. I have been searching for an answer to this without any real luck, although got close using this answer
Instead of
and add these 3 line of css
.navbar-xs { min-height:28px; height: 28px; }
.navbar-xs .navbar-brand{ padding: 0px 12px;font-size: 16px;line-height: 28px; }
.navbar-xs .navbar-nav > li > a { padding-top: 0px; padding-bottom: 0px; line-height: 28px; }..
but it stripped out all of my styles. Is there a way to do this?
.nav > li > a {
padding-left: 5px;
padding-right: 5px;
}
In your case there is no need not use container inside bootstrap nav tag.
Getting rid of it has reduced the height of the navbar.