I have been trying to get some alignment to work but I am having a hard time being successful. I'm not sure if there is already a CSS style in bootstrap for vertical alignment or not but that is what I am trying to accomplish.
I have a DIV (.well class) with an image and some text inside it. The Image aligns fine as its responsive so the height and placement is good. However, I am trying to align the button and Text vertically in the middle.
Here is a jsFiddle: http://jsfiddle.net/6z9skpeh/
<div class="col-md-6">
<div class="well wellFriends">
<div class="row">
<div class="col-md-4 friendPic">
<img src="http://oi62.tinypic.com/289j41s.jpg" class="img-responsive">
</div>
<div class="col-md-8 friendDetails">
<div class="row">
<div class="col-md-6"><strong>Bob Smith</strong>
<br><em>Department Name</em>
</div>
<div class="col-md-5 pull-right">
<!-- Single button -->
<div class="btn-group pull-right">
<button type="button" class="btn btn-primary dropdown-toggle pull-right" data-toggle="dropdown" aria-expanded="false">Friends <span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li>Action
</li>
<li>Another action
</li>
<li>Something else here
</li>
<li class="divider"></li>
<li>Separated link
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
This is what I have so far:
This is what I am trying to do:
You can try like this: demo
css:
.v_align {
font-size: 0;
}
.v_align >[class*="col"] {
float: none;
font-size: 14px;
display: inline-block;
vertical-align: middle;
}
HTML:
<div class="row v_align">..</div>
Related
i have just started learning web development and I have been facing a few issues related to the alignment of tags, buttons and icons.
Here are the issues I'm facing:
The brand name is not in line with the a tags. i tried display:inline; in every class but its not working.
the social media tags are hanging in mid air, I want them to be in line with the a tags. Again, i tried reducing the margin, padding and using the inline command but nothing seems to be working.
the bootstrap search button is also hanging mid air. I want all the above three to be in line.
Here's a screenshot of the page.
And here's the code
header {
background: #669999;
color: white;
padding: 5px 5px 5px 15px;
}
.fontsize {
color: white;
margin: 0px 0px 0px 10px;
font-size: 25px;
padding: 5px;
}
.icon {
float: right;
list-style-type: none;
margin: 0px 10px 0px 10px;
padding: 5px;
display: inline;
}
body {
margin: 0px;
}
.colors {
margin: 5px 10px 5px 10px;
padding: 10px;
color: white;
}
a:hover.colors {
color: black;
text-decoration: none;
}
.picturefont {
font-size: 25;
font-style: italic;
}
.whitespace {
padding: 10px;
margin: 50px;
}
#margin {
margin: 0px;
}
.frontpageimage {
width: 90%;
display: inline;
border: 1px solid black;
}
<h1 class="fontsize"> Brand name </h1>
<nav>
<a class="colors" href="home.html"> Home </a>
<a class="colors" href="contact.html"> Contact </a>
<a class="colors" href="recipe.html"> Recipes </a>
<a class="colors" href="order.html"> Order </a>
<ul>
<li class="icon">
<img src="icon-insta.png">
</li>
<li class="icon">
<img src="fb-icon.png">
</li>
<li class="icon">
<img src="phone-icon.png">
</li>
</ul>
</nav>
<form id="margin" class="navbar-form navbar-right">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
<ul class="nav navbar-nav navbar-right">
<!-- <li>Link</li> -->
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span
class="caret"></span></a>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li role="separator" class="divider"></li>
<li>Separated link</li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
</header>
<body>
<div class="row">
<div class="col-sm-2 whitespace picturefont">
<a href="recipe.html">
<img class="frontpageimage" src="oreo-cake.jpg"></a> Chocolate Cake</div>
<div class="col-sm-2 whitespace picturefont">
<a href="recipe.html">
<img class="frontpageimage" src="kitkat-cake.jpg"></a> Rasberry Sponge Cake
</div>
<div class="col-sm-2 whitespace picturefont">
<a href="recipe.html">
<img class="frontpageimage" src="green-cake.jpg"></a> Red Velvet Cake</div>
<div class="col-sm-2 whitespace picturefont">
<a href="recipe.html">
<img class="frontpageimage" src="KitKatCake3.jpg"></a> Mango Rose Tart
</div>
</div>
<div id="slider">
<div id="slider2">
<img id="choclatecake" src="oreo-cake.jpg" alt="Moist Chocolate Cake" />
<img id="choclatecake" src="kitkat-cake.jpg" alt="Moist Chocolate
Cake" />
<img id="choclatecake" src="green-cake.jpg" alt="Moist Chocolate Cake" />
<img id="choclatecake" src="KitKatCake3.jpg" alt="Moist Chocolate
Cake" />
</div>
</div>`
Forgive me for the improper format but I'm new here. Hoping to find some answers. Thanks
From my experience, the best way to organize the layout of a web page is to use tables (rows and columns). Start by sketching the layout and imagining boundaries around the items of your website.
I suggest that you use Bootstrap stylesheet by including the CSS file at your page header
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
Then using the CSS classes row and .col-md-* for div containter element classes.
Refer to the page (https://getbootstrap.com/docs/3.3/css/#grid-example-basic) for code examples.
Your structure might be something like the following:
<div class="row">
<div class="col-md-8">Brand name</div>
<div class="col-md-4">social media tags</div>
</div>
<div class="row">
<div class="col-md-6">navigation</div>
<div class="col-md-6">search</div>
</div>
<div class="row">
<div class="col-md-12">Body</div>
</div>
You need to put h1 tag inside nav tag.
You have closed the nav tag before starting form and you have another closing nav tag later.
Same reason as above.
Try it like this:
<nav>
<h1 class="fontsize"> Brand name </h1>
<a class="colors" href="home.html"> Home </a>
<a class="colors" href="contact.html"> Contact </a>
<a class="colors" href="recipe.html"> Recipes </a>
<a class="colors" href="order.html"> Order </a>
<ul>
<li class="icon">
<img src="icon-insta.png">
</li>
<li class="icon">
<img src="fb-icon.png">
</li>
<li class="icon">
<img src="phone-icon.png">
</li>
</ul>
<form id="margin" class="navbar-form navbar-right">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span
class="caret"></span></a>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li role="separator" class="divider"></li>
<li>Separated link</li>
</ul>
</li>
</ul>
</nav>
#Student, you have a lot going on here, but most of your issues revolve around malformed HTML. So let's go through your issues one-by-one.
1) The brand name is not in line with the a tags. i tried
display:inline; in every class but its not working.
I'm only seeing your use of display:inline in a couple of your classes, but not on the brand name. Regardless, Bootstrap already has a brand with links built in for you. As you can see in the code below.
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button class="navbar-toggle collapsed" aria-expanded="false" type="button" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<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="#">Brand Name</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li>Home</li>
<li>Contact</li>
<li>Recipes</li>
<li>Orders</li>
</ul>
...
2) The social media tags are hanging in mid air, I want them to be in
line with the a tags. Again, i tried reducing the margin, padding and
using the inline command but nothing seems to be working.
To get these to go on the same line, you can nest the form and the social media icons in a div tag that pulls both of them to the right of the navigation bar using the navbar-right class. To make sure they're on the same line, use Bootstrap's float class: pull-left and pull-right. You'll need to add padding to the top of the a tags using padding-top CSS property. I've done it to one, so you can get an idea of how.
<div class="navbar-right">
<form class="navbar-form pull-left">
<div class="form-group">
<input class="form-control" type="text" placeholder="Search">
</div>
<button class="btn btn-default" type="submit">Submit</button>
</form>
<ul class="nav navbar-nav pull-right">
<li>
<img src="fb-icon.png">
</li>
<li>
<img src="phone-icon.png">
</li>
<li>
<img src="icon-insta.png">
</li>
</ul>
</div>
You'll just need to reapply some of your classes.
I want to make my bootstrap navbar bigger (bigger buttons, bigger input, height, etc) but after I make the 1st element large (input -> input-lg) in the navbar it ruins my 2 columns that are full height. It creates an outer scroll on the page that I don't want.
I have this bootply here that has a navbar and 2 columns that are 100% height and you can see the outer scroll bar created because of the large input in the navbar. If I remove the large input from the navbar the navbar shrinks and the columns resize back to full height and the outer scroll goes away.
Question - is there a good plugin or library for bootstrap navbars that will let me make them bigger then the standard size and customize them?
Here is my code
html,
body {
height: 100%;
/*border: 1px solid red;*/
}
.table-container {
height: calc(100% - 53px);
/*border: 1px solid green;*/
}
nav.navbar {
margin: 0;
}
.table-container {
display: block;
width: 100%;
padding-left: 0px;
padding-right: 0px;
}
.table-container .table-row {
height: 100%;
display: block;
}
.table-container .table-row .table-col {
display: block;
float: left;
vertical-align: top;
height: 100%;
/*overflow-y: scroll;*/
}
#eventsContainer,
#hostsContainer,
#teachersContainer {
height: 100%;
overflow-y: scroll;
position: relative;
}
.table-row {
margin: 0;
}
.resultBtn:focus {
outline: none;
}
<nav class="navbar navbar-default">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<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="#">Brand</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active">Link <span class="sr-only">(current)</span>
</li>
<li>Link
</li>
<li class="dropdown">
Dropdown <span class="caret"></span>
<ul class="dropdown-menu">
<li>Action
</li>
<li>Another action
</li>
<li>Something else here
</li>
<li role="separator" class="divider"></li>
<li>Separated link
</li>
<li role="separator" class="divider"></li>
<li>One more separated link
</li>
</ul>
</li>
</ul>
<form class="navbar-form navbar-left">
<div class="form-group">
<input class="form-control input-lg" placeholder="Search" type="text">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
<ul class="nav navbar-nav navbar-right">
<li>Link
</li>
<li class="dropdown">
Dropdown <span class="caret"></span>
<ul class="dropdown-menu">
<li>Action
</li>
<li>Another action
</li>
<li>Something else here
</li>
<li role="separator" class="divider"></li>
<li>Separated link
</li>
</ul>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
<div class="container table-container">
<div class="row table-row">
<div class="col-sm-6 table-col">nav</div>
<div class="col-sm-6 table-col" style="border: 1px solid red;">
<div id="eventsContainer">
<div class="panel panel-default">
<div class="panel-body">
Basic panel example
</div>
</div>
<div class="panel panel-default">
<div class="panel-body">
Basic panel example
</div>
</div>
<div class="panel panel-default">
<div class="panel-body">
Basic panel example
</div>
</div>
<div class="panel panel-default">
<div class="panel-body">
Basic panel example
</div>
</div>
<div class="panel panel-default">
<div class="panel-body">
Basic panel example
</div>
</div>
<div class="panel panel-default">
<div class="panel-body">
Basic panel example
</div>
</div>
<div class="panel panel-default">
<div class="panel-body">
Basic panel example
</div>
</div>
<div class="panel panel-default">
<div class="panel-body">
Basic panel example
</div>
</div>
<div class="panel panel-default">
<div class="panel-body">
Basic panel example
</div>
</div>
<div class="panel panel-default">
<div class="panel-body">
Basic panel example
</div>
</div>
<div class="panel panel-default">
<div class="panel-body">
Basic panel example
</div>
</div>
<div class="panel panel-default">
<div class="panel-body">
Basic panel example
</div>
</div>
<div class="panel panel-default">
<div class="panel-body">
Basic panel example
</div>
</div>
<div class="panel panel-default">
<div class="panel-body">
Basic panel example
</div>
</div>
<div class="panel panel-default">
<div class="panel-body">
Basic panel example
</div>
</div>
<div class="panel panel-default">
<div class="panel-body">
Basic panel example
</div>
</div>
</div>
</div>
</div>
</div>
Before the change of your input, your .navbar has a min-height of 50px, and the .table-container's height was calc(100% - 53px); (which was good, and caused your <body> element to have no scroll.
Now that your input is larger (in the .navbar) - the height of the navbar is actually 64px, and if you use calc(100% - 53px) it's not enough, and you will have a scrollbar on your <body> element.
If you have that height to be calc(100% - 64px); it will remove your scrollbar:
http://www.bootply.com/iX3kL0vmNW
I have this bootply here and in the right side column I've created some panels in a div. I'm trying to get it so that the panels scroll inside the column, but not the whole page (I don't want the header or footer to scroll above and below the panels), but for some reason the 'overflow-y: scroll' is disable or not working!
Here is my code
html,body,.container {
height:calc(100% - 17px);
}
.container {
display:table;
width: 100%;
margin-top: -50px;
padding: 0px 0 0 0; /*set left/right padding according to needs*/
box-sizing: border-box;
}
.row {
height: 100%;
display: table-row;
}
.col-md-3 {
background: pink;
}
.col-md-9 {
background: yellow;
}
.row .no-float {
display: table-cell;
float: none;
}
header, footer {
text-align: center;
padding-top: 10px;
padding-bottom: 10px;
border-bottom: 1px solid lightgrey;
background: white;
}
footer {
border-top: 1px solid lightgrey;
position: absolute;
bottom: 0;
width: 100%;
}
<nav class="navbar navbar-default">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<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="#">Brand</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active">Link <span class="sr-only">(current)</span></li>
<li>Link</li>
<li class="dropdown">
Dropdown <span class="caret"></span>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li role="separator" class="divider"></li>
<li>Separated link</li>
<li role="separator" class="divider"></li>
<li>One more separated link</li>
</ul>
</li>
</ul>
<form class="navbar-form navbar-left">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
<ul class="nav navbar-nav navbar-right">
<li>Link</li>
<li class="dropdown">
Dropdown <span class="caret"></span>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li role="separator" class="divider"></li>
<li>Separated link</li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
<div class="container">
<div class="row">
<div class="col-md-6 no-float">Navigation</div>
<div class="col-sm-6 no-float" style="padding-left: 0px; padding-right: 0px;">
<header>
<div class="btn-group btn-group-lg" role="group" aria-label="...">
<button type="button" class="btn btn-default">Events</button>
<button type="button" class="btn btn-default">Hosts</button>
<button type="button" class="btn btn-default">Teachers</button>
</div>
</header>
<div id="eventsContainer" style="overflow-y: scroll;">
<div class="panel panel-default">
<div class="panel-body">
Basic panel example
</div>
</div>
<div class="panel panel-default">
<div class="panel-body">
Basic panel example
</div>
</div>
<div class="panel panel-default">
<div class="panel-body">
Basic panel example
</div>
</div>
<div class="panel panel-default">
<div class="panel-body">
Basic panel example
</div>
</div>
<div class="panel panel-default">
<div class="panel-body">
Basic panel example
</div>
</div>
<div class="panel panel-default">
<div class="panel-body">
Basic panel example
</div>
</div>
<div class="panel panel-default">
<div class="panel-body">
Basic panel example
</div>
</div>
<div class="panel panel-default">
<div class="panel-body">
Basic panel example
</div>
</div>
<div class="panel panel-default">
<div class="panel-body">
Basic panel example
</div>
</div>
<div class="panel panel-default">
<div class="panel-body">
Basic panel example
</div>
</div>
<div class="panel panel-default">
<div class="panel-body">
Basic panel example
</div>
</div>
</div>
<footer>
<div class="btn-group" role="group" aria-label="...">
<button type="button" class="btn btn-default">Events</button>
<button type="button" class="btn btn-default">Hosts</button>
<button type="button" class="btn btn-default">Teachers</button>
</div>
</footer>
</div>
</div>
</div>
You need to assign the height to #eventsContainer to make it scroll. So use the CSS's calc() function. Like:
#eventsContainer {
height: calc(100% - 122px); /* Total Height - Height of (header + footer) */
}
Have a look at the working snippet below:
#eventsContainer {
height: calc(100% - 122px);
}
html,body,.container {
height:calc(100% - 17px);
}
.container {
display:table;
width: 100%;
margin-top: -50px;
padding: 0px 0 0 0; /*set left/right padding according to needs*/
box-sizing: border-box;
}
.row {
height: 100%;
display: table-row;
}
.col-md-3 {
background: pink;
}
.col-md-9 {
background: yellow;
}
.row .no-float {
display: table-cell;
float: none;
}
header, footer {
text-align: center;
padding-top: 10px;
padding-bottom: 10px;
border-bottom: 1px solid lightgrey;
background: white;
}
footer {
border-top: 1px solid lightgrey;
position: absolute;
bottom: 0;
width: 100%;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="navbar navbar-default">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<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="#">Brand</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active">Link <span class="sr-only">(current)</span></li>
<li>Link</li>
<li class="dropdown">
Dropdown <span class="caret"></span>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li role="separator" class="divider"></li>
<li>Separated link</li>
<li role="separator" class="divider"></li>
<li>One more separated link</li>
</ul>
</li>
</ul>
<form class="navbar-form navbar-left">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
<ul class="nav navbar-nav navbar-right">
<li>Link</li>
<li class="dropdown">
Dropdown <span class="caret"></span>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li role="separator" class="divider"></li>
<li>Separated link</li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
<div class="container">
<div class="row">
<div class="col-md-6 no-float">Navigation</div>
<div class="col-sm-6 no-float" style="padding-left: 0px; padding-right: 0px;">
<header>
<div class="btn-group btn-group-lg" role="group" aria-label="...">
<button type="button" class="btn btn-default">Events</button>
<button type="button" class="btn btn-default">Hosts</button>
<button type="button" class="btn btn-default">Teachers</button>
</div>
</header>
<div id="eventsContainer" style="overflow-y: scroll;">
<div class="panel panel-default">
<div class="panel-body">
Basic panel example
</div>
</div>
<div class="panel panel-default">
<div class="panel-body">
Basic panel example
</div>
</div>
<div class="panel panel-default">
<div class="panel-body">
Basic panel example
</div>
</div>
<div class="panel panel-default">
<div class="panel-body">
Basic panel example
</div>
</div>
<div class="panel panel-default">
<div class="panel-body">
Basic panel example
</div>
</div>
<div class="panel panel-default">
<div class="panel-body">
Basic panel example
</div>
</div>
<div class="panel panel-default">
<div class="panel-body">
Basic panel example
</div>
</div>
<div class="panel panel-default">
<div class="panel-body">
Basic panel example
</div>
</div>
<div class="panel panel-default">
<div class="panel-body">
Basic panel example
</div>
</div>
<div class="panel panel-default">
<div class="panel-body">
Basic panel example
</div>
</div>
<div class="panel panel-default">
<div class="panel-body">
Basic panel example
</div>
</div>
</div>
<footer>
<div class="btn-group" role="group" aria-label="...">
<button type="button" class="btn btn-default">Events</button>
<button type="button" class="btn btn-default">Hosts</button>
<button type="button" class="btn btn-default">Teachers</button>
</div>
</footer>
</div>
</div>
</div>
Hope this helps!
The problem is that overflow will only work when the content tries to exceed the container. In your example, the #eventsContainer has no set height, and due to the nature of HTML (which is to expand vertically to fit the content), the content was pushing out.
In order to achieve the scroll, your #eventsContainer has to have a set height.
However, since I assume you want this height to be dynamic, and not be something static like '300px', I whipped up a jsfiddle to demonstrate absolute positioning to create a full-screen version without pushing outside.
I'm trying to add drop down to panel header (bootstrap). I've aligned drop down to right but it's not positioning properly.
Code
<div class="row">
<div class="col-lg-12">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">
<i class="fa fa-bar-chart-o fa-fw"></i>
Analytics
</h3>
<div class="btn-group" style="float: right;">
<button class="btn">Action</button>
<button class="btn dropdown-toggle" data-toggle="dropdown">
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li>Item I</li>
<li>Item II</li>
<li>Item III</li>
<li class="divider"></li>
<li>Other</li>
</ul>
</div>
</div>
<div class="panel-body">
<div id="analytics-chart"></div>
</div>
</div>
</div>
</div>
What I would do in this situation is move the btn-group inside of the <h3> tag before applying the float:right; style (either using style="float:right;" or class="pull-right"). Then, simply adjust the top margin to something that makes it fit a little better into the panel-title, such as -8px:
<div class="row">
<div class="col-lg-12">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title"><i class="fa fa-bar-chart-o fa-fw"></i>
<div class="btn-group pull-right" style="margin-top:-8px;">
<button class="btn">Action</button>
<button class="btn dropdown-toggle" data-toggle="dropdown">
<span class="caret"></span>
</button>
<ul class="dropdown-menu dropdown-menu-right">
<li>Item I</li>
<li>Item II</li>
<li>Item III</li>
<li class="divider"></li>
<li>Other</li>
</ul>
</div>
Analytics
</h3>
</div>
<div class="panel-body">
<div id="analytics-chart"></div>
</div>
</div>
</div>
</div>
Also, remember to add dropdown-menu-right to your dropdown when using pull-right, otherwise it will extend beyond the edge of the screen.
Buttons never behave well when added to a panel-heading class, but you're free to tweak the classes to fit your needs.
Hope this helps!
Bootply Example
I am trying to use the bootstrap navbar-fixed-top I have a bootstrap navbar in side my id="content" div, but when I add navbar-fixed-top to here
<nav class="navbar navbar-default navbar-fixed-top navbar-shadow">
The navbar goes on top of every thing else.
Question: How am I able to get it so only the content that is in side my id="content" is able to scroll under the navbar?
Note: Links have been updated now with working code, Special Thanks to
#Av Avt, and thank you for every one else who had ago.
Code Example Previews
CodePen Code Preview Click Here
CodePen Full View Click Here
HTML
<header id="header">
<div class="container-fluid">
<div class="row">
<div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
<div class="img-thumbnail">
<img src="holder.js/48x48" />
</div>
Administration
</div>
</div>
</div>
</header>
<nav id="column-left">
<div id="profile">
<ul class="media-list">
<li class="media">
<div class="media-left">
<a href="#">
<img class="media-object img-circle" src="holder.js/64x64" alt="...">
</a>
</div>
<div class="media-body">
<h4 class="media-heading">John Doe</h4>
<p>Administrator</p>
</li>
</ul>
</div>
<ul id="menu">
<li><i class="fa fa-dashboard fa-fw"></i> <span>Dashboard</span></li>
<li>
<a class="parent"><i class="fa fa-cog fa-fw"></i> <span>Drop Down Menu</span></a>
<ul>
<li>Link 1</li>
<li><a class="parent">Sub Drop Down Menu</a>
<ul>
<li>Link 2</li>
<li>Link 3</li>
</ul>
</li>
</ul>
</li>
</ul>
</nav>
<!-- navbar-fixed-top not work correct when have it in my content id -->
<div id="content">
<nav class="navbar navbar-default navbar-fixed-top navbar-shadow">
<div class="container-fluid">
<div class="navbar-header">
<button aria-controls="navbar" aria-expanded="false" data-target="#navbar" data-toggle="collapse" class="navbar-toggle collapsed" type="button">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a type="button" id="button-menu" class="navbar-brand"><i class="fa fa-indent fa-lg"></i></a>
</div>
<div class="navbar-collapse collapse" id="navbar">
<ul class="nav navbar-nav">
</ul>
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
<a aria-expanded="false" aria-haspopup="true" role="button" data-toggle="dropdown" class="dropdown-toggle" href="#"><i class="fa fa-bell fa-lg"></i> <span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li class="divider" role="separator"></li>
<li class="dropdown-header">Nav header</li>
<li>Separated link</li>
<li>One more separated link</li>
</ul>
</li>
<li class="dropdown">
<a aria-expanded="false" aria-haspopup="true" role="button" data-toggle="dropdown" class="dropdown-toggle" href="#"><i class="fa fa-info-circle"></i> <span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li class="divider" role="separator"></li>
<li class="dropdown-header">Nav header</li>
<li>Separated link</li>
<li>One more separated link</li>
</ul>
</li>
<li class="active"><a href="./">Logout <i class="fa fa-sign-out fa-lg"></i></li>
</ul>
</div>
</div>
</nav>
<div class="container-fluid">
<div class="row">
<div class="col-lg-6 col-md-6">
<div class="panel panel-default">
<div class="panel-heading">
<h1 class="panel-title">Calender</h1>
</div>
<div class="panel-body">
</div>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/holder/2.9.0/holder.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
From comment:
I just would like to be able to use the navbar-fixed-top feature bootstrap has but instead of it being at top of page like in there examples would like it to be inside my content id. And the header div all ways at top.
Add the following css rules in your css:
#content{
position: relative;
}
#content .navbar-fixed-top{
position: absolute;
}
After you had the navbar at the top of #content, give #content .main-content a max-height as the view port height subtract <header>'s height, and give it overflow: auto;:
#content .main-content{
padding-top: 70px;
max-height: calc(100vh - 70px);
overflow: auto;
/*move the 40px padding (and all bottom/top padding) of #content to .main_content instead */
padding-bottom: 40px;
}
The <nav class="navbar navbar-default navbar-fixed-top navbar-shadow"> will continue to behave as a normal .navbar-fixed-top, except it now only stick at the top of #content.
Demo: http://codepen.io/anon/pen/gPpOpX
Here is the solution :
#content .navbar-fixed-top{
width: calc(100% - 245px);
top: inherit;
right: inherit;
left: inherit;
bottom:inherit;
}
you also need to give your #column-left position fixed if you want your sidebar to be fixed also
Basically you want #content should be scrollable and the rest everything should be fixed. For this I have done some changes in html and css
I moved navigation <nav class="navbar navbar-default navbar-shadow"> to #header.
Added navbar-fixed-top class to the header #header. This will fix the header to the window, only if you follow the step #3.
Removed position: relative CSS for #header.
Using CSS, added the top padding to the body which is equal to the height of #header. If you want you can do this using JS also.
Here is the working example
Don't use navbar-fixed-top and calculate the scrollable height using jQuery:
var h = $(document).height();
$('#content').css({ 'height': h - 120, 'scroll-x': 'auto' });
NOTE: You might need to recalculate the height also on $(window).resize().