"Simple Template "
Bootstrap 3.3.0 Snippet by hrk6610

Post to Facebook Tweet this

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <!DOCTYPE html> <html> <head> <title> Test | Home </title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <link href="https://fonts.googleapis.com/css?family=Fira+Sans" rel="stylesheet"> <link rel="stylesheet" type="text/css" href="style.css"> <link rel="icon" type="image/png" href="images/fevi.png"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> </head> <body style="background-color:#FFF;font-family:Trebuchet MS;" data-spy="scroll" data-target=".navbar"> <div class="container-fluid" style="background-color:#3A56F2;color:#fff;font-size:9px;"> <div class="col-sm-6"> <span class="fa-stack fa-lg "> <i class="fa fa-facebook fa-stack-1x" style="color:#fff;"></i> </span> <span class="fa-stack fa-lg "> <i class="fa fa-twitter fa-stack-1x" style="color:#fff;"></i> </span> <span class="fa-stack fa-lg "> <i class="fa fa-instagram fa-stack-1x" style="color:#fff;"></i> </span> <span class="fa-stack fa-lg "> <i class="fa fa-google-plus fa-stack-1x" style="color:#fff;"></i> </span> <span class="fa-stack fa-lg "> <i class="fa fa-youtube fa-stack-1x" style="color:#fff;"></i> </span> </div> <div class="col-sm-6 text-right" style="font-size:15px;"> <span class="glyphicon glyphicon-phone"></span> Phone:(+91)- 91XXXXX &nbsp &nbsp &nbsp <span class="glyphicon glyphicon-envelope"></span> Email:testing@gmail.com </div> </div> <div class="container-fluid" style="background-color:#fff;color:#000;height:80px;"> <div class="col-sm-3"> <h1>Logo here</h1> </div> <div class="col-sm-9 text-right" style="padding-top:20px;"> <input type="tex" name="search" placeholder=" Search Here...."> &nbsp &nbsp &nbsp <button type="button" class="btn btn-default btn-lg"> Sign in </button> &nbsp &nbsp <button type="button" class="btn btn-primary btn-lg"> Sign up </button> </div> </div> <nav class="navbar navbar-inverse" data-spy="affix" data-offset-top="105"> <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> <div> <div class="collapse navbar-collapse" style="text-align:right;"" id="myNavbar"> <ul class="nav navbar-nav" > <li class="active"><a href=""> <i class="fa fa-home"></i> Home </a></li> <li><a href="abt.html"> <i class="fa fa-info"></i> About Us</a></li> <li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="prd.html"><i class="fa fa-product-hunt"></i> Product <span class="caret"></span></a> <ul class="dropdown-menu"> <li><a href="ssl.html"> <i class="fa fa-product-hunt"></i> Product : 1 </a></li> <li><a href="asl.html"> <i class="fa fa-product-hunt"></i> Product : 2 </a></li> <li><a href="csl.html"> <i class="fa fa-product-hunt"></i> Product : 3 </a></li> <li><a href="bfp.html"> <i class="fa fa-product-hunt"></i> Product : 4 </a></li> <li><a href="sssh.html"> <i class="fa fa-product-hunt"></i> Product : 5 </a></li> <li><a href="sssb.html"> <i class="fa fa-product-hunt"></i> Product : 6 </a></li> <li><a href="sscs.html"> <i class="fa fa-product-hunt"></i> Product : 7 </a></li> </ul> </li> <li><a href="cnt.html"> <span class="glyphicon glyphicon-modal-window"></span> Inquiry </a></li> <li><a href="cnt.html"> <span class="glyphicon glyphicon-bell"></span> Careers </a></li> <li><a href="cnt.html"> <i class="fa fa-mobile"></i> Contact Us </a></li> </ul> </div> </div> </div> </nav> <!-- main content --> <div class="container-fluid" style="padding:0px 0px;"> <div id="myCarousel" class="carousel slide" data-ride="carousel"> <!-- Indicators --> <ol class="carousel-indicators"> <li data-target="#myCarousel" data-slide-to="0" class="active"></li> <li data-target="#myCarousel" data-slide-to="2"></li> <li data-target="#myCarousel" data-slide-to="3"></li> <li data-target="#myCarousel" data-slide-to="4"></li> </ol> <!-- Wrapper for slides --> <div class="carousel-inner" role="listbox"> <div class="item active"> <img src="http://placehold.it/460x345?text=slide+:+1"> <div class="carousel-caption"> <h3> Caption :1 </h3> </div> </div> <div class="item"> <img src="http://placehold.it/460x345?text=slide+:+2"> <div class="carousel-caption"> <h3> Caption : 2 </h3> </div> </div> <div class="item"> <img src="http://placehold.it/460x345?text=slide+:+3"> <div class="carousel-caption"> <h3> Caption :3 </h3> </div> </div> <div class="item"> <img src="http://placehold.it/460x345?text=slide+:+4"> <div class="carousel-caption"> <h3> Caption :4 </h3> </div> </div> </div> <!-- Left and right controls --> <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev"> <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span> <span class="sr-only">Previous</span> </a> <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next"> <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> <span class="sr-only">Next</span> </a> </div> <!-- Main partition --> <div class="container-fluid"> <div class="col-sm-12 text-center"> <h2 style="color:#3a56f2;"> We Can Customized Your Products </h2> <hr> </div> <div class="col-sm-3"> <h3 class="sub-name text-center"> Product Search </h3> <ul class="list-group"> <li class="list-group-item"> By Catagory <br> <br> <input type="text" name="search" placeholder="Search...."> </li> <li class="list-group-item"> By Item No. and Name <br> <br> <input type="text" name="search" placeholder="Search...."> </li> </ul> </div> <div class="col-sm-6 text-center"> <h3 class="sub-name"> Company Information </h3> <ul class="list-group"> <li class="list-group-item" style="text-align:justify;"> <h3 style="text-align:center;""> Introduction </h3> <hr> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. <hr> <h3 style="text-align:center;"> Products Catagories </h3> <hr> <div class="row"> <div class="col-sm-4"> <img src="http://placehold.it/150x75?text=Image+:+1"> </div> <div class="col-sm-4"> <img src="http://placehold.it/150x75?text=Image+:+2"> </div> <div class="col-sm-4"> <img src="http://placehold.it/150x75?text=Image+:+3"> </div> </div> <div class="row" style="margin-top:15px;"> <div class="col-sm-4"> <img src="http://placehold.it/150x75?text=Image+:+4"> </div> <div class="col-sm-4"> <img src="http://placehold.it/150x75?text=Image+:+5"> </div> <div class="col-sm-4"> <img src="http://placehold.it/150x75?text=Image+:+6"> </div> </div> <div class="row" style="margin-top:15px;"> <div class="col-sm-4"> <img src="http://placehold.it/150x75?text=Image+:+7"> </div> <div class="col-sm-4"> <img src="http://placehold.it/150x75?text=Image+:+8"> </div> <div class="col-sm-4"> <img src="http://placehold.it/150x75?text=Image+:+9"> </div> </div> </li> </ul> </div> <div class="col-sm-3 text-center"> <h3 class="sub-name"> Register Form </h3> <!-- Form--> <ul class="list-group"> <li class="list-group-item"> Already Member ! Please Sign In <br> <br> <div class="span3"> <h2>Sign In</h2> <form> <label>Username / E-mail</label> <br> <input type="taxt" name="lastname" class="span3" placeholder=""> <br> <br> <label>Password</label> <br> <input type="password" name="password" class="span3"> <br> <br> <label><input type="checkbox" name="terms"> Save your Password. </label> <br> <input type="submit" value="Sign In" class="btn btn-primary pull-center"> <div class="clearfix"></div> </form> </div> </li> </ul> </div> </div>. <!-- Fotter --> <footer style="padding:30px 0px;background-color:#222;color:#fff;" class="container-fluid text-center"> <a href="#top"><i class="fa fa-arrow-circle-o-up"></i> </a> <br> Back To Top <br> <div class="col-sm-12 ok" style="padding-top:40px;padding-left:15px;padding-right:15px;"> <span class="fa-stack fa-lg "> <i class="fa fa-circle fa-stack-2x"></i> <i class="fa fa-facebook fa-stack-1x"></i> </span> <span class="fa-stack fa-lg "> <i class="fa fa-circle fa-stack-2x"></i> <i class="fa fa-twitter fa-stack-1x"></i> </span> <span class="fa-stack fa-lg "> <i class="fa fa-circle fa-stack-2x"></i> <i class="fa fa-instagram fa-stack-1x"></i> </span> <span class="fa-stack fa-lg "> <i class="fa fa-circle fa-stack-2x"></i> <i class="fa fa-google-plus fa-stack-1x"></i> </span> <span class="fa-stack fa-lg "> <i class="fa fa-circle fa-stack-2x"></i> <i class="fa fa-youtube fa-stack-1x"></i> </span> <h4>Design Made By <span class="glyphicon glyphicon-heart"></span> <a href="#" class="name"> Hardik Gondhiya </a> </h4> <br> </div> </footer> <!-- 2nd footer--> <footer style="background-color:#3A56F2;color:#fff;font-family:Fira Sans;letter-spacing:1px;" class="container-fluid text-center"> <div class="col-sm-6"> All right reserved. </div> <div class="col-sm-6"> <i class="fa fa-phone" aria-hidden="true"></i> Contact : (+91) XXXXXXXX </div> </div> </footer> </body> </html>
i.fa-arrow-circle-o-up { color:#fff; font-size:30px; } i.fa-arrow-circle-o-up:hover { color: #3A56F2; transition: color 1s; } i.fa-circle { color:#fff; } i.fa-facebook,i.fa-youtube,i.fa-twitter,i.fa-instagram,i.fa-google-plus { color: black; cursor: pointer; } a.ec_fevicon { color:#fff; } a.name { color:#fff; } a.ec_fevicon:hover { cursor:pointer; text-decoration: none; color: #e15616; transition: color 2s; } a.name:hover { cursor:pointer; text-decoration: none; color: #3A56F2; transition: color 2s; } .contact { color:black; text-align: left; } .navbar-inverse .navbar-nav>li>a:hover { color: #fff; transition: color 1s; opacity:1.0; } .navbar-inverse .navbar-nav>li>a { color: #fff; opacity:0.8; } .carousel-inner > .item > img, .carousel-inner > .item > a > img { width: 70%; margin: auto; } /* Gallry */ div.img { border: 2px solid #ccc; } .img:hover { border:2px solid #e15616; transition: border 0.9s; cursor: pointer; } div.img img { width: 100%; height: auto; } div.desc { padding: 15px; text-align: center; } * { box-sizing: border-box; } .responsive { padding: 0 6px; float: left; width: 24.99999%; } .btn-success { background-color: #e15616; color: #fff; border:1px solid #e15616; } .btn-success:hover { box-shadow: 5px 5px 12px #eee; background-color:#fff; border:1px solid #e15616; color:#e15616; } @media only screen and (max-width: 700px) { .responsive { width: 49.99999%; margin: 6px 0; } } button.btn-info { background-color: #222; opacity: 0.8; } button.btn-info:hover { background-color:#fff; color:#000; border:1px solid #000; box-shadow: 2px 2px 10px #eee; } @media only screen and (max-width: 500px) { .responsive { width: 100%; } } .navbar-inverse, .navbar-inverse { border:none; background-color:#3A56F2; } a.carousel-control:hover { color:#e15616; transition: color 0.9s; } /* End Gallery */ h3.sub-name { color:#3a56f2; } input[type=text] { width: 140px; box-sizing: border-box; border: 2px solid #ccc; border-radius: 4px; font-size: 16px; background-color: white; background-image: url('searchicon.png'); background-position: 10px 10px; background-repeat: no-repeat; padding: 6px 35px; -webkit-transition: width 0.4s ease-in-out; transition: width 0.4s ease-in-out; } input[type=tex] { width: 130px; box-sizing: border-box; border: 2px solid #ccc; border-radius: 6px; font-size: 16px; background-color: white; background-image: url('searchicon.png'); background-position: 10px 10px; background-repeat: no-repeat; padding: 9px 35px; -webkit-transition: width 0.4s ease-in-out; transition: width 0.4s ease-in-out; } input[type=text]:focus { width: 100%; } input[type=tex]:focus { width: 30%; } .navbar-inverse .navbar-nav>.active>a, .navbar-inverse .navbar-nav>.active>a:focus, .navbar-inverse .navbar-nav>.active>a:hover { background-color:#fff; color:#3a56f2; } span.glyphicon-chevron-left,span.glyphicon-chevron-right { color:#3A56F2 } body { position: relative; } .affix { top:0; width: 100%; z-index: 9999 !important; } .navbar { margin-bottom: 0px; } .affix ~ .container-fluid { position: relative; top: 50px; } @media screen and (min-width: 668px) { ul.navbar-nav { display: none`; } } button.btn-default { border:1px solid #3A56F2; } button.btn-default:hover { background-color: #3A56F2; color: #fff; } button.btn-primary { background-color: #3A56F2; } button.btn-primary:hover` { background-color: #fff; border:1px solid #3A56F2; } #section1 {padding-top:50px;height:500px;color: #fff; background-color: #fff;} #section2 {padding-top:50px;height:500px;color: #fff; background-color: #673ab7;} #section3 {padding-top:50px;height:500px;color: #fff; background-color: #ff9800;} #section41 {padding-top:50px;height:500px;color: #fff; background-color: #00bcd4;} #section42 {padding-top:50px;height:500px;color: #fff; background-color: #009688;} /* My style */ /* Navigation bar*/ .navbar { border-radius: 0px; } .navbar-inverse .navbar-collapse, .navbar-inverse .navbar-form { letter-spacing: 3px; font-weight: bold; font-family: 'Fira Sans', sans-serif; } i.fa-arrow-circle-up { display:none; } /* slideshare */ .carousel-inner > .item > img, .carousel-inner > .item > a > img { width: 70%; margin: auto; }

Related: See More

Light Bootstrap Dashboard React
BS4 clean & simple invoice template
Responsive Invoice template
Elegant Bootstrap 4 message chat box template

Questions / Comments: