CHANGE THIS CODE IN bootstrap.min.css
nav-tabs .dropdown-menu{margin-top:-1px;border-top-right-radius:0;border-top-left-radius:0}.navbar{position:relative;min-height:50px;margin-bottom:20px;border:1px solid transparent}.
CHANGE THIS CODE IN style.css
/* customized carousel */
.carousel {
height: 500px;
margin-bottom: 50px;
position: relative;
}
.carousel-caption {
z-index: 10;
margin-bottom: 90px;
}
.carousel .item {
background-color: rgba(0, 0, 0, 0.8);
height: 500px;
}
Today we will learn in bootstrap tutorial about bootstrap themes,bootstrap css,web designing by bootstrap.
create bootstrap,theme,templates easily and fast :-
create bootstrap website step by step process
AAVIK KUMAR PRODUCTION
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="author" content="Script Tutorials" />
<meta name="description" content="Responsive Websites Using BootStrap - demo page">
<meta http-equiv="X-UA-Compatible" content="IE=Edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>Responsive Websites Using BootStrap | AAVIK KUMAR</title>
<!-- css stylesheets -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
</head>
<body>
<!-- modal box -->
<div class="modal fade" id="my-modal-box" tabindex="-1" role="dialog" aria-labelledby="my-modal-box-l" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<div class="modal-title" id="my-modal-box-l">
<h3>Share it</h3>
</div>
</div><!-- /.modal-header -->
<div class="modal-body">
<p>Share it box content</p>
<!-- AddThis Button BEGIN -->
<div class="addthis_toolbox addthis_default_style addthis_32x32_style">
<a class="addthis_button_preferred_1"></a>
<a class="addthis_button_preferred_2"></a>
<a class="addthis_button_preferred_3"></a>
<a class="addthis_button_preferred_4"></a>
<a class="addthis_button_compact"></a>
<a class="addthis_counter addthis_bubble_style"></a>
</div>
<script type="text/javascript" src="//s7.addthis.com/js/300/addthis_widget.js#pubid=ra-4dbfb1915f17d240"></script>
</div><!-- /.modal-body -->
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<!-- menu bar -->
<nav class="navbar navbar-default navbar-static">
<div class="navbar-header">
<button class="navbar-toggle" type="button" data-toggle="collapse" data-target="#b-menu-2">
<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="#">website name</a>
</div>
<!-- submenu elements for #b-menu-2 -->
<div class="collapse navbar-collapse" id="b-menu-2">
<ul class="nav navbar-nav">
<li class="active"><a href="#"><span class="glyphicon glyphicon-home"></span> Home</a></li>
<li><a href="#"><span class="glyphicon glyphicon-question-sign"></span> Help</a></li>
<li><a href="#"><span class="glyphicon glyphicon-exclamation-sign"></span> About</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown"><span class="glyphicon glyphicon-list"></span> Other <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#">Submenu 1</a></li>
<li><a href="#">Submenu 2</a></li>
<li><a href="#">Submenu 3</a></li>
<li><a href="#">Submenu 4</a></li>
<li class="divider"></li>
<li><a href="#">Submenu 5</a></li>
<li><a href="#">Submenu 6</a></li>
<li class="divider"></li>
<li><a href="#">Submenu 7</a></li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li data-toggle="modal" data-target="#my-modal-box"><a href="#"><span class="glyphicon glyphicon-share"></span> Share popup</a></li>
</ul>
</div><!-- /.nav-collapse -->
</nav>
<!-- slider -->
<div id="slider" class="carousel slide" data-ride="carousel">
<!-- controls -->
<ol class="carousel-indicators">
<li data-target="#slider" data-slide-to="0" class="active"></li>
<li data-target="#slider" data-slide-to="1"></li>
<li data-target="#slider" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<!-- slides -->
<div class="item active">
<div class="container">
<div class="carousel-caption">
<h1>Lorem ipsum - 1</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In sit amet tempus massa. Nam quis purus sit amet augue iaculis dapibus non in nisi.<br />Sed sed volutpat neque. Nulla posuere.</p>
<p><a class="btn btn-lg btn-default" href="#" role="button">Button 1</a></p>
</div>
</div>
</div>
<div class="item">
<div class="container">
<div class="carousel-caption">
<h1>Lorem ipsum - 2</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In sit amet tempus massa. Nam quis purus sit amet augue iaculis dapibus non in nisi.<br />Sed sed volutpat neque. Nulla posuere.</p>
<p><a class="btn btn-lg btn-primary" href="#" role="button">Button 2</a></p>
</div>
</div>
</div>
<div class="item">
<div class="container">
<div class="carousel-caption">
<h1>Lorem ipsum - 3</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In sit amet tempus massa. Nam quis purus sit amet augue iaculis dapibus non in nisi.<br />Sed sed volutpat neque. Nulla posuere.</p>
<p><a class="btn btn-lg btn-warning" href="#" role="button">Button 3</a></p>
</div>
</div>
</div>
</div>
<!-- left-right controls -->
<a class="left carousel-control" href="#slider" data-slide="prev"><span class="glyphicon glyphicon-chevron-left"></span></a>
<a class="right carousel-control" href="#slider" data-slide="next"><span class="glyphicon glyphicon-chevron-right"></span></a>
</div><!-- /.carousel -->
<!-- main container -->
<div class="container">
<!-- 2-column layout -->
<div class="row row-offcanvas row-offcanvas-right">
<div class="col-xs-12 col-sm-9">
<!-- jumbotron -->
<div class="jumbotron">
<h1>Lorem ipsum</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In sit amet tempus massa. Nam quis purus sit amet augue iaculis dapibus non in nisi. Sed sed volutpat neque. Nulla posuere.</p>
<p><a role="button" href="#" class="btn btn-lg btn-success">Sign up today</a></p>
</div>
<div class="row">
<!-- column 1 -->
<div class="col-sm-6">
<!-- box 1 -->
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">Panel 1 title</h3>
</div>
<div class="panel-body">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In sit amet tempus massa. Nam quis purus sit amet augue iaculis dapibus non in nisi. Sed sed volutpat neque. Nulla posuere.</p>
<p><a class="btn btn-default right" href="#" role="button">Continue »</a></p>
</div>
</div>
<!-- box 2 -->
<div class="panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title">Panel 2 title</h3>
</div>
<div class="panel-body">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In sit amet tempus massa. Nam quis purus sit amet augue iaculis dapibus non in nisi. Sed sed volutpat neque. Nulla posuere.</p>
<p><a class="btn btn-default right" href="#" role="button">Continue »</a></p>
</div>
</div>
</div> <!-- /column 1 -->
<!-- column 2 -->
<div class="col-sm-6">
<!-- box 3 -->
<div class="panel panel-success">
<div class="panel-heading">
<h3 class="panel-title">Panel 3 title</h3>
</div>
<div class="panel-body">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In sit amet tempus massa. Nam quis purus sit amet augue iaculis dapibus non in nisi. Sed sed volutpat neque. Nulla posuere.</p>
<p><a class="btn btn-default right" href="#" role="button">Continue »</a></p>
</div>
</div>
<!-- box 4 -->
<div class="panel panel-warning">
<div class="panel-heading">
<h3 class="panel-title">Panel 4 title</h3>
</div>
<div class="panel-body">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In sit amet tempus massa. Nam quis purus sit amet augue iaculis dapibus non in nisi. Sed sed volutpat neque. Nulla posuere.</p>
<p><a class="btn btn-default right" href="#" role="button">Continue »</a></p>
</div>
</div>
</div> <!-- /column 2 -->
</div><!--/row-->
</div><!--/span-->
<!-- column 3 (sidebar) -->
<div class="col-sm-3 sidebar-offcanvas" id="sidebar">
<div class="list-group" role="navigation">
<a href="#" class="list-group-item">Link</a>
<a href="#" class="list-group-item">Link</a>
<a href="#" class="list-group-item active">Link</a>
<a href="#" class="list-group-item">Link</a>
<a href="#" class="list-group-item">Link</a>
</div>
<!-- box 5 -->
<div class="panel panel-danger">
<div class="panel-heading">
<h3 class="panel-title">Form elements</h3>
</div>
<div class="panel-body">
<form role="form">
<div class="form-group">
<label for="emailField">Email address</label>
<input type="email" class="form-control" id="emailField" placeholder="Enter email">
</div>
<div class="form-group">
<label for="selectField">Type</label>
<select class="form-control" id="selectField">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
</div>
<div class="progress progress-striped active">
<div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width:30%">
<span class="sr-only">30% Complete</span></div>
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
</div>
</div>
<!-- box 6 -->
<div class="panel panel-info">
<div class="panel-heading">
<h3 class="panel-title">Panel 6 title</h3>
</div>
<div class="panel-body">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In sit amet tempus massa. Nam quis purus sit amet augue iaculis dapibus non in nisi. Sed sed volutpat neque. Nulla posuere.</p>
<p><a class="btn btn-default right" href="#" role="button">Continue »</a></p>
</div>
</div>
</div><!-- /column 3 (sidebar) -->
</div><!--/row-->
<footer>
<nav class="navbar navbar-default navbar-static-bottom" role="navigation">
<p class="navbar-text">© Copyright 2013</p>
<p class="navbar-text navbar-right"><a href="https://plus.google.com/+aavikkumar/about">AAVIK KUMAR</a></p>
</nav>
</footer>
</div><!--/.container-->
<!-- add javascripts -->
<script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
