<html>
<head>
<title>How To Create A Basic Bootstrap IT Website</title>
<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=yes">
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="css/style.css" />
</head>
<body>
<div id="wrapper">
</div>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
</body>
</html>*{
margin-left:auto;
margin-right:auto;
}
.row{ margin:0px;}
body{
font-family:Arial, Helvetica, sans-serif;
background:#FFF;
margin:0px;
}
.clearfix{ clear:both;}
#wrapper{
width:1022px;
margin:0px auto;
background:#FFF;
border:1px solid #CCC;
}
.m10_0{ margin:10px auto;} .m20_0{ margin:20px auto;} .m30_0{ margin:30px auto;} .m40_0{ margin:40px auto;} .m50_0{ margin:50px auto;}
@media only screen and (min-width:320px) and (max-width:480px){ #wrapper{ width:375px;} }
@media only screen and (min-width:600px) and (max-width:768px){#wrapper{ width:768px;} }
<div class="row">
<div class="header-top" align="right">
<button type="button" class="header-top-btn" name="">Sign In</button>
<button type="button" class="header-top-btn" name="">Sign Up</button>
</div>
</div>.header-top{padding:5px 22px; background:#d85600; }
.header-top-btn{
background:#993d00; color:#FFF; padding:5px 15px; border-radius:2px; font-size:13px;
cursor:pointer; border:1px solid #993d00; text-decoration:none;
}
.header-top-btn:hover{background: #6B2727;color:#FFF;} 
<div class="row header-bottom">
<div class="col-lg-3 col-md-3 col-sm-3 col-xs-12" align="center">
<img src="images/Logo.png" width="160" height="108" />
</div>
<div class="col-lg-6 col-md-6 col-sm-5 col-xs-12">
<form action="" method="post">
<div class="input-group">
<input type="text" class="form-control search" placeholder="Search Here">
<span class="input-group-btn">
<button type="button" class="btn search_btn"><i class="glyphicon glyphicon-search"></i></button>
</span>
</div>
</form>
</div>
<div class="col-lg-3 col-md-3 col-sm-4 col-xs-12" align="center">
<div class="social-links">
<ul>
<li><a href="#!"><img src="images/fb.png" width="35" height="33"></a></li>
<li><a href="#!"><img src="images/tw.png" width="35" height="33"></a></li>
<li><a href="#!"><img src="images/in.png" width="35" height="33"></a></li>
</ul>
</div>
</div>
</div>.header-bottom{padding:10px 0; background:#fff0e5;}
.search{ padding:12px 15px; border-radius:2px; height:40px; margin-top:35px;}
.search_btn{ background:#d85600; color:#FFF; padding:12px 15px; border-radius:2px; margin-top:35px;}
.search_btn:active, .search_btn:focus, .search_btn:hover{ background:#6B2727; color:#FFF;}
.btn:focus{ outline:none !important;}
.social-links{float:left; padding-top:40px; padding-left:20px;}
.social-links ul{ list-style:none;}
.social-links ul li{ float:left; padding:0px 10px;}
@media only screen and (min-width:320px) and (max-width:480px){
.search{ margin-top:10px;}
.search_btn{ margin-top:10px;}
.social-links{padding-bottom:10px;}
}
@media only screen and (min-width:600px) and (max-width:768px){.social-links ul li{ padding:0px 7px;} }
<nav class="navbar navbar-default">
<div class="navbar-header">
<button type="button" data-target="#navbarCollapse" data-toggle="collapse" class="navbar-toggle">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<!--<a href="#" class="navbar-brand">LOGO</a>-->
</div>
<div id="navbarCollapse" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li><a href="#!">Home</a></li>
<li><a href="#!">About Us</a></li>
<li><a href="#!">Servises</a></li>
<li><a href="#!">Products</a></li>
<li><a href="#!">Gallery</a></li>
<li><a href="#!">Contact Us</a></li>
</ul>
</div>
</nav>.navbar-default{
border-radius:2px;
background:#CCC;
margin-bottom:0px;
}
.navbar-default ul{ padding:7px 0px 0px;}
.navbar-default .navbar-nav>li>a{
color:#000;
text-align:center;
padding:7px 47px;
font-size:14px;
font-weight:600;
text-transform:uppercase;
}
.navbar-default .navbar-nav>li>a:hover{ background:#d85600; color:#FFF; border-radius:2px;}
@media only screen and (min-width:600px) and (max-width:768px){
.navbar-default .navbar-nav>li>a{padding:7px 25px; }
}
<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="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<img src="images/banner.jpg" alt="Slider 1" style="width:100%;">
</div>
<div class="item">
<img src="images/banner.jpg" alt="Slider 2" style="width:100%;">
</div>
<div class="item">
<img src="images/banner.jpg" alt="Slider 3" style="width:100%;">
</div>
</div>
<!-- Left and right controls -->
<a class="left carousel-control" href="#myCarousel" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
<span class="sr-only">Next</span>
</a>
</div>
<div class="row">
<div class="col-md-12">
<div class="header-font">Lorem Ipsum</div>
<div class="header-font-border"></div>
<div class="content-text">
<p style="line-height:24px; color:#000; font-size:17px;" align="center">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's
standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a
type specimen book. It has survived not only five centuries
</p>
</div>
</div>
</div>
<div class="clearfix m50_0">
<div class="row" align="center">
<div class="col-lg-3 col-md-3 col-sm-3 col-xs-12">
<div class="row"><img src="images/icons/1.png" width="60" height="57"></div>
<div class="content-text">Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Lorem Ipsum has been the industry's...</div>
<div class="m10_0">
<a href="#!" class="btn header-top-btn">Read More</a>
</div>
</div>
<div class="col-lg-3 col-md-3 col-sm-3 col-xs-12">
<div class="row"><img src="images/icons/2.png" width="60" height="57"></div>
<div class="content-text">Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Lorem Ipsum has been the industry's...</div>
<div class="m10_0">
<a href="#!" class="btn header-top-btn">Read More</a>
</div>
</div>
<div class="col-lg-3 col-md-3 col-sm-3 col-xs-12">
<div class="row"><img src="images/icons/3.png" width="60" height="57"></div>
<div class="content-text">Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Lorem Ipsum has been the industry's...</div>
<div class="m10_0">
<a href="#!" class="btn header-top-btn">Read More</a>
</div>
</div>
<div class="col-lg-3 col-md-3 col-sm-3 col-xs-12">
<div class="row"><img src="images/icons/4.png" width="60" height="57"></div>
<div class="content-text">Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Lorem Ipsum has been the industry's...</div>
<div class="m10_0">
<a href="#!" class="btn header-top-btn">Read More</a>
</div>
</div>
</div>
</div>.header-font{ font-size:24px; color:#000; text-align:center; padding:20px 0px 5px; font-weight:600;}
.header-font-border{ border-bottom:2px solid #333; text-align:center; width:100px; margin-bottom:20px;}
.font-17{ font-size:17px; font-weight:600; color:#000; padding:10px 0px;}
.content-text{ width:93%; margin:10x auto !important; font-size:11pt; color:#666; line-height:24px;}
<div class="row testimonials">
<div class="header-font">Lorem Ipsum</div>
<div class="header-font-border"></div>
<div class="col-md-6 col-sm-12 col-xs-12">
<div class="row testimonials-parts">
<div class="col-md-4"><img src="images/user.png" width="144" height="139"></div>
<div class="col-md-8">
<p style="padding-top:18px;">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text...</p>
</div>
</div>
</div>
<div class="col-md-6 col-sm-12 col-xs-12">
<div class="row testimonials-parts">
<div class="col-md-4"><img src="images/user.png" width="144" height="139"></div>
<div class="col-md-8">
<p style="padding-top:18px;">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text...</p>
</div>
</div>
</div>
</div>.testimonials{ background:#EEE; padding:10px 0px 30px;}
.testimonials-parts{background:#fff0e5; color:#000; line-height:26px; font-size:17px; margin-top:30px;}
<div class="row">
<div class="header-font">Lorem Ipsum</div>
<div class="header-font-border"></div>
<div class="row m20_0">
<div class="our-clients-list" align="center">
<ul>
<li><a href="https://www.microsoft.com/en-in" target="_blank">
<img src="images/clients/client-1.png" width="160" height="70" />
</a></li>
<li><a href="https://www.google.co.in" target="_blank">
<img src="images/clients/client-2.png" width="160" height="70" />
</a></li>
<li><a href="https://www.amazon.in/" target="_blank">
<img src="images/clients/client-3.png" width="160" height="70" />
</a></li>
<li><a href="https://www.facebook.com/" target="_blank">
<img src="images/clients/client-4.png" width="160" height="70" />
</a></li>
<li><a href="https://www.oracle.com/in/index.html" target="_blank">
<img src="images/clients/client-5.png" width="160" height="70" />
</a></li>
</ul>
</div>
</div>
</div>.our-clients-list{ list-style:none; float:left;}
.our-clients-list ul{ list-style:none;}
.our-clients-list ul li{ float:left; padding:0px 16px;}
@media only screen and (min-width:320px) and (max-width:480px){.our-clients-list ul li{ float:left; padding:0px 22%;}}
<div class="row footer">
<div class="col-lg-5 col-md-5 col-sm-5 col-xs-12">
<div class="footer-heading">About Company</div>
<p align="justify" style="line-height:24px;">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text..Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
</div>
<div class="col-lg-7 col-md-7 col-sm-7 col-xs-12">
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
<div class="footer-heading">Company Links</div>
<div class="footer-right">
<ul>
<li><a href="#">Blog</a></li>
<li><a href="#">Careers</a></li>
<li><a href="#">Terms and Conditions</a></li>
<li><a href="#">Privacy Policy</a></li>
</ul>
</div>
</div>
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
<div class="footer-heading">Social Links</div>
<a href=""><img src="images/fb.png" width="35" height="33" /></a>
<a href=""><img src="images/tw.png" width="35" height="33" /></a>
<a href=""><img src="images/in.png" width="35" height="33" /></a>
</div>
</div>
<div class="clearfix"></div>
<div class="row footer_bottom">
<div class="col-md-9">
© Copy 2018. All rights reserved by Free Time Learning (<a href="http://www.freetimelearning.com" class="footer-link" target="_blank">www.freetimelearning.com</a>)
</div>
<div class="col-md-3" align="right">
Designed By - <a href="http://www.freetimelearning.com" class="footer-link" target="_blank">F T L</a>
</div>
</div>
</div>.footer{color:#FFF; background:#d85600; padding:20px 0px 10px; margin-top:20px;}
.footer-heading{ font-size:16px; font-weight:600; padding:5px 0px 15px;}
.footer-right{padding:0px 2px; margin-top:-7px;}
.footer-right ul{ list-style:none; padding:0px;}
.footer-right ul li{ font-size:14px; padding:5px 0px;}
.footer-right ul li a{ text-decoration:none; color:#FFF;}
.footer-right ul li a:hover{ color:#999;}
.footer_bottom{ color:#FFF;}
.footer_bottom a{ color:#FFF; text-decoration:none;}
.footer_bottom a:hover{ color:#CCC;}