I realized that the Bulma dropdown embeded in a modal card body gets covered by the modal body, so this causes an UX issue, imaging if the dropdown is higher than the card body it self, user has to scroll down or move the mouse cursor and move down the scrollbar, what would be the appropriate CSS fix for this? i.e. having the dropdown appear at the top layer (i increased the z-index for the ddl but no luck, please note: I DO need the overflow-y: scroll or auto for the modal card body section.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma#0.9.3/css/bulma.min.css">
</head>
<body>
<div id="modal-ter" class="modal is-active">
<div class="modal-background"></div>
<div class="modal-card">
<header class="modal-card-head">
<p class="modal-card-title">Modal title</p>
<button class="delete" aria-label="close"></button>
</header>
<section class="modal-card-body" style="height: 188px">
<div class="dropdown is-active">
<div class="dropdown-trigger">
<button class="button" aria-haspopup="true" aria-controls="dropdown-menu3">
<span>Click me</span>
<span class="icon is-small">
<i class="fas fa-angle-down" aria-hidden="true"></i>
</span>
</button>
</div>
<div class="dropdown-menu" id="dropdown-menu3" role="menu">
<div class="dropdown-content">
<a href="#" class="dropdown-item">
Overview
</a>
<a href="#" class="dropdown-item">
Modifiers
</a>
<a href="#" class="dropdown-item">
Grid
</a>
<a href="#" class="dropdown-item">
Form
</a>
<a href="#" class="dropdown-item">
Elements
</a>
<a href="#" class="dropdown-item">
Components
</a>
<a href="#" class="dropdown-item">
Layout
</a>
<hr class="dropdown-divider">
<a href="#" class="dropdown-item">
More
</a>
</div>
</div>
</div>
</section>
<footer class="modal-card-foot">
<button class="button is-success">Save changes</button>
<button class="button">Cancel</button>
</footer>
</div>
</div>
<button class="button is-primary is-large modal-button" data-target="modal-ter" aria-haspopup="true">Launch card modal</button>
</body>
</html>
There is a open Bulma issue for this logged at: https://github.com/jgthms/bulma/issues/936
I added a comment on the issue above with the codepen sample:
https://codepen.io/wayneye/pen/ZEyQzOx
The problem lies in what behavior you expect when the dropdown is open and the user starts scrolling. Should the dropdown change position? And what should happen when the dropdown button with "click me" is not visible anymore because the user scrolled it out of sight. If the dropdown should also change position then you would get weird situations. So I made this example of how this problem could be solved by hiding the dropdown menu when the user scrolls.
function contentScroll() {
document.querySelector(".dropdown-menu").style.display = "none";
}
function clickMe(button) {
const rectObject = button.getBoundingClientRect();
const marginBelowButton = 2;
const dropdownContent = document.querySelector(".dropdown-menu");
dropdownContent.style.display = "block";
dropdownContent.style.top = rectObject.top + marginBelowButton + rectObject.height + "px";
dropdownContent.style.left = rectObject.left + "px";
}
.dropdown-menu {
position: fixed !important;
z-index: 20;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma#0.9.3/css/bulma.min.css">
</head>
<body>
<div id="modal-ter" class="modal is-active">
<div class="modal-background"></div>
<div class="modal-card">
<header class="modal-card-head">
<p class="modal-card-title">Modal title</p>
<button class="delete" aria-label="close"></button>
</header>
<section class="modal-card-body" style="height: 188px" onscroll='contentScroll()'>
<div class="dropdown is-active">
<div class="dropdown-trigger">
<button class="button" aria-haspopup="true" aria-controls="dropdown-menu3" onclick="clickMe(this)">
<span>Click me</span>
<span class="icon is-small">
<i class="fas fa-angle-down" aria-hidden="true"></i>
</span>
</button>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has
survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with
desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</p>
</div>
<div class="dropdown-menu" id="dropdown-menu3" role="menu">
<div class="dropdown-content">
<a href="#" class="dropdown-item">
Overview
</a>
<a href="#" class="dropdown-item">
Modifiers
</a>
<a href="#" class="dropdown-item">
Grid
</a>
<a href="#" class="dropdown-item">
Form
</a>
<a href="#" class="dropdown-item">
Elements
</a>
<a href="#" class="dropdown-item">
Components
</a>
<a href="#" class="dropdown-item">
Layout
</a>
<hr class="dropdown-divider">
<a href="#" class="dropdown-item">
More
</a>
</div>
</div>
</div>
</section>
<footer class="modal-card-foot">
<button class="button is-success">Save changes</button>
<button class="button">Cancel</button>
</footer>
</div>
</div>
<button class="button is-primary is-large modal-button" data-target="modal-ter" aria-haspopup="true">Launch card modal</button>
</body>
</html>
if you don't want to hide the dropdown menu when scrolling you can also update the position so it follows the button by changing the function contentScroll() to this:
function contentScroll() {
clickMe(document.querySelector(".button"));
}
But like I said this would arise weird situations
Remove overflow: auto; from this CSS class and it will display correctly:
.modal-card-body {
-webkit-overflow-scrolling: touch;
background-color: #fff;
flex-grow: 1;
flex-shrink: 1;
/* overflow: auto; */
padding: 20px;
}
This could perhaps have an unintended side effect for your other modals, but unfortunately per now there isn't a native CSS method to check for presence of a certain child element in a parent and then style the parent.
You could do this with JavaScript by overriding the parent class with an additional CSS class or an inline style tag if the dropdown is present (or add it only when it is shown, together with the display: block).
It is not suggested but you can use
position: fixed !important;
make sure to neutralize the top and left styles of bulma dropdown on this one:
left: unset !important;
top: unset !important;
.dropdown-menu {
position: fixed !important;
z-index: 20;
left: unset !important;
top: unset !important;
margin-top: 40px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma#0.9.3/css/bulma.min.css">
</head>
<body>
<div id="modal-ter" class="modal is-active">
<div class="modal-background"></div>
<div class="modal-card">
<header class="modal-card-head">
<p class="modal-card-title">Modal title</p>
<button class="delete" aria-label="close"></button>
</header>
<section class="modal-card-body" style="height: 188px">
<div class="dropdown is-active">
<div class="dropdown-trigger">
<button class="button" aria-haspopup="true" aria-controls="dropdown-menu3">
<span>Click me</span>
<span class="icon is-small">
<i class="fas fa-angle-down" aria-hidden="true"></i>
</span>
</button>
</div>
<div class="dropdown-menu" id="dropdown-menu3" role="menu">
<div class="dropdown-content">
<a href="#" class="dropdown-item">
Overview
</a>
<a href="#" class="dropdown-item">
Modifiers
</a>
<a href="#" class="dropdown-item">
Grid
</a>
<a href="#" class="dropdown-item">
Form
</a>
<a href="#" class="dropdown-item">
Elements
</a>
<a href="#" class="dropdown-item">
Components
</a>
<a href="#" class="dropdown-item">
Layout
</a>
<hr class="dropdown-divider">
<a href="#" class="dropdown-item">
More
</a>
</div>
</div>
</div>
</section>
<footer class="modal-card-foot">
<button class="button is-success">Save changes</button>
<button class="button">Cancel</button>
</footer>
</div>
</div>
<button class="button is-primary is-large modal-button" data-target="modal-ter" aria-haspopup="true">Launch card modal</button>
</body>
</html>
note: for a better result, I suggest you to give the fixed position to the parent element of bulma dropdown.
this resolves my issue
.modal.has-overflow {
position: fixed ! important;
overflow: auto ! important;
}
.modal .modal-content,.modal .modal-card,.modal .modal-card-body {
overflow: visible ! important;
}
Related
I have the following card. The nav has a number of items (I kept one here for brevity).
<div class="col-md-3">
<div class="card">
<div class="card-header">
<h3 class="card-title">title</h3>
</div>
<div class="card-body p-0">
<ul class="nav nav-pills flex-column">
<li class="nav-item">
<NavLink href="javascript: void(0);" #onclick="() => ShowSearch()" class="nav-link">
<span class="fa-li pl-5"><i class="fas fa-search" /></span>
<span class="pl-4">Search</span>
</NavLink>
</li>
</ul>
</div>
<div class="card-footer">
<NavLink href="Back" class="nav-link">
<span class="fa-li pl-5"><i class="fas fa-arrow-alt-circle-left"/></span>
<span class="pl-1">Back</span>
</NavLink>
</div>
</div>
</div>
Everything is displayed correctly, even on mobile devices.
However, I was wondering if it is possible to "transform" the nav list into a sort of toolbar (still within the card-body) and display the items next to each other and showing only their icon. Something like this:
Is it possible?
Bootstrap 4 does not have its own icon support,
but to achieve like this output use below small font library.
1)
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href=
"https://cdn.jsdelivr.net/npm/bootstrap-icons#1.5.0/font/bootstrap-icons.css" />
<div class="col-md-3">
<div class="card">
<div class="card-body p-0">
<ul class="list-inline">
<li class="nav-item list-inline-item">
<i class="bi bi-cart"></i>
</li>
<li class="nav-item list-inline-item">
<i class="bi bi-twitter"></i>
</li>
<li class="nav-item list-inline-item">
<i class="bi bi-person-fill"></i>
</li>
</ul>
</div>
</div>
</div>
OR
try like below using font-awesome
<head>
<title>Font Awesome Icons</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<!--OR download above link css to any folder and call-->
</head>
<div class="col-md-3">
<div class="card">
<div class="card-body p-0">
<i class="fa fa-shopping-cart"></i>
<i class="fa fa-twitter"></i>
<i class="fa fa-user"></i>
</div>
</div>
</div>
2)
after making this icon, toolbar use #media css, to check page open in responsive mode, then show this toolbar otherwise display:none.
for ex.
.smallscreentoolbar
{
display:none;
}
.largescreentoolbar
{
display:block;
}
#media screen and (max-width: 600px) {
.smallscreentoolbar{
display: block;
}
.largescreentoolbar
{
display:none;
}
}
if any query please comment.
I copied / pasted a sidebar see below
I would like the text to be positioned in the top of the page like this example below
I have added this line
<div>This is a test</div>
I don't understand why the text is not placed correctly? My text is at the bottom, it's not the result I want.
If you have a solution, I'm really interested.
Thank you for your explanations.
.navbar {
height: 70px;
width: 100%;
background: #212529;
}
<!DOCTYPE html>
<html>
<head>
<title>HTML CSS JS</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
</head>
<body>
<div class="d-flex">
<div class="d-flex flex-column vh-100 flex-shrink-0 p-3 text-white bg-dark" style="width: 250px;">
<a href="/" class="d-flex align-items-center mb-3 mb-md-0 me-md-auto text-white text-decoration-none">
<svg class="bi me-2" width="40" height="32"> </svg>
<span class="fs-4">BBBootstrap</span>
</a>
<div>
</div>
<hr>
<ul class="nav nav-pills flex-column mb-auto">
<li class="nav-item">
<i class="fa fa-home"></i><span class="ms-2">Home</span>
</li>
<li>
<i class="fa fa-dashboard"></i><span class="ms-2">Dashboard</span>
</li>
<li>
<i class="fa fa-first-order"></i><span class="ms-2">My Orders</span>
</li>
<li>
<i class="fa fa-cog"></i><span class="ms-2">Settings</span>
</li>
<li>
<i class="fa fa-bookmark"></i><span class="ms-2">Bookmarks</span>
</li>
</ul>
<hr>
<div>
</div>
</div>
<nav class="navbar navbar-light">
<a class="navbar-brand" href="#" style="color: red">User</a>
<a class="nav-link active" style="color: red" aria-current="page" (click)="logoff()" href="#">Logoff</a>
</nav>
</div>
<div>
This is a test
</div>
</body>
</html>
You have kept your text div outside of div and nav, that's the main reason as div is block element. You will need to change in your html in a way that it behaves like left panel and right panel. Also divide right panel in to 2 parts (top, bottom), where top will be your nav and bottom will be your text div.
To achieve that keep the nav and text div inside one parent (new) div with w-100 class.
See the Snippet below:
.navbar {
height: 70px;
width: 100%;
background: #212529;
}
<!DOCTYPE html>
<html>
<head>
<title>HTML CSS JS</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
</head>
<body>
<div class="d-flex">
<div class="d-flex flex-column vh-100 flex-shrink-0 p-3 text-white bg-dark" style="width: 250px;">
<a href="/" class="d-flex align-items-center mb-3 mb-md-0 me-md-auto text-white text-decoration-none">
<svg class="bi me-2" width="40" height="32"> </svg>
<span class="fs-4">BBBootstrap</span>
</a>
<div>
</div>
<hr>
<ul class="nav nav-pills flex-column mb-auto">
<li class="nav-item">
<i class="fa fa-home"></i><span class="ms-2">Home</span>
</li>
<li>
<i class="fa fa-dashboard"></i><span class="ms-2">Dashboard</span>
</li>
<li>
<i class="fa fa-first-order"></i><span class="ms-2">My Orders</span>
</li>
<li>
<i class="fa fa-cog"></i><span class="ms-2">Settings</span>
</li>
<li>
<i class="fa fa-bookmark"></i><span class="ms-2">Bookmarks</span>
</li>
</ul>
<hr>
<div>
</div>
</div>
<div class="w-100">
<nav class="navbar navbar-light ">
<a class="navbar-brand" href="#" style="color: red">User</a>
<a class="nav-link active" style="color: red" aria-current="page" (click)="logoff()" href="#">Logoff</a>
</nav>
<div>
<h1>This is a test</h1>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</div>
</div>
</div>
</body>
</html>
I'm trying to implement this mobile layout using the Bulma CSS Framework (the red header and the blue footer are both fixed) :
Here is the corresponding code :
<nav class="navbar is-danger is-fixed-top" role="navigation">
<div class="navbar-brand">
<a class="navbar-item" href="index.php">
<img src="http://via.placeholder.com/28x28" width="28" height="28">
</a>
<div class="navbar-burger burger">
<span></span>
<span></span>
<span></span>
</div>
</div>
</nav>
<nav class="navbar is-link is-fixed-bottom" role="navigation">
<div class="navbar-brand">
<a class="navbar-item is-expanded">
<i class="fa fa-user"></i>
<p class="is-size-7">Account</p>
</a>
<a class="navbar-item is-expanded">
<i class="fa fa-list"></i>
<p class="is-size-7">Tasks</p>
</a>
<a class="navbar-item is-expanded">
<i class="fa fa-flag"></i>
<p class="is-size-7">Alerts</p>
</a>
<a class="navbar-item is-expanded">
<i class="fa fa-cog"></i>
<p class="is-size-7">Settings</p>
</a>
</div>
</nav>
<div class="section">
<h1>Content</h1>
<p>Lorem ipsum dolor sit amet...</p>
</div>
Header : is there a way to display a left side burger, a
centered logo and a right side icon ?
Footer : is there a class to display icons and text on top of each other instead of side by side ?
Is this mockup achievable out of the box ? I do not mind doing it manually in CSS but since this mobile layout seems pretty common I was hoping that there would be a natural way to do it.
Is this mockup achievable out of the box?
Yes and No.
You will need to do a small bit of HTML restructuring and add a few lines of CSS to move the burger to the left side.
The layout for the footer can be achieved using Bulma modifier classes.
fiddle
Solution
Header
<div class="navbar-brand">
<div class="navbar-burger burger">
<span></span>
<span></span>
<span></span>
</div>
<a class="navbar-item" href="index.php">
<img src="...">
</a>
</div>
Switch the order of elements in .navbar-brand - The burger comes first, the logo second.
Add the following CSS
.navbar-burger {
margin-left: 0;
margin-right: auto;
}
Footer
Add the .is-block and has-text-centered modifying classes to .navbar-item:
<a class="navbar-item is-expanded is-block has-text-centered">
<i class="fa fa-user"></i>
<p class="is-size-7">Account</p>
</a>
For more info, see here and here
Snippet
js added to make menu functional in demo
// Get all "navbar-burger" elements
var $navbarBurgers = Array.prototype.slice.call(document.querySelectorAll('.navbar-burger'), 0);
// Check if there are any navbar burgers
if ($navbarBurgers.length > 0) {
// Add a click event on each of them
$navbarBurgers.forEach(function($el) {
$el.addEventListener('click', function() {
// Get the target from the "data-target" attribute
var target = $el.dataset.target;
var $target = document.getElementById(target);
// Toggle the class on both the "navbar-burger" and the "navbar-menu"
$el.classList.toggle('is-active');
$target.classList.toggle('is-active');
});
});
}
.navbar-burger {
margin-left: 0 !important;
margin-right: auto;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.6.1/css/bulma.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<nav class="navbar is-danger is-fixed-top" role="navigation">
<div class="navbar-brand">
<div class="navbar-burger burger" data-target="navMenu">
<span></span>
<span></span>
<span></span>
</div>
<a class="navbar-item" href="index.php">
<img src="https://via.placeholder.com/28x28" width="28" height="28">
</a>
</div>
<div class="navbar-menu" id="navMenu">
<div class="navbar-start">
<a class="navbar-item">Example 1</a>
<a class="navbar-item">Example 2</a>
<a class="navbar-item">Example 3</a>
</div>
<div class="navbar-end">
</div>
</div>
</nav>
<nav class="navbar is-link is-fixed-bottom" role="navigation">
<div class="navbar-brand">
<a class="navbar-item is-expanded is-block has-text-centered">
<i class="fa fa-user"></i>
<p class="is-size-7">Account</p>
</a>
<a class="navbar-item is-expanded is-block has-text-centered">
<i class="fa fa-list"></i>
<p class="is-size-7">Tasks</p>
</a>
<a class="navbar-item is-expanded is-block has-text-centered">
<i class="fa fa-flag"></i>
<p class="is-size-7">Alerts</p>
</a>
<a class="navbar-item is-expanded is-block has-text-centered">
<i class="fa fa-cog"></i>
<p class="is-size-7">Settings</p>
</a>
</div>
</nav>
<div class="section">
<h1>Content</h1>
<p>Lorem ipsum dolor sit amet...</p>
</div>
I am using Bootstrap latest version and trying to center align contents in a span and section but nothing seems to work.
Here is my markup:
<div class="container body-content">
<ul id="CategoryMenu" class="list-inline">
<li>
<a href="/Category/Cars">
Cars
</a>
</li>
<li>
<a href="/Category/Buses">
Buses
</a>
</li>
</ul>
<hr>
<section>
<div class="gallery center-block">
<hgroup>
<h2>Products</h2>
</hgroup>
<div class="categories row">
<ul id="da-thumbs" class="da-thumbs">
<div id="MainContent_productList_ctrl0_itemPlaceholderContainer">
<li>
<a href="/Product/Convertible%20Car">
<img src="/Catalog/Images/Thumbs/carconvert.png">
<div><span>Natalie & Justin Cleaning by Justin Younger</span></div>
</a>
<div>
<a href="/Product/Convertible%20Car">
Convertible Car
</a>
</div>
</li>
<li>
<a href="/Product/Old-time%20Car">
<img src="/Catalog/Images/Thumbs/carearly.png">
<div><span>Natalie & Justin Cleaning by Justin Younger</span></div>
</a>
<div>
<a href="/Product/Old-time%20Car">
Old-time Car
</a>
</div>
</li>
<li>
<a href="/Product/Fast%20Car">
<img src="/Catalog/Images/Thumbs/carfast.png">
<div><span>Natalie & Justin Cleaning by Justin Younger</span></div>
</a>
<div>
<a href="/Product/Fast%20Car">
Fast Car
</a>
</div>
</li>
<li>
<a href="/Product/Super%20Fast%20Car">
<img src="/Catalog/Images/Thumbs/carfaster.png">
<div><span>Natalie & Justin Cleaning by Justin Younger</span></div>
</a>
<div>
<a href="/Product/Super%20Fast%20Car">
Super Fast Car
</a>
</div>
</li>
<li>
<a href="/Product/Old%20Style%20Racer">
<img src="/Catalog/Images/Thumbs/carracer.png">
<div><span>Natalie & Justin Cleaning by Justin Younger</span></div>
</a>
<div>
<a href="/Product/Old%20Style%20Racer">
Old Style Racer
</a>
</div>
</li>
<li>
<a href="/Product/Ace%20Plane">
<img src="/Catalog/Images/Thumbs/planeace.png">
<div><span>Natalie & Justin Cleaning by Justin Younger</span></div>
</a>
<div>
<a href="/Product/Ace%20Plane">
Ace Plane
</a>
</div>
</li>
</div>
</ul>
</div>
<span id="MainContent_it" class="btn-group btn-group-sm text-center">
<a class="customDisabledClassName btn btn-default">|<</a>
<a class="customDisabledClassName btn btn-default"><</a>
<span class="btn btn-primary disabled">1</span>
<a class="btn btn-default" href="javascript:__doPostBack('ctl00$MainContent$it$ctl01$ctl01','')">2</a>
<a class="btn btn-default" href="javascript:__doPostBack('ctl00$MainContent$it$ctl01$ctl02','')">3</a>
<a class="btn btn-default" href="javascript:__doPostBack('ctl00$MainContent$it$ctl02$ctl00','')">></a>
<a class="btn btn-default" href="javascript:__doPostBack('ctl00$MainContent$it$ctl02$ctl01','')">>|</a>
</span>
</div>
</section>
</div>
Basically I want that the images in the div gallery should be centered horizontally. So I added center-block and used the following CSS:
.center-block {
display: block;
margin-left: auto;
margin-right: auto;
}
I also want to center align elements inside the <span> called 'MainContent_it' and I added the same center-block to it too, but nothing seems to work.
What else do I do?
IWantToLearn, Hi there. Is this what you are wanting to align.
Have a look at the Fiddle.
.center-this-block {
position: absolute;
left: 0;
right: 0;
margin: auto;
}
Your code is not so much clear but just on a guess
.center-block
{
width: 600px;
margin: 0 auto;
}
give width to the image if you want margin:0 auto.
You need to define the width of the element you are centering, not the parent element.
Apply the above class to the elements that you want to center.
Have a look at the link Why can't I center with margin: 0 auto?
Let me preface this by saying I am relatively new to bootstrap and possibly not udnerstanding the row/column layouts properly.
The layout I am working on can be seen here: http://jsfiddle.net/5NFXY/ (code pasted below)
The 'sidebar' on the right is where the problem is occurring. I have a .col-md-9 and a .col-md-3 enclosed withing a .row, but for some reason the right side of the sidebar is not lining up properly with its container. After playing around with this for quite some time I have found that if I remove margin-right: -15px; from the .row the problem goes away, but surely this isn't' the proper solution and I have mucked something up along the way. My question is, have I done something wrong in my HTML or is the proper solution really to manually override that margin-right: -15px;?
HTML
<body>
<div class="container">
<div class="logo-header">
<h1>Header</h1>
<h4>Subheader</h4>
</div>
<div class="inner-container clearfix">
<!-- Static navbar -->
<div class="navbar navbar-default" role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="dropdown">
Operations <b class="caret"></b>
<ul class="dropdown-menu">
<li class="dropdown-header">Get Started</li>
<li>Start New</li>
<li>View All</li>
<li class="divider"></li>
<li class="dropdown-header"> Settings</li>
<li>Manage Types</li>
<li>Manage Types</li>
</ul>
</li>
<li class="dropdown">
Utilities <b class="caret"></b>
<ul class="dropdown-menu">
<li>Forums</li>
<li class="divider"></li>
<li>Distance</li>
</ul>
</li>
<li class="dropdown">
Administration <b class="caret"></b>
<ul class="dropdown-menu">
<li>News</li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
Alts <b class="caret"></b>
<ul class="dropdown-menu">
<li>1</li>
<li>2</li>
</ul>
</li>
</ul>
</div><!--/.nav-collapse -->
</div>
<div class="row">
<div class="col-md-9">
<div class="wrath-content-box news-post">
<h1>Title Bar</h1>
<p>This example is a quick exercise to illustrate how the default, static navbar and fixed to top navbar work. It includes the responsive CSS and HTML, so it also adapts to your viewport and device.</p>
<p>
<a class="btn btn-lg btn-primary" href="" role="button">View navbar docs »</a>
</p>
</div>
<div class="wrath-content-box news-post">
<h1>Title Bar</h1>
<p>This example is a quick exercise to illustrate how the default, static navbar and fixed to top navbar work. It includes the responsive CSS and HTML, so it also adapts to your viewport and device.</p>
<p>
<a class="btn btn-lg btn-primary" href="" role="button">View navbar docs »</a>
</p>
</div>
<div class="wrath-content-box news-post">
<h1>Title Bar</h1>
<p>This example is a quick exercise to illustrate how the default, static navbar and fixed to top navbar work. It includes the responsive CSS and HTML, so it also adapts to your viewport and device.</p>
<p>
<a class="btn btn-lg btn-primary" href="" role="button">View navbar docs »</a>
</p>
</div>
<div class="wrath-content-box news-post">
<h1>Title Bar</h1>
<p>This example is a quick exercise to illustrate how the default, static navbar and fixed to top navbar work. It includes the responsive CSS and HTML, so it also adapts to your viewport and device.</p>
<p>
<a class="btn btn-lg btn-primary" href="" role="button">View navbar docs »</a>
</p>
</div>
</div>
<div class="col-md-3 wrath-content-box">
<h1>Title Bar</h1>
<p>This example is a quick exercise to illustrate how the default, static navbar and fixed to top navbar work. It includes the responsive CSS and HTML, so it also adapts to your viewport and device.</p>
<p>
<a class="btn btn-lg btn-primary" href="" role="button">View navbar docs »</a>
</p>
</div>
</div>
<footer class="wrath-content-box">
Footer tagline ©
</footer>
</div> <!-- /inner-container -->
</div> <!-- /container -->
</body>
CSS
body {
padding-top: 20px;
padding-bottom: 20px;
background: url('../img/wh-background-1.jpg') center center no-repeat fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
.navbar {
margin-bottom: 20px;
}
.logo-header {
color: #FFF;
}
.logo-header h1 {
margin-bottom: 0;
}
.logo-header h4 {
margin-top: 0;
margin-bottom: 20px;
}
footer {
margin-top: 20px;
}
.inner-container {
background: rgba(119, 119, 119, .5);
border-radius: 6px;
padding: 20px;
}
.wrath-content-box {
border-color: #e7e7e7;
background-color: #f8f8f8;
border-radius: 6px;
padding: 15px;
}
.news-post {
margin-bottom: 20px;
}
Using: Bootstrap 3.0.3 + Jquery 1.10.1
You've combined your custom class wrath-content-box with the bootstrap col-md-3 class and the padding on your class is overriding the Bootsrap grid padding.
You just need to put your class in a separate <div> inside the bootstrap one like you did in the first column.
<div class="col-md-3">
<div class="wrath-content-box">
...
</div>
</div>
Demo