Reference Websites
Create A Bootstrap Basic IT Website
  Start Coding
 Step 1 : Basic HTML Structure
  HTML Code
<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>
  CSS Code
*{
	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;} }
 Step 2 : Header Top
Responsive Website
  HTML Code
<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>
  CSS Code
.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;}	
 Step 3 : Header Bottom
Responsive Website
  HTML Code
<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>
  CSS Code
.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;} }
 Step 4 : Menu
Responsive Website
  HTML Code
<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>
  CSS Code
.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; }
	}
 Step 5 : Slider
Responsive Website
  HTML Code
<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>
 Step 6 : Content
Responsive Website
  HTML Code
<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>
  CSS Code
.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;}
 Step 7 : Testimonials
Responsive Website
  HTML Code
<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>
  CSS Code
.testimonials{ background:#EEE; padding:10px 0px 30px;}
.testimonials-parts{background:#fff0e5; color:#000; line-height:26px; font-size:17px; margin-top:30px;}
 Step 8 : Our Clients
Responsive Website
  HTML Code
<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>
  CSS Code
.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%;}}
 Step 9 : Footer
Responsive Website
  HTML Code
<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>
            &nbsp; <a href=""><img src="images/fb.png" width="35" height="33" /></a> &nbsp; &nbsp;
            <a href=""><img src="images/tw.png" width="35" height="33" /></a> &nbsp; &nbsp;
            <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; Copy 2018.  All rights reserved by  Free Time Learning &nbsp; (<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>
  CSS Code
.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;}