Bootstrap, div span4 doesn't remain inside row-fluid - css

I have a problem where I have these div boxes (.span4), they all remain inside a .row-fluid (which is the container with white background). The problem is that the boxes exceed their width and "stick out".
Is there some way to make the spacing between the .span4's to auto adjust to the container width?
See jsfiddle here:
http://jsfiddle.net/QcSqx/1/
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="main-container">
<div class="row-fluid">
<div class="span12">
<h3 class="mycharacters">My characters</h3>
<div class="btn-group pull-right" data-toggle="buttons-radio">
<i class="icon-th-large"></i>
<i class="icon-list"></i>
</div>
<div class="btn-group pull-right">
<a class="add-character-button btn btn-success btn-small dropdown-toggle" data-toggle="dropdown" href="#">
<i class="icon-plus icon-white"></i> Add character
</a>
<ul class="dropdown-menu">
<li>Add manually</li>
<li class="nav-header">Import</li>
<li>.dnd4e-file</li>
</ul>
</div>
<i class="icon-cog icon-white"></i> Back to Uberview
</div>
</div>
<div class="row">
<div class="span12" id="actor_result"><div class="row-fluid">
<div class="span4 well well-small"><div class="media">
<a class="pull-left" href="#"><img class="media-object img-circle actor" src="http://qnap.mcederman.com/images/avatar/actor/Davius.png"></a><div class="overflow-media-body media-body">
<div class="btn-group pull-right">
<button class="btn btn-mini dropdown-toggle" data-toggle="dropdown"><span class="icon-cog"></span></button><ul class="dropdown-menu">
<li><a href="actor_profile?id=1"><i class="icon-pencil"></i> Edit
</a></li>
<li><a href="set_avatar_actor?id=1"><i class="icon-picture"></i> Change avatar
</a></li>
<li><a href="actorview?delete&id=1"><i class="icon-trash"></i> Delete
</a></li>
</ul>
</div>
<h4 class="media-heading">Davius</h4>
<div>
<i class="icon-heart"></i><strong> Health: </strong>17/20hp</div>
<br><br>
</div>
<div>
<i class="icon-fire"></i><strong> Effects: </strong>
</div>
<div id="actoreffects" class="actor-text">aaaaaaa
a
a
a</div>
<div>
<i class="icon-edit"></i><strong> Notes: </strong>
</div>
<div id="actornotes" class="actor-text">hehe
asa
sd
asd</div>
</div></div>
<div class="span4 well well-small"><div class="media">
<a class="pull-left" href="#"><img class="media-object img-circle actor" src="http://qnap.mcederman.com/images/avatar/actor/Awesome%20Maximus.png"></a><div class="overflow-media-body media-body">
<div class="btn-group pull-right">
<button class="btn btn-mini dropdown-toggle" data-toggle="dropdown"><span class="icon-cog"></span></button><ul class="dropdown-menu">
<li><a href="actor_profile?id=3"><i class="icon-pencil"></i> Edit
</a></li>
<li><a href="set_avatar_actor?id=3"><i class="icon-picture"></i> Change avatar
</a></li>
<li><a href="actorview?delete&id=3"><i class="icon-trash"></i> Delete
</a></li>
</ul>
</div>
<h4 class="media-heading">Awesomeson Maaaximilian</h4>
<div>
<i class="icon-heart"></i><strong> Health: </strong>10/30hp</div>
<br><br>
</div>
<div>
<i class="icon-fire"></i><strong> Effects: </strong>
</div>
<div id="actoreffects" class="actor-text">herro</div>
<div>
<i class="icon-edit"></i><strong> Notes: </strong>
</div>
<div id="actornotes" class="actor-text">lol</div>
</div></div>
<div class="span4 well well-small"><div class="media">
<a class="pull-left" href="#"><img class="media-object img-circle actor" src="http://qnap.mcederman.com/images/avatar/actor/Master%20Thief%20Sven.png"></a><div class="overflow-media-body media-body">
<div class="btn-group pull-right">
<button class="btn btn-mini dropdown-toggle" data-toggle="dropdown"><span class="icon-cog"></span></button><ul class="dropdown-menu">
<li><a href="actor_profile?id=4"><i class="icon-pencil"></i> Edit
</a></li>
<li><a href="set_avatar_actor?id=4"><i class="icon-picture"></i> Change avatar
</a></li>
<li><a href="actorview?delete&id=4"><i class="icon-trash"></i> Delete
</a></li>
</ul>
</div>
<h4 class="media-heading">Master Thief Sven</h4>
<div>
<i class="icon-heart"></i><strong> Health: </strong>20/13hp</div>
<br><br>
</div>
<div>
<i class="icon-fire"></i><strong> Effects: </strong>
</div>
<div id="actoreffects" class="actor-text">Yeeeeeesss.....huh? ah! ...yeeees</div>
<div>
<i class="icon-edit"></i><strong> Notes: </strong>
</div>
<div id="actornotes" class="actor-text">wes</div>
</div></div>
<div class="span4 well well-small"><div class="media">
<a class="pull-left" href="#"><img class="media-object img-circle actor" src="http://qnap.mcederman.com/images/avatar/actor/Giant%20Frederic.png"></a><div class="overflow-media-body media-body">
<div class="btn-group pull-right">
<button class="btn btn-mini dropdown-toggle" data-toggle="dropdown"><span class="icon-cog"></span></button><ul class="dropdown-menu">
<li><a href="actor_profile?id=5"><i class="icon-pencil"></i> Edit
</a></li>
<li><a href="set_avatar_actor?id=5"><i class="icon-picture"></i> Change avatar
</a></li>
<li><a href="actorview?delete&id=5"><i class="icon-trash"></i> Delete
</a></li>
</ul>
</div>
<h4 class="media-heading">Giant Frederic</h4>
<div>
<i class="icon-heart"></i><strong> Health: </strong>25/27hp</div>
<br><br>
</div>
<div>
<i class="icon-fire"></i><strong> Effects: </strong>
</div>
<div id="actoreffects" class="actor-text">Farting</div>
<div>
<i class="icon-edit"></i><strong> Notes: </strong>
</div>
<div id="actornotes" class="actor-text">I will cruuuush you!</div>
</div></div>
<div class="span4 well well-small"><div class="media">
<a class="pull-left" href="#"><img class="media-object img-circle actor" src="http://qnap.mcederman.com/images/avatar/actor/One%20eyed%20idiot.jpeg"></a><div class="overflow-media-body media-body">
<div class="btn-group pull-right">
<button class="btn btn-mini dropdown-toggle" data-toggle="dropdown"><span class="icon-cog"></span></button><ul class="dropdown-menu">
<li><a href="actor_profile?id=6"><i class="icon-pencil"></i> Edit
</a></li>
<li><a href="set_avatar_actor?id=6"><i class="icon-picture"></i> Change avatar
</a></li>
<li><a href="actorview?delete&id=6"><i class="icon-trash"></i> Delete
</a></li>
</ul>
</div>
<h4 class="media-heading">One eyed idiot</h4>
<div>
<i class="icon-heart"></i><strong> Health: </strong>25/35hp</div>
<br><br>
</div>
<div>
<i class="icon-fire"></i><strong> Effects: </strong>
</div>
<div id="actoreffects" class="actor-text">Rested</div>
<div>
<i class="icon-edit"></i><strong> Notes: </strong>
</div>
<div id="actornotes" class="actor-text">Can't see straight</div>
</div></div>
</div>
</div>
</div>
</div>
</div>


bootstrap puts padding and borders on the well class, which will make the span4s overflow when you add the well class to that div. my suggestion would be to nest the well classes within the span4 divs..
<div class="span4">
<div class="well well-small">
Contents of the div within the well
</div>
</div>
also, it looks like you tried putting 4 boxes on a line.. when you have 12 columns to work with, and you want to put 4 columns in a row-fluid row, you should use span3 (span3 * 4columns = 12 - full width)

Related

Dropdown Menu getting cut off Bootstrap 5

I have card with dropdown menu like below
<div class="content d-flex">
<div class="ps-1 align-self-center">
<img src="#" class="rounded-circle shadow-l preload-img entered loading" data-ll-status="loading" width="45">
</div>
<div class="ps-2 align-self-center">
<h5 class="font-15 color-dark-dark">Jasdeep Singh <i class="fa fa-circle font-12 color-green-dark ms-1"></i></h5>
<p class="opacity-50 mt-n2 me-n1 font-13 mb-0">
Seen on 2022-05-09 10:52:36 </p>
</div>
<div class="ms-auto align-self-center">
<div class="dropdown">
<i class="fa fa-align-justify dropdown-toggle color-black me-2" data-toggle="dropdownMenu2" data-bs-toggle="dropdown"></i>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu2">
<li><button type="button" data-id="28" class="dropdown-item block_user" style="display:block">Block User</button></li>
<li><button type="button" data-id="28" class="dropdown-item unblock_user" style="display:none">Unblock User</button></li>
<li><button type="button" data-id="28" class="btn-link dropdown-item report_spam">Report Spam</button></li>
</ul>
</div>
</div>
</div>
Its all fine but dropdown menu getting cut like below image. I have tried many solution but not working. Let me know if any one here can help me for solve the puzzle.
Thanks!

problem with bootstrap dropdown menu classes

im trying to make bootstrap drop down menu but in it doesn't render as expected (the button to expand the menu is unclickable )
<div class="news-blocks mb-5">
<div class="container-fluid">
<div class="row">
<div class="col-lg-12 col-md-12 services-section">
<div class="inner">
<div class="inner-align">
<div class="row">
<div class="col-lg-4">
<h2 class="heading">
<i class="la la-gears"></i> الخدمات الإلكترونية </h2>
<div class="dropdown open">
<button class="btn btn-secondary dropdown-toggle" type="button" id="triggerId" data-toggle="dropdown" aria-haspopup="true"
aria-expanded="false">
تسجيل الشركة
</button>
<div class="dropdown-menu" aria-labelledby="triggerId">
<a class="dropdown-item" href="#">Link 1</a>
<a class="dropdown-item" href="#">Link 1</a>
</div>
</div>
</div>
<div class="col-lg-8">
<p class="text">
text
</p>
<button type="button" class="arrow-btn btn btn-primary btn-lg">
<i class="fa fa-arrow-left" aria-hidden="true"></i>
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
the area highlited in red should be the dropdown menu but it is not

Bootstrap 4 - Justify content inside ul element

hi i m using bootstrap 4 and wanted to know how to fix "justify-content-around" property if there is more then 3 li elements it workg great but if there is =<3 it doesnt works any tips ?
content is inside this
<ul class="row center justify-content-around">
</ul>
Live example : http://snowfox.sk/nnm/public/

Below using d-flex and justify-content-around.
ul {
width: 100%;
margin: 0;
padding: 0;
list-style: none;
}
li {
width: 100px;
background: blue;
color: white;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css">
<ul class="d-flex justify-content-around">
<li>Flex</li>
<li>Flex</li>
</ul>

simply add style="flex-grow: 1;" to ul
or
Change your code like this(check in full page)
remove the width width: 20rem; and add col-4 to li
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row text-center">
<ul class="row center justify-content-around">
<li class="col-lg-4">
<div class="card card-edited" style="">
<span class="badge badge-dark card-lang">SK</span>
<img class="card-img-top img-responsive" src="http://snowfox.sk/nnm/public/img/anime/12675B.jpg" alt="Obŕazok neexistuje" height="350">
<div class="card-body">
<h4 class="card-title" style="overflow-y: hidden;">Natsume Yuujinchou</h4>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<span class="fa fa-play"> Pozrieť preklad</span>
</div>
<ul class="list-group list-group-flush">
<li class="list-group-item">
<span class="fa fa-download"></span> Google |
<span class="fa fa-download"></span> Mega.co.nz |
<span class="fa fa-download"></span> Ulož.to
</li>
<li class="list-group-item">
<span class="fa fa-download"></span> Google |
<span class="fa fa-download"></span> Mega.co.nz |
<span class="fa fa-download"></span> Ulož.to
</li>
</ul>
<div class="card-footer text-muted">
2 days ago
</div>
</div>
</li>
<li class="col-lg-4">
<div class="card card-edited" style="">
<span class="badge badge-dark card-lang">SK</span>
<img class="card-img-top img-responsive" src="http://snowfox.sk/nnm/public/img/anime/12675B.jpg" alt="Obŕazok neexistuje" height="350">
<div class="card-body">
<h4 class="card-title" style="overflow-y: hidden;">Natsume Yuujinchou</h4>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<span class="fa fa-play"> Pozrieť preklad</span>
</div>
<ul class="list-group list-group-flush">
<li class="list-group-item">
<span class="fa fa-download"></span> Google |
<span class="fa fa-download"></span> Mega.co.nz |
<span class="fa fa-download"></span> Ulož.to
</li>
<li class="list-group-item">
<span class="fa fa-download"></span> Google |
<span class="fa fa-download"></span> Mega.co.nz |
<span class="fa fa-download"></span> Ulož.to
</li>
</ul>
<div class="card-footer text-muted">
2 days ago
</div>
</div>
</li>
<li class="col-lg-4">
<div class="card card-edited" style="">
<span class="badge badge-dark card-lang">SK</span>
<img class="card-img-top img-responsive" src="http://snowfox.sk/nnm/public/img/anime/12675B.jpg" alt="Obŕazok neexistuje" height="350">
<div class="card-body">
<h4 class="card-title" style="overflow-y: hidden;">Natsume Yuujinchou</h4>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<span class="fa fa-play"> Pozrieť preklad</span>
</div>
<ul class="list-group list-group-flush">
<li class="list-group-item">
<span class="fa fa-download"></span> Google |
<span class="fa fa-download"></span> Mega.co.nz |
<span class="fa fa-download"></span> Ulož.to
</li>
<li class="list-group-item">
<span class="fa fa-download"></span> Google |
<span class="fa fa-download"></span> Mega.co.nz |
<span class="fa fa-download"></span> Ulož.to
</li>
</ul>
<div class="card-footer text-muted">
2 days ago
</div>
</div>
</li>
</ul>
</div>
</div>

You will the result you want if you wrap your list in a column:
<div class="col">
<ul class="row center justify-content-around">
<li>...</li>
<li>...</li>
<li>...</li>
</ul>
</div>

Navbar drop downs are not working in bootstrap

I created a drop down menu fro my navbar, but it is not working when I hover on it.
My Template,
<header id="header" class="sticky-header" data-sticky-class="not-dark" >
<div id="header-wrap">
<div class="container clearfix">
<div class="divcenter" style="max-width:990px;">
<div id="primary-menu-trigger"><i class="icon-reorder"></i></div>
<!-- Logo
============================================= -->
<div id="logo" style="margin-top: 5px;">
<img src="assets/images/SW-Logo-Final.png" alt="Canvas Logo">
</div>
<span class="inputgroupcss col-sm-5" style="padding-top:12px;">
<input type="email" (keyup)="submit(button1.value)" #button1 class="form-control required email" placeholder="Search by Name or Email"
style="height:38px;">
<div class="col-sm-12 nopadding ">
<ul class="searchlist">
<li *ngFor="let detail of details">
<img [src]='detail.image' alt="profile_image" style="width: 35px;
height: 35px;">
<a (click)="redirect()" [routerLink]="['/demo/user',detail.profilename]">{{detail.profilename}}</a>
</li>
</ul>
</div>
</span>
<!-- #logo end -->
<!-- Primary Navigation
============================================= -->
<!-- <nav id="primary-menu" class="pull-left" style="margin-top:11px">
<form style="width:300px" id="widget-subscribe-form2" action="include/subscribe.php" role="form" method="post" class="nobottommargin">
<div class="input-group input-group-lg divcenter" style="max-width:600px;">
<input type="email" name="widget-subscribe-form-email" class="form-control required email" placeholder="Search by Name or Email" style="height:38px;">
<span class="input-group-addon" style="height: 38px;padding: 6px 16px;"><i class="icon-line-search"></i></span>
</div>
</form> <div *ngFor="let id of ids" class = "nopadding col-sm-12">
<button class="badge notification" (click) = 'getRequests()'>
<span class="glyphicon glyphicon-bell"></span>
</button>
<span class="noti"> {{id.sent_id}}</span>
</div>
</nav> -->
<nav id="primary-menu" class="dark">
<ul>
<li class="onhovercolor">
<a href="#">
<div>srilatha mattepu</div>
</a>
</li>
<li id="top-cart" class="onhovercolor notopmargin noleftpadding" *ngFor="let id of ids"><i class="icon-email3" style="font-size:18px;color: #d35b29;"></i><span>{{id.sent_id}}</span>
<div class="top-cart-content">
<div class="top-cart-title">
<h6 class="nobottommargin text-center">You have {{id.sent_id}} Requests pending</h6>
</div>
<div class="col-xs-12 dropdownpanel">
<h6 class="nobottommargin">Friend Requests</h6>
</div>
<div class="col-xs-12 dropdownpanel">
<div class="col-xs-3 nopadding">
<img src="assets/images/gallery3.png" style="height:45px;width:50px">
</div>
<div class="col-xs-6 nopadding">
<h5 class="nobottommargin pendingnamescss">srilatha mattepu</h5>
</div>
<div class="col-xs-3 nopadding text-right">
pending
</div>
</div>
<div class="col-xs-12 dropdownpanel">
<div class="col-xs-3 nopadding">
<img src="assets/images/gallery3.png" style="height:45px;width:50px">
</div>
<div class="col-xs-6 nopadding">
<h5 class="nobottommargin requestsnamecss">srilatha mattepu</h5>
</div>
<div class="col-xs-3 nopadding text-right">
pending
</div>
</div>
</div>
</li>
<li class="onhovercolor norightpadding">
<div class="downarrowcss"><i class="icon-caret-down" style="font-size:25px !important"></i></div>
<ul class="menu-pos-invert">
<li>
<a href="/demo/profile">
<div><i class="icon-user"></i> My Profile</div>
</a>
</li>
<li>
<a href="/demo/settings">
<div><i class="icon-settings"></i> Settings</div>
</a>
</li>
<li>
<a href="/demo/password">
<div><i class="icon-settings"></i> Change Password</div>
</a>
</li>
<li>
<a href="#">
<div><i class="icon-off"></i> Logout</div>
</a>
</li>
</ul>
</li>
<li class="onhovercolor hidden-sm hidden-md visible-xs">
<a href="#">
<div>srilatha mattepu</div>
</a>
<ul>
<li>PROFILE</li>
<li>SOCIAL ADDRESSES</li>
<li class="list-borbtom">CUSTOM INFO</li>
<li>MY SOCIETY<span>(ALL)</span></li>
<ul class="left-sub-list">
<li>PERSONAL</li>
<li>PROFESSIONAL</li>
</ul>
<li>REQUESTS</li>
<li>MESSAGES</li>
<li class="list-borbtom">SOCIETY UPDATES</li>
<li class="list-borbtom">SEARCH</li>
<li class="list-borbtom">PASSWORD</li>
<li>SETTINGS</li>
<li>LOGOUT</li>
<li>Qr Code</li>
</ul>
</li>
</ul>
</nav>
<!-- #primary-menu end -->
</div>
</div>
</div>
</header>
I created a drop down menu fro my navbar, but it is not working when I hover on it.

First thing is that you have to use pure Bootstrap Navbar code.
and then simply add below Custom jQuery, and see magic your Drop-down will be open on hover of your parent menu link hover.
$('ul.nav li.dropdown').hover(function() {
$(this).find('.dropdown-menu').stop(true, true).delay(200).fadeIn(500);
}, function() {
$(this).find('.dropdown-menu').stop(true, true).delay(200).fadeOut(500);
});
Please check attached fiddle.

bootstrap amazon style search bar

Is there an easy way to do something similar to this in bootstrap? A search bar with a drop down selector for a different category? I've been looking through their documentation, something similar to this but with the dropdown being attached to the search bar is what I'm looking for. I want it to be part of my navbar. I recall seeing an example online but can't seem to find it now. Also wondering where it would go in relation to my header at the moment
<header class="navbar navbar-fixed-top navbar-inverse">
<div class="navbar-inner">
<div class="container">
<nav>
<ul class="nav pull-left">
<li><%= link_to 'New Review',
if (current_user)
new_review_path
else
log_in_path
end %></li>
</ul>
</nav>
<nav>
<ul class="nav pull-right">
<li><%= link_to "Home", '/' %></li>
<li><%= link_to "Help", '#' %></li>
<% if current_user %>
<li><%= link_to "Log out", log_out_path %>
<% else %>
<li><%= link_to "Sign up", sign_up_path %></li>
<li><%= link_to "Log in", log_in_path %></li>
<% end %>
</ul>
</nav>
</div>
</div>
</header>

Please, refer this it satisfied your requirement
HTML:
<div class="container">
<div class="row">
<div class="col-xs-8 col-xs-offset-2">
<div class="input-group">
<div class="input-group-btn search-panel">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
<span id="search_concept">Filter by</span> <span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li>Contains</li>
<li>It's equal</li>
<li>Greather than ></li>
<li>Less than < </li>
<li class="divider"></li>
<li>Anything</li>
</ul>
</div>
<input type="hidden" name="search_param" value="all" id="search_param">
<input type="text" class="form-control" name="x" placeholder="Search term...">
<span class="input-group-btn">
<button class="btn btn-default" type="button"><span class="glyphicon glyphicon-search"></span></button>
</span>
</div>
</div>
</div>
</div>
CSS:
body{
margin-top:20px;
}
JS:
$(document).ready(function(e){
$('.search-panel .dropdown-menu').find('a').click(function(e) {
e.preventDefault();
var param = $(this).attr("href").replace("#","");
var concept = $(this).text();
$('.search-panel span#search_concept').text(concept);
$('.input-group #search_param').val(param);
});
});
Refer this link
http://bootsnipp.com/snippets/featured/search-panel-with-filters

See if this example that helps you..
javascript:
/* activate scrollspy menu */
$('body').scrollspy({
target: '#navbar-collapsible',
offset: 50
});
/* smooth scrolling sections */
$('a[href*=#]:not([href=#])').click(function() {
if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
var target = $(this.hash);
target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
if (target.length) {
$('html,body').animate({
scrollTop: target.offset().top - 50
}, 1000);
return false;
}
}
});
CSS:
/*
A custom Bootstrap 3.1 template
from http://bootply.com
This CSS code should follow the 'bootstrap.css'
in your HTML file.
license: MIT
author: bootply.com
*/
html,body {
height:100%;
background:center no-repeat fixed url('/assets/example/bg_suburb.jpg');
background-size: cover;
}
.icon-bar {
background-color:#fff;
}
.navbar-trans {
background-color:#279ddd;
color:#fff;
}
.navbar-trans li>a:hover,.navbar-trans li>a:focus,.navbar-trans li.active {
background-color:#38afef;
}
.navbar-trans a{
color:#fefefe;
}
.navbar-trans .form-control:focus {
border-color: #eee;
outline: 0;
-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,0.075),0 0 8px rgba(100,100,100,0.6);
box-shadow: inset 0 1px 1px rgba(0,0,0,0.075),0 0 8px rgba(100,100,100,0.6);
}
section {
padding-top:70px;
padding-bottom:50px;
min-height:calc(100% - 1px);
}
.v-center {
padding-top:10%;
font-size:70px;
}
.well {
border-color:transparent;
}
a.list-group-item.active,[class*='-info'] {
background-color: #168ccc;
color:#fff;
}
#section1 {
background-color: #168ccc;
color:#dedeff;
}
#section2 {
background-color: #e5e5ef;
color:#686868;
}
#section3 {
background-color: #168ccc;
color:#ddd;
}
#section4 {
background-color: #fff;
color:#444;
}
#section5,#section7,#section7 a {
color:#f5f5f5;
}
#section6 {
background-color: #168ccc;
color:#ddd;
}
footer {
background-color:#494949;
color:#ddd;
min-height:100px;
padding-top:20px;
padding-bottom:40px;
}
footer .nav>li>a {
padding:3px;
color:#ccc;
}
footer .nav>li>a:hover {
background-color:transparent;
color:#fff;
}
HTML:
<nav class="navbar navbar-trans navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapsible">
<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>
<div class="navbar-collapse collapse" id="navbar-collapsible">
<ul class="nav navbar-nav navbar-left">
<li>What</li>
<li>When</li>
<li>How</li>
<li>Four</li>
<li>Five</li>
<li>Why</li>
<li>Who</li>
<li> </li>
</ul>
<form class="navbar-form">
<div class="form-group" style="display:inline;">
<div class="input-group">
<div class="input-group-btn">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"><span class="glyphicon glyphicon-chevron-down"></span></button>
<ul class="dropdown-menu">
<li>Category 1</li>
<li>Category 2</li>
<li>Category 3</li>
<li>Category 4</li>
<li>Category 5</li>
</ul>
</div>
<input type="text" class="form-control" placeholder="What are searching for?">
<span class="input-group-addon"><span class="glyphicon glyphicon-search"></span> </span>
</div>
</div>
</form>
</div>
</div>
</nav>
<section class="container-fluid" id="section1">
<h1 class="text-center v-center">Sectionalize.</h1>
<div class="container">
<div class="row">
<div class="col-sm-4">
<div class="row">
<div class="col-sm-10 col-sm-offset-2 text-center"><h3>Robust</h3><p>There is other content and snippets of details or features that can be placed here..</p><i class="fa fa-cog fa-5x"></i></div>
</div>
</div>
<div class="col-sm-4 text-center">
<div class="row">
<div class="col-sm-10 col-sm-offset-1 text-center"><h3>Simple</h3><p>You may also want to create content that compells users to scroll down more..</p><i class="fa fa-user fa-5x"></i></div>
</div>
</div>
<div class="col-sm-4 text-center">
<div class="row">
<div class="col-sm-10 text-center"><h3>Clean</h3><p>In the first 30 seconds of a user's visit to your site they decide if they're going to stay..</p><i class="fa fa-mobile fa-5x"></i></div>
</div>
</div>
</div><!--/row-->
<div class="row"><br></div>
</div><!--/container-->
</section>
<section class="container-fluid" id="section2">
<div class="row">
<div class="col-sm-8 col-sm-offset-2 text-center">
<h1>What is Bootstrap?</h1>
<br>
<p class="lead">Bootstrap is a free collection of tools for creating websites and web applications. It contains HTML and CSS-based design templates for typography, forms, buttons, navigation and other interface components, as well as optional JavaScript extensions. It is the No.1 project on GitHub with 65,000+ stars and 23,800 forks (as of March 2014) [1] and has been used by NASA and MSNBC, among many others..</p>
<br>
<i style="font-size:120px" class="fa fa-camera fa-5x"></i>
<p>Big 'ol Camera Icon</p>
</div>
</div>
</section>
<section class="container-fluid" id="section3">
<h1 class="text-center">Bootstrap is Responsive</h1>
<div class="row">
<div class="col-sm-6 col-sm-offset-3">
<h3 class="text-center">Vertical scrolling has become a popular and lasting trend in Web design.</h3>
<div class="row">
<div class="col-xs-4 col-xs-offset-1">Some brand-tacular designs even have home page content that is taller that 12,000 pixels. That's a lotta content.</div>
<div class="col-xs-2"></div>
<div class="col-xs-4 text-right">Anyhoo, this is just some random blurb of text, and Bootply.com is a playground and code editor for Bootstrap.</div>
</div>
<p class="text-center">
<img src="/assets/example/img_mtnpeople.png" class="img-responsive center-block ">
</p>
</div>
</div>
</section>
<section class="container-fluid" id="section4">
<h2 class="text-center">Change this Content. Change the world.</h2>
<div class="row">
<div class="col-sm-8 col-sm-offset-2">
<img src="/assets/example/bg_smartphones.jpg" class="img-responsive center-block ">
<p class="text-center">Images will scale down proportionately as browser width narrows.</p>
</div>
</div>
</section>
<section class="container-fluid" id="section5">
<div class="col-sm-10 col-sm-offset-1">
<div class="container">
<div class="row">
<div class="col-sm-4 col-xs-12">
<div class="list-group">
<a href="#" class="list-group-item active">
<h2 class="list-group-item-heading">Basic</h2>
<h6>Free to get started</h6>
</a>
<a href="#" class="list-group-item">
<p class="list-group-item-text">Option 100 - more about this</p>
</a>
<a href="#" class="list-group-item">
<p class="list-group-item-text">Option 2 - this is more about this</p>
</a>
<a href="#" class="list-group-item">
<p class="list-group-item-text">Option 3 GB</p>
</a>
<a href="#" class="list-group-item">
<p class="list-group-item-text">Option 4</p>
</a>
<a href="#" class="list-group-item">
<p class="list-group-item-text">Feature</p>
</a>
<a href="#" class="list-group-item">
<p class="list-group-item-text">Feature</p>
</a>
<a href="#" class="list-group-item">
<button class="btn btn-primary btn-lg btn-block">Get Started</button>
</a>
</div>
</div><!--/left-->
<div class="col-sm-4 col-xs-12">
<div class="list-group text-center">
<a href="#" class="list-group-item active">
<h2 class="list-group-item-heading">Better</h2>
<h6>Most popular plan</h6>
</a>
<a href="#" class="list-group-item">
<p class="list-group-item-text">Option 200 - more about this</p>
</a>
<a href="#" class="list-group-item">
<p class="list-group-item-text">Option 2 - this is more about this</p>
</a>
<a href="#" class="list-group-item">
<p class="list-group-item-text">Option 5 GB</p>
</a>
<a href="#" class="list-group-item">
<p class="list-group-item-text">Option 6</p>
</a>
<a href="#" class="list-group-item">
<p class="list-group-item-text">Feature</p>
</a>
<a href="#" class="list-group-item">
<p class="list-group-item-text">Feature</p>
</a>
<a href="#" class="list-group-item">
<button class="btn btn-default btn-lg btn-block">$10 per month</button>
</a>
</div>
</div><!--/middle-->
<div class="col-sm-4 col-xs-12">
<div class="list-group text-right">
<a href="#" class="list-group-item active">
<h2 class="list-group-item-heading">Best</h2>
<h6>For enterprise grade</h6>
</a>
<a href="#" class="list-group-item">
<p class="list-group-item-text">Option 100 - more about this</p>
</a>
<a href="#" class="list-group-item">
<p class="list-group-item-text">Option 2 - this is more about this</p>
</a>
<a href="#" class="list-group-item">
<p class="list-group-item-text">Option 8 GB</p>
</a>
<a href="#" class="list-group-item">
<p class="list-group-item-text">Option 10</p>
</a>
<a href="#" class="list-group-item">
<p class="list-group-item-text">Unlimited</p>
</a>
<a href="#" class="list-group-item">
<p class="list-group-item-text">Unlimited</p>
</a>
<a href="#" class="list-group-item">
<button class="btn btn-default btn-lg btn-block">$20 per month</button>
</a>
</div>
</div><!--/right-->
</div><!--/row-->
</div><!--/container-->
</div>
</section>
<section class="container-fluid" id="section6">
<h2 class="text-center">Do you see what I mean?</h2>
<p class="text-center lead">Add some compelling information here</p>
<img src="/assets/example/bg_iphone.png" class="img-responsive center-block ">
</section>
<section class="container" id="section7">
<h1 class="text-center">Social Media Fascination</h1>
<div class="row">
<!--fontawesome icons-->
<div class="col-sm-1 col-sm-offset-2 col-xs-4 text-center">
<i class="fa fa-github fa-4x"></i>
</div>
<div class="col-sm-1 col-xs-4 text-center">
<i class="fa fa-foursquare fa-4x"></i>
</div>
<div class="col-sm-1 col-xs-4 text-center">
<i class="fa fa-facebook fa-4x"></i>
</div>
<div class="col-sm-1 col-xs-4 text-center">
<i class="fa fa-pinterest fa-4x"></i>
</div>
<div class="col-sm-1 col-xs-4 text-center">
<i class="fa fa-google-plus fa-4x"></i>
</div>
<div class="col-sm-1 col-xs-4 text-center">
<i class="fa fa-twitter fa-4x"></i>
</div>
<div class="col-sm-1 col-xs-4 text-center">
<i class="fa fa-dribbble fa-4x"></i>
</div>
<div class="col-sm-1 col-xs-4 text-center">
<i class="fa fa-instagram fa-4x"></i>
</div>
</div><!--/row-->
<div class="row">
<div class="col-md-12 text-center">
<br><br>
<p>
Get the code for this template.
</p>
</div>
</div>
</section>
<footer id="footer">
<div class="container">
<div class="row">
<div class="col-xs-6 col-sm-6 col-md-3 column">
<h4>Information</h4>
<ul class="nav">
<li>Products</li>
<li>Services</li>
<li>Benefits</li>
<li>Developers</li>
</ul>
</div>
<div class="col-xs-6 col-md-3 column">
<h4>Follow Us</h4>
<ul class="nav">
<li>Twitter</li>
<li>Facebook</li>
<li>Google+</li>
<li>Pinterest</li>
</ul>
</div>
<div class="col-xs-6 col-md-3 column">
<h4>Contact Us</h4>
<ul class="nav">
<li>Email</li>
<li>Headquarters</li>
<li>Management</li>
<li>Support</li>
</ul>
</div>
<div class="col-xs-6 col-md-3 column">
<h4>Customer Service</h4>
<ul class="nav">
<li>About Us</li>
<li>Delivery Information</li>
<li>Privacy Policy</li>
<li>Terms & Conditions</li>
</ul>
</div>
</div><!--/row-->
</div>
</footer>
http://bootply.com/129806
This is a full-width search form in the navbar along with an input-group-btn on the left side of the input that is used as a dropdown of categories.

Resources