Reference Websites
Create A Bootstrap Interior Design Website
  Start Coding
 Step 1 : Basic HTML Structure
  HTML Code
<html>
<head>
<title>How To Create A Basic Bootstrap Interior Design Website - Free Time Learning</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" />
<link rel="stylesheet" type="text/css" href="css/font-awesome.min.css" />
</head>

<body>

<div class="container-fluid">
     <div class="main_shadow">


     </div>
</div>

<script type="text/javascript" src="http://www.freetimelearning.com/js/jquery-1.11.3.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;
	}
.main_shadow{
	-webkit-box-shadow: 0 6px 10px 0 rgba(0, 0, 0, 0.14), 0 1px 18px 0 rgba(0, 0, 0, 0.12), 0 3px 5px -1px rgba(0, 0, 0, 0.3) !important; 
	box-shadow: 0 6px 10px 0 rgba(0, 0, 0, 0.14), 0 1px 18px 0 rgba(0, 0, 0, 0.12), 0 3px 5px -1px rgba(0, 0, 0, 0.3) !important;
	margin-bottom:20px;
	}
.clearfix{ clear:both;}
.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;}
 Step 2 : Header
Responsive Website
  HTML Code
<nav class="navbar navbar-inverse">
    <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="http://freetimelearning.com" target="_blank">Home</a></li>
          <li><a href="#!">About Us</a></li>
          <li><a href="#!">Services</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-brand {
    float: left;
    height: 65px;
    padding: 5px 15px;
    font-size: 18px;
    line-height: 20px;
}
.navbar-inverse{ 
	border-radius:2px; 
	background:#000; 
	margin-bottom:0px; 
	border:none !important;
}
.navbar-inverse ul{ padding:9px 0px 5px;}
.navbar-inverse .navbar-nav>li>a{ 
	color:#FFF; 
	padding:7px 25px; 
	font-size:14px;
	text-transform:uppercase;
}
.navbar-inverse .navbar-nav>.open>a, .navbar-inverse .navbar-nav>.open>a:focus, .navbar-inverse .navbar-nav>.open>a:hover{
	color:#CCC;
	}
@media only screen and (min-width:600px) and (max-width:768px){
	.navbar-inverse .navbar-nav>li>a{padding:7px 15px; font-size:11px; }
	}
@media only screen and (min-width:1025px) and (max-width:1280px){
	.navbar-inverse .navbar-nav>li>a{ padding:7px 21px; }
   }
@media only screen and (min-width:960px) and (max-width:1024px){
	.navbar-inverse .navbar-nav>li>a{ padding:7px 10px; }
   }
 Step 3 : Menu Bar
Responsive Website
  HTML Code
<div class="row main_header">
	<div class="col-md-4 col-sm-4 col-xs-12 logo" align="center">
    	<a href="http://www.freetimelearning.com/" target="_blank"><img src="images/logo.png" class="img-responsive" alt="Logo"></a></div>
    <div class="col-md-4 col-sm-5 col-xs-12">
    	<div class="header-center">
            <p>CALL US : <span class="green"><a href="#">(+91)9963XXXX68</a></span></p>
            <p>EMAIL ID : <span class="green"><a href="mailto:freetimelearn@gmail.com">freetimelearn@gmail.com</a></span></p>
        </div>
    </div>
    <div class="col-md-4 col-sm-3 col-xs-12 hidden-xs">
    	<div class="header-right pull-right">
        	<button type="submit" name="submit" class="black-btn">CALL US NOW</button>
        </div>
    </div>
</div>
  CSS Code
.header-center{padding:20px 20px 0px 80px; color:#000; text-decoration:none; font-size:16px; font-weight:600;}
.header-right{ padding:25px 30px 0px 0px;}
.black-btn{ padding:8px 30px; background:#000; color:#FFF; border-radius:2px; border:#000 1px solid; cursor:pointer;} 
.black-btn:hover{ background:#333; text-decoration:none;}
.green{ color:#72ac00; text-decoration:none;} .green a{ color:#72ac00; text-decoration:none;} .green a:hover{ color:#4E9B00;}
@media only screen and (min-width:600px) and (max-width:768px){
	.logo{ padding-top:10px;}
	.header-center{padding:5px 10px 0px; font-size:14px;}
	.header-right{ padding:12px 10px 0px 0px;}
	.black-btn{ padding:8px 15px;}
	}
@media only screen and (min-width:320px) and (max-width:480px){
	.header-center{padding:5px 10px 0px; font-size:14px; text-align:center;}
	}
 Step 4 : Banner (or) Slider
Responsive Website
  HTML Code
<div class="row">
	<div class="slider">
        <div class="slider-h3">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</div>
        <div class="p30_0" align="center"><a href="#" class="btn">Click Here!</a></div>
    </div>
</div>
  CSS Code
.slider{background:url(../images/slider.png); height:450px;}
.slider-h3{ font-size:30px; padding:220px 0px 10px; color:#000; text-align:center; text-shadow:1px 0.5px #CCC;}
.btn{ background:#72ac00; color:#FFF; padding:6px 20px; font-size:16px; 
text-decoration:none; border-radius:3px; text-shadow:none;}
.btn:hover{ background:#4E9B00; color:#FFF;}
@media only screen and (min-width:320px) and (max-width:480px){
.slider{background:url(../images/slider.png); height:250px;} 
.slider-h3{ font-size:22px; padding:40px 0px 20px 30px; color:#FFF;} 
}
 Step 5 : Content
Responsive Website
  HTML Code
<div class="row">
     
     <div class="content-h1">Design Experts</div>
     <div class="content-h4">BRINGING BEAUTY To YOUR WORLD</div>
     
     <div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">
     	<div align="center"><img src="images/icon-1.png" class="img-responsive" alt=""></div>
        <div class="content-parts-h4">Lorem Ipsum</div>
        <div class="content-parts-p">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 1500.</div>
     </div>
     <div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">
     	<div align="center"><img src="images/icon-2.png" class="img-responsive" alt=""></div>
        <div class="content-parts-h4">Lorem Ipsum</div>
        <div class="content-parts-p">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 1500.</div>
     </div>
     <div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">
     	<div align="center"><img src="images/icon-3.png" class="img-responsive" alt=""></div>
        <div class="content-parts-h4">Lorem Ipsum</div>
        <div class="content-parts-p">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 1500.</div>
     </div>
     <div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">
     	<div align="center"><img src="images/icon-4.png" class="img-responsive" alt=""></div>
        <div class="content-parts-h4">Lorem Ipsum</div>
        <div class="content-parts-p">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 1500.</div>
     </div>
     
</div>
  CSS Code
.content-h1{ font-size:60px; text-align:center !important; padding:30px 0px 5px; color:#000; text-transform:uppercase;}
.content-h4{ font-size:22px; text-align:center !important; padding:0px 0px 35px; color:#000; text-transform:uppercase;}
.content-parts-h4{ font-size:20px; text-transform:uppercase; color:#72ac00; text-align:center; padding:15px 0px; font-weight:500;}
.content-parts-p{ color:#000; line-height:26px; padding:5px 20px; text-align:justify;}
@media only screen and (min-width:320px) and (max-width:480px){.content-h1{ font-size:30px;}}
 Step 6 : Content Bottom
Responsive Website
  HTML Code
<div class="row">
    <div class="content-bottom">
        <div class="col-lg-4 col-md-4 col-sm-4 col-xs-12 content-bottom-parts"><img src="images/aboutus.png" class="img-responsive" alt=""></div>
        <div class="col-lg-4 col-md-4 col-sm-4 col-xs-12 content-bottom-parts"><img src="images/services.png" class="img-responsive" alt=""></div>
        <div class="col-lg-4 col-md-4 col-sm-4 col-xs-12 content-bottom-parts"><img src="images/estimates.png" class="img-responsive" alt=""></div>
        <div class="clearfix"></div>
        <div class="content-bottom-parts-h3">Top Most Interior Designs</div>
        <div class="content-bottom-parts-p">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, but also 
        the leap into electronic typesetting, remaining essentially unchanged.</div>
        <div class="p50_0" align="center">
            <a href="#!" class="content-bottom-btn">3D Projects</a>&nbsp;<a href="#!" class="content-bottom-btn">New  Projects</a>
        </div>
    </div>
</div>
  CSS Code
.content-bottom{ padding:50px; background:#F3F3F3;}
.content-bottom-parts{ padding:20px 0px 60px;}
.content-bottom-parts-h3{ font-size:30px; text-align:center; color:#72ac00; text-transform:uppercase; padding:20px 0px;}
.content-bottom-parts-p{ color:#000; line-height:26px; padding:5px 50px; text-align:center; font-size:16px;}
.p50_0{ padding:50px 0px;}
.content-bottom-btn{ background:#72ac00; color:#FFF; padding:10px 100px; font-size:16px; 
text-decoration:none; margin:50px;}
.content-bottom-btn:hover{ background:#4E9B00;}
@media only screen and (min-width:600px) and (max-width:768px){.content-bottom-btn{ padding:10px 30px;}}
@media only screen and (min-width:320px) and (max-width:480px){
	.content-bottom{ padding:50px 20px;}
	.content-bottom-parts-h3{ font-size:18px;}
	.content-bottom-parts-p{ color:#000; line-height:26px; padding:5px; text-align:justify;}
	.content-bottom-btn{ padding:10px 15px; margin:5px;}
	.p50_0{ padding:30px 0px;}
}
 Step 7 : Footer
Responsive Website
  HTML Code
<div class="row">
	<div class="footer">
    	<div class="col-lg-7 col-md-7 col-sm-6 col-xs-12">
            <div class="footer-left">
                <ul>
                    <li><a href="#!">Home</a></li>
                    <li><a href="#!">About Us</a></li>
                    <li><a href="#!">Blog</a></li>
                    <li><a href="#!">Services</a></li>
                    <li><a href="#!">Contact Us</a></li>
                </ul>
            </div>
        </div>
        <div class="col-lg-5 col-md-5 col-sm-6 col-xs-12">
            <div class="footer-right">
                <div class="footer-right-p">
                &copy; <script language="javascript" type="text/javascript">document.write(new Date().getFullYear());</script>. All rights reserved by <a href="http://www.freetimelearning.com" target="_blank" class="green">Free Time Learning.</a>
                </div>
            </div>
        </div>
    </div>
</div>
  CSS Code
.footer{background:url(../images/footer.jpg) no-repeat; padding:90px 50px 60px; height:65px;}
.footer-left{padding:0px 0px;}
.footer-left ul{ list-style:none; padding:0px;}
.footer-left ul li{ padding:0px; float:left;}
.footer-left ul li a{ color:#000; padding:0px 20px; font-size:13px; text-decoration:none;}
.footer-left ul li a:hover{ color:#666;}
.footer-right{padding:0px 0px;}
.footer-right-p{ font-size:13px; color:#000; padding:10px 0px 15px; text-align:right;}
@media only screen and (min-width:600px) and (max-width:768px){
	.footer{padding:30px 10px 60px; background:#FFF;}
	.footer-left ul li a{ color:#000; padding:0px 10px;}
}
@media only screen and (min-width:320px) and (max-width:480px){
	.footer{padding:10px 10px 30px; background:#FFF; text-align:center;}	
	.footer-left ul li a{ color:#000; padding:0px 5px;}
}

We see you’re using an ad blocker.

Our website is made possible by displaying ads to our visitors.

Please help us continue to provide you with free. So please disabling your ad blocker.