How do I align content inside div - html

How do I align the content properly to fit inside the border box. If you see the image attached, the content has bit of space on left. I tried removing the container class, played around a lot with margin and padding but nothing has worked. It looks like I haven't applied css(bootstrap) in a proper way and also the nav-bar on zoom is not responsive.
I am not sure what is pushing the content to right. How do I fix this?
Created plunker here: https://plnkr.co/edit/iOMp9w4LjIknj11UkFwz?p=preview

You can use .container-fluid instead of .container. Also use .container-fluid inside .navbar-nav and for this one consider removing its padding:
.navbar .container-fluid {
padding: 0;
}
A complete example:
<div class="container-fluid">
<div class="row">
<div class="col-lg-3">
<div class="title"><strong>Title</strong>
<br/>
</div>
</div>
</div>
</div>
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav navbar-left">
<li ui-sref-active="active" class="active"><a ui-sref="phone"><i class="fa fa-phone-square" aria-hidden="true"></i></a></li>
<li style="border-right: #B2B9BA 1px solid;" ui-sref-active="active" class="active"><a ui-sref="message"><i class="fa fa-commenting-o" aria-hidden="true"></i></a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li ui-sref-active="active" class="active"><a ui-sref="dialpad"><i class="fa fa-th-large" aria-hidden="true"></i></a></li>
<li ui-sref-active="active" class="active"><a ui-sref="dialpad2"><i class="fa fa-stop" aria-hidden="true"></i></a></li>
</ul>
</div>
</div>
</nav>
My plunker

in your code in header.html you added the class pull-right, just remove it, it has float:right !important
<ul class="nav navbar-nav pull-right">

Related

Adding space between navbar logo and first nav link

Nav Bar Layout sorry for my bad English. I am trying to add a bit space after logo so that logo stays on the left corner and the first nav links pushed on the left side not totally left but a bit more to the right.
I copied the exact same HTML and CSS code.
<nav class="nav navbar-default navbar">
<div class="container">
<div class="nav-header ">
<a class="navbar-brand"><img src="C:\Users\usama\Downloads\logo.jpg" alt=""></a>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="navbarp"><i class="active fa fa-book fa-xs"></i><br><p></p>About</li>
<li class="navbarp"><i class="fal fa-registered"></i><br><p></p>Admissions</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li class="navbarp"><i class="fas fa-user-plus"></i><br><p></p>sign up</li>
<li class="navbarp"><i class="fas fa-sign-in-alt"></i><br><p></p>login</li>
</ul>
</div>
</div>
</div>
Try this (padding is added to the right of the logo):
<a class="navbar-brand" style="padding-right:15px">
<img src="C:\Users\usama\Downloads\logo.jpg" alt="" />
</a>
Or (padding is added to the left of the nav bar):
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1" style="padding-left:15px">
Also, check your <li> tags. You currently have:
<li class="navbarp"><i class="active fa fa-book fa-xs"></i><br><p></p>About</li>
Note how the heading "about" is outside of the <p></p> tags.
I suspect you'd want it to be formatted it this way:
<li class="navbarp"><i class="active fa fa-book fa-xs"></i><p>About</p></li>
With the word being correctly in the <p></p> tag, you might not need the <br>

How to make a navbar that does not change in height with screen size?

This is my navbar. I'm new to Bootstrap and its driving me crazy. All I want is a simple navbar that doesn't change its height with screen changes, but is horizontally responsive. This one always seems to change navbar height below 768px.
<nav class="navbar navbar-fixed-top navbar-default">
<div class="container-fluid">
<h5>blumury</h5>
<ul class="nav navbar-nav navbar-right" ">
<li><i class="material-icons" style="font-size: 16px;">home</i></li>
<li><i class="material-icons" style="font-size: 16px;">vibration</i></li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#"><i class="material-icons" style="font-size: 16px;">settings <span class='caret'></i></a>
<ul class="dropdown-menu">
<li>Profile</li>
<li>Write Block</li>
<li>Series</li>
<li class="divider"></li>
<li>Logout</li>
</ul>
</li>
</ul>
</div>
</nav>
You should modify CSS code, not HTML one, you're only showing HTML above, which refer to bootstrap files, you can usually find them inside of the
<head>
<!-- This is a comment -->
</head>
So you're trying to find the solution in the wrong code/file, try adding or changing css using the following link: https://www.w3schools.com/css/css_howto.asp
Let me know if you have others questions !

How to make Bootstrap header item and dropdown-menu the same width?

I have this header in my Bootstrap template:
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
//Some unrelated stuff
</div>
<div id="navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
//Some unrelated stuff
</ul>
<ul class="nav navbar-nav pull-right-custom">
<li class="dropdown">
DDButtonText <strong class="caret"></strong>
<ul class="dropdown-menu">
Test
</ul>
</li>
</ul>
</div>
</div>
</nav>
What I'm trying to accomplish is to make the dropdown menu the same width as the 'DDButtonText' thing. I tried setting min-width to dropdown-menu but it was different for each browser. It was alright in my Firefox but Chrome and other browsers showed a little different sizes.
How do I make my menu be the same size as the button regardless of browser, always?
You can try adding this:
CSS:
.nav .dropdown-menu{
width: 100%;
min-width: inherit;
}
Bootply: http://www.bootply.com/MfkTjxasD7

CSS: How to fix overlapping divs

I am using bootstrap to create a web site.
Here is the code for navbar
Edit: Fiddle http://jsfiddle.net/cb6rxu2h/
<header>
<nav class="navbar navbar-fixed-top navbar-inverse">
<div class="container-fluid">
<div class="navbar-header col-md-4 col-sm-12">
<a class="navbar-brand" href="#">BargainKart</a>
</div>
<ul class="nav navbar-nav navbar-right">
<li><a href="#"><span class="badge pull-right">4</span><i class="fa fa-shopping-cart"></i>
</a></li>
<li><a href="#" data-toggle="modal" data-target="#myModal"><i class="fa fa-sign-in"></i>
Sign in</a></li>
</ul>
</div> <!--container fluid-->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav pull-right">
<li>About</li>
<li class="dropdown">
Categories <span class="caret"></span>
<ul class="dropdown-menu">
<li>Electronics</li>
<li>Fashion</li>
<li role="separator" class="divider"></li>
<li>All</li>
</ul>
</li>
</ul>
<div class="col-sm-6 col-md-3 pull-right">
<form class="navbar-form" role="search">
<div class="input-group">
<input type="text" class="form-control" placeholder="Search" name="q">
<div class="input-group-btn">
<button class="btn btn-default" type="submit"><i class="fa fa-search"></i>
</button>
</div>
</div>
</form>
</div>
</div><!-- /.navbar-collapse -->
</nav>
</header>
And the code for sidebar
<div class="wrapper">
<aside>
<div class="categories-bar content-fluid col-md-3 col-sm-12">
<ul class="nav nav-pills nav-stacked">
<li class="active">Home</li>
<li>About</li><li class="active">Home</li>
<li>About</li><li ">Home</li>
<li>About</li> <li>Shop</li>
</ul>
</div>
</aside>
The css I've used is
aside {
padding-bottom: 5000px;
margin-bottom: -5000px;
background-color: white;
font-size: 1.5em;
}
.wrapper {
position: relative;
overflow: hidden;
}
I've messed up a lot but still can't figure out why the sidebar and wrapper div is overlapping into header.
I can use padding but when I scale the browser there's lot of empty space for small screen browsers.
Since you use the navbar-fixed-top giving the body a padding of the navbars height should fix this problem. Replace XX with your value of the height in pixels.
body {
padding-top: XXpx;
}
You can get this tip here.

2 navbar without space

I want to make something like this
When I made 2 navbar, there is a white gap separating them, how to remove this gap?
I've read somewhere that if I change the size of the navbar's elements will automatically increase its height , but it didn't work out.
If I need to make a custom class for a navbar, what properties should I change?
edit :
<nav class ="navbar topNavbar">
<div class="container-fluid">
<ul class="nav navbar-nav navbar-right">
<li><span class="glyphicon glyphicon-log-in"></span> Login </li>
<li><span class="glyphicon glyphicon-user"></span> Sign Up </li>
</ul>
</div>
</nav>
<nav class="navbar botNavbar">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="">Website name</a>
</div>
<div>
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>Collections</li>
<li>About Us</li>
</ul>
</div>
</div>
</nav>
<style>
.topNavbar {
background-color: #F60;
}
.botNavbar {
background-color : #F90;
}
</style>
Bootstraps .navbar has a 20px bottom margin by default.
So you could do:
.topNavbar {
background-color: #F60;
margin-bottom: 0;
}
Bootply