HTML Tutorial

Bootstrap Templates

Bootstrap Tutorial » Bootstrap Templates

Bootstrap has become one of the most widely used 'front-end' frameworks on the market, with a large community of developers.
Bootstrap offers different templates with which we can start our designs quickly and then we can add more elements.

Below, we present some free Bootstrap Templates where you can download and modify the code as you wish

BS Template for website - example

BS Template for website with three columns, head and footer, themes for webaplication

Example:

<!DOCTYPE html>

  <html lang="en">

  <head>

  <title>Bootstrap webpage with three columns, head and footer Example</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.4.1/css/bootstrap.min.css">

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>

  <style>

  /* Remove the navbar's default margin-bottom and rounded borders */ 

  .navbar {

  margin-bottom: 0;

  border-radius: 0;

  }

  

  /* Set height of the grid so .sidenav can be 100% (adjust as needed) */

  .row.content {height: 450px}

  

  /* Set gray background color and 100% height */

  .sidenav {

  padding-top: 20px;

  background-color: #f1f1f1;

  height: 100%;

  }

  

  /* Set black background color, white text and some padding */

  footer {

  background-color: #555;

  color: white;

  padding: 15px;

  }

  

  /* On small screens, set height to 'auto' for sidenav and grid */

  @media screen and (max-width: 767px) {

  .sidenav {

  height: auto;

  padding: 15px;

  }

  .row.content {height:auto;} 

  }

  </style>

  </head>

  <body>
<nav class="navbar navbar-inverse">

  <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>

  <a class="navbar-brand" href="#">Logo</a>

  </div>

  <div class="collapse navbar-collapse" id="myNavbar">

  <ul class="nav navbar-nav">

  <li class="active"><a href="#">Home</a></li>

  <li><a href="#">About</a></li>

  <li><a href="#">Projects</a></li>

  <li><a href="#">Contact</a></li>

  </ul>

  <ul class="nav navbar-nav navbar-right">

  <li><a href="#"><span class="glyphicon glyphicon-log-in"></span> Login</a></li>

  </ul>

  </div>

  </div>

  </nav>

  

  <div class="container-fluid text-center"> 

  <div class="row content">

  <div class="col-sm-2 sidenav">

  <p><a href="#">Link</a></p>

  <p><a href="#">Link</a></p>

  <p><a href="#">Link</a></p>

  </div>

  <div class="col-sm-8 text-left"> 

  <h1>Welcome</h1>

  <p>The best Bootstrap templates that you will ever find shared for free. Mainly based on Bootstrap 4 to get the most out of your website or upcoming project</p>

  <p>This year starts fascinating us with even more web design trends which were implemented in the uncountably many website templates based on Bootstrap 4</p>

  <hr>

  <h3>Test</h3>

  <p>Bootstrap templates is a library of free themes. Download a free bootstrap template to build a landing page, SAAS, admin, presentation, or E-commerce theme.</p>

  </div>

  <div class="col-sm-2 sidenav">

  <div class="well">

  <p>ADS</p>

  </div>

  <div class="well">

  <p>ADS</p>

  </div>

  </div>

  </div>

  </div>
<footer class="container-fluid text-center">

  <p>Footer Your Text</p>

  </footer>
</body>

  </html>

Bootstrap Template Marketing - example

BS themes free simple shop - example

Need to add sections or whole elements to your website? The best Bootstrap templates will help you do that. We present the top ones to use.

Example:

<!DOCTYPE html>

  <html lang="en">

  <head>

  <title>Bootstrap Marketing Example</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.4.1/css/bootstrap.min.css">

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>

  <style>

  /* Remove the navbar's default margin-bottom and rounded borders */ 

  .navbar {

  margin-bottom: 0;

  border-radius: 0;

  }

  

  /* Add a gray background color and some padding to the footer */

  footer {

  background-color: #f2f2f2;

  padding: 25px;

  }

  

  .carousel-inner img {

  width: 100%; /* Set width to 100% */

  margin: auto;

  min-height:200px;

  }
 /* Hide the carousel text when the screen is less than 600 pixels wide */

  @media (max-width: 600px) {

  .carousel-caption {

  display: none; 

  }

  }

  </style>

  </head>

  <body>
<nav class="navbar navbar-inverse">

  <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>

  <a class="navbar-brand" href="#">Your Logo</a>

  </div>

  <div class="collapse navbar-collapse" id="myNavbar">

  <ul class="nav navbar-nav">

  <li class="active"><a href="#">Home</a></li>

  <li><a href="#">About</a></li>

  <li><a href="#">Projects</a></li>

  <li><a href="#">Contact</a></li>

  </ul>

  <ul class="nav navbar-nav navbar-right">

  <li><a href="#"><span class="glyphicon glyphicon-log-in"></span> Login</a></li>

  </ul>

  </div>

  </div>

  </nav>
<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>

  </ol>
 <!-- Wrapper for slides -->

  <div class="carousel-inner" role="listbox">

  <div class="item active">

  <img src="https://placehold.it/1200x400?text=IMAGE" alt="Image">

  <div class="carousel-caption">

  <h3>Your account to Sell $</h3>

  <p>Making Money from selling your goods.</p>

  </div> 

  </div>
 <div class="item">

  <img src="https://placehold.it/1200x400?text=Another Image Maybe" alt="Image">

  <div class="carousel-caption">

  <h3>More Your account to Sell $</h3>

  <p>Making Money from selling your goods.</p>

  </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 page</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 page</span>

  </a>

  </div>

  

  <div class="container text-center"> 

  <h3>What We Do</h3><br>

  <div class="row">

  <div class="col-sm-4">

  <img src="https://placehold.it/150x80?text=IMAGE" class="img-responsive" style="width:100%" alt="Image">

  <p>Your Current Project</p>

  </div>

  <div class="col-sm-4"> 

  <img src="https://placehold.it/150x80?text=IMAGE" class="img-responsive" style="width:100%" alt="Image">

  <p>Your product to sell</p> 

  </div>

  <div class="col-sm-4">

  <div class="well">

  <p>Your product to sell text..</p>

  </div>

  <div class="well">

  <p>Your product to sell text..</p>

  </div>

  </div>

  </div>

  </div><br>
<footer class="container-fluid text-center">

  <p>Footer Text</p>

  </footer>
</body>

  </html>

bootstrap templates free simple, for website, free download for web aplication, login page, asp.net themes free, simple, shop

bootstrap templates free simple, for website, free download for web aplication, login page, asp.net themes free, simple, shop
Bootstrap Templates - bootstrap

Online Editor

ONLINE EDITOR

news templates

COLOR PICKER

news templates

This tool makes it easy to create, adjust, and experiment with custom colors for the web.

HTML Templates

Magnews2 is a modern and creative free magazine and news website template that will help you kick off your online project in style.

CSS HTML Layout

Find here examples of creative and unique website layouts.

Free CSS HTML Menu

Find here examples of creative and unique website CSS HTML menu.