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
Related
This is similar to other questions posted, but a bit more specific.
My goal is to create a split navbar using CSS (pure or using bootstrap), with login and signup buttons aligned to the right and other buttons to the left. On XL screens, I have the login and signup buttons change from inline-block to block display, which makes them take up two lines each. Each consists of a font awesome icon and text. With this simple change, I'm having a lot of trouble with vertically aligning the other buttons. The block buttons are centered vertically in the navbar, but the others are too high.
All flexbox-based solutions have had the side effect of removing the right-alignment of the login and signup buttons. This includes any bootstrap classes like d-flex, adding any align properties to the css file..
I could redesign the navbar to have the right-aligned items in a secondary navbar as in the solution here: bootstrap navbar floating left and right but I am pretty curious about solving / understanding this issue (and being able to implement this in the simplest way possible).
Here's how I have the html structure:
<div class="container-fluid">
<div class="row no-gutters flex-row">
<ul class="">
<li class=""> Map</li>
...
<li class="dropdown">
...
</li>
<li class="nav navbar-right " id="signup-btn">
<span class="fa fa-user"></span><span class="d-none d-sm-inline d-xl-block">Sign Up</span>
</li>
<li class="nav navbar-right " id="login-btn">
<span class="fa fa-sign-in"></span><span class="d-none d-sm-inline d-xl-block" >Log In</span>
</li>
</ul>
</div>
</div>
Custom CSS for these elements:
li {
float: left;
}
li a, .dropbtn {
display: inline-block;
text-align: center;
padding: .9rem .9rem;
}
#login-btn{
float: right; !important;
}
#signup-btn {
float: right; !important;
}
#navbar li {
vertical-align: center;
}
What this looks like:
If I try some of the flex solutions posted eg, here Bootstrap NavBar with left, center or right aligned items, can't split the navbar any more:
use "text-right" class for container div - in bootstrap
If I correctly understood your task you can do like this:
Split nav into 2 blocks and move them with
.nav {
justify-content: space-between;
}
Set blocks' height equal 100% of the parent
Use 'align-items: center' inside of them
.nav__list, .nav__buttons {
height: 100%;
display: flex;
align-items: center;
}
I've created pen. I think it'll help you.
https://codepen.io/dimaaan21/pen/WNvbEvM
The other question does provide the guidance needed to achieve left and right Navbar items with text & icons.
Just use 2 navbar-nav's and justify-content-between...
<nav class="navbar navbar-dark navbar-expand justify-content-between">
<div class="container-fluid">
<ul class="navbar-nav">
<li class="nav-item text-center">
<span class="fa fa-map"></span><span class="d-none d-sm-inline d-xl-block px-1">Map</span>
</li>
<li class="nav-item dropdown text-center">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><span class="fa fa-list"></span><span class="d-xl-block d-none"></span><span class="d-none d-sm-inline px-1">Dropdown</span> </a>
...
</li>
</ul>
<ul class="nav navbar-nav ml-auto">
<li class="nav-item text-center" id="signup-btn">
<span class="fa fa-user"></span><span class="d-none d-sm-inline d-xl-block px-1">Sign Up</span>
</li>
<li class="nav-item text-center" id="login-btn">
<span class="fa fa-sign-in"></span><span class="d-none d-sm-inline d-xl-block px-1">Log In</span>
</li>
</ul>
</div>
</nav>
https://codeply.com/go/kTGlK9Axdk/left-right
this is a bad way to solve the problem. It's better to use flexbox instead of float.
for example:
<div class="parent-box">
<div>
Map
...
</div>
<div>
<span class="fa fa-user"></span><span class="d-none d-sm-inline d-xl-block">Sign Up</span>
<span class="fa fa-sign-in"></span><span class="d-none d-sm-inline d-xl-block" >Log In</span>
</div>
</div>
.parent-box {
display: flex;
align-items: center;
justify-content: space-between;
}
I am working on bootstrap home page. I wanted to add a floating ribbon image (Buy Now) just like:
http://cohhe.com/demo/sky/sky-directory/ website.
I tried to add it into my webpage but it does not appears. I know that I have to use Fixed and Top Property in CSS but I am not getting the image only. I added the buy ribbon link below form. May I added it into a wrong place. I am new to Bootstrap.
Code:
#buy-now-ribbon {
/*background: url(images/ribbon.png) no-repeat;*/
background: url("http://cohhe.com/demo/sky/sky-directory/wp-content/themes/sky/images/ribbon.png") no-repeat;
top: -8px;
right: 25px;
position: fixed;
z-index: 222;
width: 53px;
height: 145px;
display: none;
}
#backgroundimage {
background-image: url("https://d12dkjq56sjcos.cloudfront.net/pub/media/wysiwyg/Dubai-Skyline-Burj-Al-Arab-Big-Bus-Tours-01.17.jpg");
width: 100vw;
height: 100vh;
background-size:100% 100%;
background-repeat: no-repeat;
position: relative;
max-width:100%;
}
<html>
<body>
<form id="form1" runat="server">
<div class="container-fullwidth example2">
<nav class="navbar navbar-default navbar-static-top">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar2">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="http://disputebills.com">
<img src="images/layout/check.png" style="width:451px;height:36px;" class="img-responsive" alt="dubaiexporters.com"/>
</a>
</div>
<div id="navbar2" class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li class="active">
Home
</li>
<li>
Advertise
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Exhibitions
<span class="caret"></span>
</a>
<ul class="dropdown-menu" role="menu">
<li>
Trade fairs in U.A.E
</li>
<li>
Trade fairs worldwide
</li>
<li>
Add Your Event
</li>
</ul>
</li>
<li>
Memberships
</li>
<li>
About us
</li>
<li>
News
</li>
<li>
Contact us
</li>
<li>
Partners
</li>
<%-- <li></li>--%>
<li></li>
</ul>
</div>
<!--/.nav-collapse -->
</div>
<!--/.container-fluid -->
</nav>
<div id="backgroundimage"></div>
</div>
</form>
</body>
</html>
I added this CSS:
.buy-now-ribbon{
background:url(images/ribbon.png) no-repeat;
/*background: url("http://cohhe.com/demo/sky/sky-directory/wp-content/themes/sky/images/ribbon.png") no-repeat;*/
top:0;
left:0px;
position:fixed;
width:10%;
z-index:9999;
height:150px;
background-attachment: fixed;
}
I made some changes here.I have placed div after ul class and it worked for me.
<ul class="nav navbar-nav navbar-right">
...
...
</ul>
I know your problem - a class/ID mix-up. In your CSS, you've got this line:
#buy-now-ribbon
But in your HTML, this line pops up:
<a href="http://themeforest.net/item/sky-wordpress-listings-theme/10061836?ref=Cohhe"
target="_blank" class="buy-now-ribbon"></a>
The problem you're having is your ID selector (#) does not link with your class declaration (class="buy-now-ribbon). The selector for a class is a dot/period (.). In your CSS, change the #buy-now-ribbon to .buy-now-ribbon, and it will work.
I'm having a bit of a problem with the Bootstrap nav I've placed on a website I'm making.
When collapsed on smaller screens, the drop down navigation menu doesn't span 100% of the screen - It looks as if there's a 1px gap on either side of the menu and I can't seem to figure out how to fix this.
** EDIT **
Due to bad markup in my original post - I've updated this (still having probelems, but this represents my problem better) at JSFIDDLE
<div class="navbar navbar-custom">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navigation">
<span class="fa fa-bars fa-2x"></span> Menu</button>
<span class="logo"> Logo</span>
</div>
<div class="collapse navbar-collapse" id="navigation">
<ul class="nav navbar-nav navbar-right">
<li>Book A Repair </li>
<li>About </li>
<li>How it Works </li>
<li>Testimonals </li>
<li>Contact </li>
</ul>
</div>
</div>
It's happening because of the Bootstrap margin on the .navbar-collapse.. which is a negative margin of 15px. Just move it out a pixel on each side:
.navbar-custom .container >.navbar-collapse {
margin-right: -16px;
margin-left: -16px;
}
Bootply
I have a set of social media icons in one row that keep aligning to the left on wider breakpoints.
I would like them to be in the middle of the page when on wide breakpoint.
Also, on smaller breakpoints they turn into a vertical column and appear on top of each other. Is there a way to align them in one row horizontally and centrally on the page on smaller break points as well?
I have tried the following but its still not helping.
#media screen and (min-width: 320px) {
#social {
display: inline-block;
}
}
The following is the html that I see in the template:
<div id="social">
<div class="container">
<div class="row centered">
<div class="col-lg-2">
<a href="url" title="linkedin" target="_blank">
<i class="fa fa-linkedin"></i>
</a>
</div>
<div class="col-lg-2">
<a href="url" title="twitter" target="_blank">
<i class="fa fa-twitter"></i>
</a>
</div>
<div class="col-lg-2">
<a href="url" title="skype" target="_blank">
<i class="fa fa-skype"></i>
</a>
</div>
<div class="col-lg-2">
<a href="url" title="instagram" target="_blank">
<i class="fa fa-instagram"></i>
</a>
</div>
</div><!-- --/row ---->
</div><!-- --/container ---->
</div>
Any suggestions? Thanks in advance!
Instead of aligning them in separate divs use unordered lists as follow:
HTML
<div id="social">
<div id="container">
<ul>
<li>
<a href="url" title="linkedin" target="_blank">
<i class="fa fa-linkedin"></i>
</a>
</li>
<li>
<a href="url" title="twitter" target="_blank">
<i class="fa fa-twitter"></i>
</a>
</li>
<li>
<a href="url" title="skype" target="_blank">
<i class="fa fa-skype"></i>
</a>
</li>
<li>
<a href="url" title="instagram" target="_blank">
<i class="fa fa-instagram"></i>
</a>
</li>
</ul>
</div>
</div>
And here is the CSS part
#social #container {
text-align: center;
}
#social #container ul {
float: left;
}
#social #container ul li {
float: left;
padding-left: 10px;
list-style-type: none;
}
And for making the image to be aligned horizontally even in a smaller screen you need to give a percentage width or height to not move down.
I have a little problem, i got bootstrap navbar set up, but when i resize it to the tablet width, menu escapes the navbar and gets into content like shown here:
http://oi57.tinypic.com/2uykv9g.jpg "see the problem"
Is the menu too wide ? Any help how to fix this would be greatly appriciated.
Code here:
<div class="navbar navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="fa fa-bars color-white"></span>
</button>
<a class="navbar-brand" href="index.html" ><img class="img-responsive" src="images/new.jpg"></a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav" >
<li class="active"><i class="fa fa-home"></i></li>
<li>Packages</li>
<li>Examples of webpages</li>
<li>Our Services</li>
<li>Benefits</li>
<li>References</li>
<li>Contact </li>
</ul>
</div><!--/.navbar-collapse -->
</div>
</div>
Ok i fixed it, so in case somebody else is having that problem, all i did was scale down the logo (which was partially the problem) to 80% on devices smaller than 992px, gave it an absolute positioning etc, here is the css:
#navbar-height: 150px;
#navbar-brand-vpadding: 10px;
.navbar-brand img {
height: #navbar-height - #navbar-brand-vpadding * 2;
position: absolute;
top: #navbar-brand-vpadding;
}
#media (max-width: 992px) {
.make-custom-class-here {
width:201px;
height:41px;
}
}