I am trying to show below look but not working.I have added all css and js but not working.
How to align properly nav bar and logo for mobile view and desktop and tap.
Demo: https://stackblitz.com/edit/angular-7-bootstrap-navbar-ujihha?file=src/styles.css
header.component.html:
<div id="page">
<header class="header-container">
<div class="container">
<div class="top-row">
<div class="row">
<div class="col-md-2 col-sm-6 col-xs-6">
<div id="logo">
<!--<img src="images/logo.png" alt="logo">-->
<span>Resort</span>
</div>
</div>
<div class="col-sm-6 visible-sm">
<div class="text-right"><button type="button" class="book-now-btn">Book Now</button></div>
</div>
<div class="col-md-8 col-sm-12 col-xs-12 remove-padd">
<nav class="navbar navbar-default">
<div class="navbar-header page-scroll">
<button data-target=".navbar-ex1-collapse" data-toggle="collapse" class="navbar-toggle" 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>
</div>
<div class="collapse navigation navbar-collapse navbar-ex1-collapse remove-space">
<ul class="list-unstyled nav1 cl-effect-10">
<li><a data-hover="Home" class="active"><span>Home</span></a></li>
<li><a data-hover="About" href="about.html"><span>About</span></a></li>
<li><a data-hover="Rooms" href="rooms.html"><span>Rooms</span></a></li>
<li><a data-hover="Gallery" href="gallery.html"><span>Gallery</span></a></li>
<li><a data-hover="Contact Us" href="contact.html"><span>contact Us</span></a></li>
</ul>
</div>
</nav>
</div>
<div class="col-md-2 col-sm-4 col-xs-12 hidden-sm">
<div class="text-right"><button type="button" class="book-now-btn">Book Now</button></div>
</div>
</div>
</div>
</div>
</header>
<!--back to top--->
<a style="display: none;" href="javascript:void(0);" class="scrollTop back-to-top" id="back-to-top">
<span><i aria-hidden="true" class="fa fa-angle-up fa-lg"></i></span>
<span>Top</span>
</a>
</div>
Using Bootstrap 4.3 to make a responsive dashboard, I ran into a problem with medium screens. When I resize Google chrome to check the page in different sizes, sadly, the bootstrap toggle button appears when chrome is resized to medium. This is the case with other browsers as well. The following picture is my chrome showing the page. As in the picture, the screen is not that small for the content to disappear and for the toggle button to show up:
The followings are my codes. I would be really grateful if you help me solve the problem.
#media (max-width: 768px) {
.sidebar {
position: static;
height: auto;
}
.top-navbar {
position: static;
}
}
.top-nav-height {
height: 3em!important;
}
.sidebar {
box-sizing: border-box;
background-color: #34495e !important;
height: 100vh;
}
<body dir="rtl">
<!-- Navigation -->
<nav class="navbar navbar-expand-lg navbar-light p-0 m-0">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#goNavBar" aria-controls="goNavBar" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="goNavBar">
<div class="container-fluid">
<div class="row">
<!-- Sidebar -->
<div class="col-md-2 col-xl-2 col-md-5 sidebar p-0 m-0">
ِDashboard
<div id="NavBarParent">
<ul class="navbar-nav flex-column">
<li class="nav-item rtl d-block">
<i class="fas fa-home ml-2"></i>Home
</li>
</ul>
</div>
</div>
<!-- Sidebar Done -->
<!-- Top Bar -->
<div class="col-md-10 col-xl-10 col-md-7 py-3 top-navbar">
<div class="row align-items-center">
<div class="col-md-4 col-sm-4 col-lg-5 col-xl-5">
<h4></h4>
</div>
<div class="col-md-5 col-sm-4 col-lg-5 col-xl-5">
</div>
<div class="col-md-3 col-sm-4 col-lg-2 col-xl-2" >
<ul class="navbar-nav">
<li><span class="fa-layers fa-fw fa-lg" >
<i class="fas fa-envelope py-1" style="color: #34495e"></i>
<span class="fa-layers-counter fa-lg bullet-sizing">45</span>
</span></li>
<li><span class="fa-layers fa-fw fa-lg mr-2" >
<i class="fas fa-bell py-1" style="color: #34495e"></i>
<span class="fa-layers-counter bullet-sizing fa-lg">2</span>
</span></li>
<li class="nav-item mr-auto"><i class="fas fa-sign-out-alt fa-lg" style="color: #34495e"></i></li>
</ul>
</div>
</div>
</div>
<!-- Top Bar Done -->
</div>
</div>
</div>
</nav>
<!-- Navigation Done -->
For the sake of convenience, I deleted some lines from sidebar menu items, as I think they don't have anything to do with the sizing and toggle button.
Wow, the problem was on the very first line. Changing the 'navbar-expand-lg' on the first line of code into 'navbar-expand-sm' solved my issue.
You need to change navbar-expand-(value)Ex lg/md/sm or custom.you can try this i have added with your code.
<body dir="rtl">
<!-- Navigation -->
<nav class="navbar navbar-expand-md navbar-light p-0 m-0">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#goNavBar" aria-controls="goNavBar" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="goNavBar">
<div class="container-fluid">
<div class="row">
<!-- Sidebar -->
<div class="col-md-2 col-xl-2 col-md-5 sidebar p-0 m-0">
ِDashboard
<div id="NavBarParent">
<ul class="navbar-nav flex-column">
<li class="nav-item rtl d-block">
<i class="fas fa-home ml-2"></i>Home
</li>
</ul>
</div>
</div>
<!-- Sidebar Done -->
<!-- Top Bar -->
<div class="col-md-10 col-xl-10 col-md-7 py-3 top-navbar">
<div class="row align-items-center">
<div class="col-md-4 col-sm-4 col-lg-5 col-xl-5">
<h4></h4>
</div>
<div class="col-md-5 col-sm-4 col-lg-5 col-xl-5">
</div>
<div class="col-md-3 col-sm-4 col-lg-2 col-xl-2" >
<ul class="navbar-nav">
<li><span class="fa-layers fa-fw fa-lg" >
<i class="fas fa-envelope py-1" style="color: #34495e"></i>
<span class="fa-layers-counter fa-lg bullet-sizing">45</span>
</span></li>
<li><span class="fa-layers fa-fw fa-lg mr-2" >
<i class="fas fa-bell py-1" style="color: #34495e"></i>
<span class="fa-layers-counter bullet-sizing fa-lg">2</span>
</span></li>
<li class="nav-item mr-auto"><i class="fas fa-sign-out-alt fa-lg" style="color: #34495e"></i></li>
</ul>
</div>
</div>
</div>
<!-- Top Bar Done -->
</div>
</div>
</div>
</nav>
<!-- Navigation Done -->
I'm new to Bootstrap and having some styling issues with a project I'm working on. When my window is resized and made smaller, my columns start to overlap. How do I fix this and make it so the text (in this case the messages) are always aligned to the left side of the column?
What am I doing wrong here?
I've made an example page here:
https://www.bootply.com/JxB5m6qw8Z
<nav class="navbar navbar-default navbar-fixed-top">
<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="/">Chat</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"></ul>
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
User2 <span class="caret"></span>
<ul class="dropdown-menu">
<li>Settings</li>
<li role="separator" class="divider"></li>
<li><a rel="nofollow" data-method="delete" href="/users/sign_out">Logout</a></li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
<div class="fluid-container" style="margin-top: 70px">
<div class="row">
<div class="col-sm-2 sidebar-main">
<div class="sidebar-items">
<div class="sidebar-channels">
<h4>Channels</h4>
<ul>
<div class="sidebar-listitem">
<li># <a data-behavior="chatroom-link" data-chatroom-id="25" href="/chatrooms/25">General</a></li>
</div>
</ul>
</div>
<div class="sidebar-users">
<h4>Current Users</h4>
<ul>
<div class="sidebar-listitem">
<li><a data-behavior="chatroom-link" data-chatroom-id="28" href="/direct_messages/6">User1</a></li>
</div>
<div class="sidebar-listitem">
<li><a data-behavior="chatroom-link" href="/direct_messages/7">User3</a></li>
</div>
</ul>
</div>
</div>
</div>
<div class="col-sm-10 col-sm-offset-2 body-main">
<div class="room-name">
<h2>General</h2>
</div>
<div class="message-window">
<div data-behavior='messages' data-chatroom-id='25' class="messages">
<div><strong>User2: </strong> sd</div>
<div><strong>User2: </strong> csd</div>
<div><strong>User2: </strong> c</div>
<div><strong>User2: </strong> sdc</div>
<div><strong>User2: </strong> sd</div>
<div><strong>User2: </strong> cs</div>
</div>
<div class="message-form">
<form class="new_message" id="new_message" action="/chatrooms/25/messages" accept-charset="UTF-8" method="post"><input name="utf8" type="hidden" value="✓" /><input type="hidden" name="authenticity_token" value="4NCGg4CJSb0jWbL+Xsx+FuNYTIUM/LD/el5IIuF3cRTHLXy9LzFAIUR+T5C8ATiJKeYdrbceMAeTc79E7OgLGg==" />
<textarea rows="1" class="form-control" autofocus="autofocus" name="message[body]" id="message_body">
</textarea>
</form>
</div>
</div>
</div>
</div>
</div>
I am pretty sure your problem is that using col-sm isn't working because your screen is smaller than what that column size is meant to accommodate. Try using col-xs instead.
Not to mention, you used fluid-container instead of container-fluid at one point.
I am creating a angular 2 application using bootstrap. I want to have a navbar on my application so that app menu looks like
When viewed from smaller devices it should look as follows :
I have used following code in my html
<nav class="navbar navbar-inverse">
<div class="container">
<div class="navbar-header" data-toggle="collapse" data-target=".sidebar-navbar-collapse">
<button type="button" class="navbar-toggle">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">COMPANY LOGO</a>
</div>
<div class="navbar-collapse collapse sidebar-navbar-collapse">
<ul *ngFor="let menu of menus;let first = first;" class="nav navbar-nav">
<li>
<a (click)="menuClicked(menu.categoryId)"
href='#/{{menu.categoryName}}'
style="color: #fff;font-size: 16px;font-weight:bold;cursor:pointer;">
{{menu.categoryName}}
</a>
</li>
</ul>
</div>
</div>
</nav>
Which gives me following output :
Can someone guide how to achieve desired output?
#Mandar Patil, I've linked to a codeply project that should meet your requirements.
For the brand on the collapsed navigation menu, you can just use bootstraps visible and hidden utility classes, and specify the appropriate breakpoints.
HTML
<div class="container hidden-xs visible-sm visible-md visible-lg">
<div class="row">
<div class="col-12">
<a class="navbar-brand" href="#">COMPANY LOGO</a>
</div>
</div>
</div>
...
<div class="navbar-header" data-toggle="collapse" data-target=".sidebar-navbar-collapse">
<button type="button" class="navbar-toggle">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand visible-xs hidden-sm hidden-md hidden-lg" href="#" style="color: white;">COMPANY LOGO</a>
</div>
You can try For this:
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="col-md-12 clearfix">
<div class="row">
<a class="navbar-brand" href="#">WebSiteName</a>
</div>
</div>
</div>
<div class="col-md-12 clearfix">
<div class="row">
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Page 1 <span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Page 1-1</li>
<li>Page 1-2</li>
<li>Page 1-3</li>
</ul>
</li>
<li>Page 2</li>
<li>Page 3</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><span class="glyphicon glyphicon-user"></span> Sign Up</li>
<li><span class="glyphicon glyphicon-log-in"></span> Login</li>
</ul>
</div>
</div>
</div>
</div>
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.