Design with twitter Bootstrap

Last updated on January 9th, 2020 at 12:38 pm

Twitter Bootstrap is the most popular and free front-end development framework. Bootstrap is really very interesting and help web designers to create website very easily and provide lots of feature. Bootstrap is fully loaded with latest features of HTML, CSS and Javascript and make your website more responsive.

Live Demo

What is Bootstrap?

Twitter Bootstrap is a css framework to design full responsive websites and web applications. Bootstrap is easy to learn and it require basic knowledge of css and html. Twitter Bootstrap has already written a CSS style sheet for you, and have inbuilt jQuery support and also has some popular JavaScript tools.

In this tut i will explain you that how you can use twitter bootstrap and create a responsive layout for your website or web applications.

Getting Started

To start using bootstrap you need to get your bootstrap from official website http://getbootstrap.com/. You can also use Bootstrap CDN if you like to use

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">

<!-- Optional theme -->
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap-theme.min.css">

<!-- Latest compiled and minified JavaScript -->
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>

Now Let get start creating or first template using bootstrap. Unzip your downloaded bootstrap file it contain both minimized and non minimized version. We will use the minimized version for making the site faster when the design has been finalized and the project is ready for the launch. Create new html file to make design using bootstrap. Now i am going to use Bootstrap CDN to import css to my html file.

First we create simple html structure in our html file

<html>
<head>
	<title>Welcome Bootstrap at trinity tuts canyon</title>
	<!-- Latest compiled and minified CSS -->
	<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
	<!-- Optional theme -->
	<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap-theme.min.css">
</head>

<body>
<div>
............. Main Content Goes Here .............
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
</body>
</html>

Now in this we are going to create a simple layout for our website which contain Header, Navigation Bar, A place for Gallery, Main content, Side bar and Footer.

Now First we can create a Header section in our template. In header section we can add our navigation by default twitter bootstrap have two class which contain header bar color

1. { .navbar-default } to display light background.

2. { .navbar-inverse } to display black background.

you also add your own background color if you like. Now if we want to align our navigation bar in the center we can use {.container} class in side our navigation bar. Inside container we use some predefined twitter bootstrap classes to create our navigation menu and i also add button in header section to display responsive menu on small devices.

Bootstrap Header:

<div class="header">
	<div class="navbar navbar-inverse navbar-fixed-top">
		<div class="container">
			<!-- Add your navigation -->
			<div class="navbar-header">
				<!-- Button for responsive menu //-->
				<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
					<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"><img src="http://trinityblog.in/view/images/logo.png?id=1371823334" height="42"></a>
			</div>
			<div class="collapse navbar-collapse">
				<ul class="nav navbar-nav">
					<li class="active"><a href="#">Home</a></li>
					<li><a href="#about">About</a></li>
					<li><a href="#contact">Contact</a></li>
				</ul>
			</div>
		</div>
	</div>
</div>

I also rewrite and add some new classes in the header to make new look for my header

<html>
<head>
	<title>Hello First bootstrap</title>
	<!-- Latest compiled and minified CSS -->
	<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
	<!-- Optional theme -->
	<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap-theme.min.css">
	<style>
		.header{
			display: block;
			position: relative;
		}
		.navbar-brand img{
			position: relative;
			top: -10px;
		}
		.bluebg{
			color: #fff;
			background-color: #55acee;
			background-image: linear-gradient(rgba(0,0,0,0),rgba(0,0,0,0.05));
			-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#00000000, endColorstr=#0C000000)";
			border: 1px solid #3b88c3;
			box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
		}
		.navbar-inverse .navbar-nav>.active>a{
			background-color: #55acee;
			background-image: linear-gradient(rgba(0,0,0,0),rgba(0,0,0,0.15));
			-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#00000000, endColorstr=#26000000)";
			border-color: #3b88c3;
		}
		.navbar-inverse .navbar-nav>.active>a:hover{
			background-color: #3299E7;
		}
		.navbar-inverse .navbar-nav>li>a{
			color: #f7f7f7;
		}
		.navbar-inverse .navbar-collapse, .navbar-inverse .navbar-form{
			border-color: #197CC7;
		}
		.navbar-inverse .navbar-toggle{
			border-color: #237ABD;
		}
		.navbar-inverse .navbar-toggle:hover, .navbar-inverse .navbar-toggle:focus{
			background-color: #1A8DC4;
		}
	</style>
</head>

<body>
<div class="header">
	<div class="navbar navbar-inverse navbar-fixed-top bluebg">
		<div class="container">
			<!-- Add your navigation -->
			<div class="navbar-header">
				<!-- Button for responsive menu //-->
				<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
					<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"><img src="http://trinityblog.in/view/images/logo.png?id=1371823334" height="42"></a>
			</div>
			<div class="collapse navbar-collapse">
				<ul class="nav navbar-nav">
					<li class="active"><a href="http://trinityblog.in/canyon">Home</a></li>
					<li><a href="https://plus.google.com/+anehthakur?rel=author">Author</a></li>
					<li><a href="http://demo.trinityblog.in/">Demo</a></li>
					<li><a href="http://feeds.feedburner.com/trinitytuts">Rss Feed</a></li>
				</ul>
			</div>
		</div>
	</div>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
</body>
</html>

Now i add gallery slider to my bootstrap template i am using default bootstrap gallery plugin you need to add some line of css and html for that for more take a look at the sample here.

<html>
<head>
	<title>Hello First bootstrap</title>
	<!-- Latest compiled and minified CSS -->
	<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
	<!-- Optional theme -->
	<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap-theme.min.css">
	<style>
		.header{
			display: block;
			position: relative;
		}
		.navbar-brand img{
			position: relative;
			top: -10px;
		}
		.bluebg{
			color: #fff;
			background-color: #55acee;
			background-image: linear-gradient(rgba(0,0,0,0),rgba(0,0,0,0.05));
			-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#00000000, endColorstr=#0C000000)";
			border: 1px solid #3b88c3;
			box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
		}
		.navbar-inverse .navbar-nav>.active>a{
			background-color: #55acee;
			background-image: linear-gradient(rgba(0,0,0,0),rgba(0,0,0,0.15));
			-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#00000000, endColorstr=#26000000)";
			border-color: #3b88c3;
		}
		.navbar-inverse .navbar-nav>.active>a:hover{
			background-color: #3299E7;
		}
		.navbar-inverse .navbar-nav>li>a{
			color: #f7f7f7;
		}
		.navbar-inverse .navbar-collapse, .navbar-inverse .navbar-form{
			border-color: #197CC7;
		}
		.navbar-inverse .navbar-toggle{
			border-color: #237ABD;
		}
		.navbar-inverse .navbar-toggle:hover, .navbar-inverse .navbar-toggle:focus{
			background-color: #1A8DC4;
		}
		/* CUSTOMIZE THE CAROUSEL  { Style for Slyder }
 		-------------------------------------------------- */

		/* Carousel base class */
		.carousel {
		  height: 500px;
		  margin-bottom: 60px;
		}
		/* Since positioning the image, we need to help out the caption */
		.carousel-caption {
		  z-index: 10;
		}

		/* Declare heights because of positioning of img element */
		.carousel .item {
		  height: 500px;
		  background-color: #777;
		}
		.carousel-inner > .item > img {
		  position: absolute;
		  top: 0;
		  left: 0;
		  min-width: 100%;
		  height: 500px;
		}

		/* MARKETING CONTENT
		-------------------------------------------------- */

		/* Pad the edges of the mobile views a bit */
		.marketing {
		  padding-right: 15px;
		  padding-left: 15px;
		}

		/* Center align the text within the three columns below the carousel */
		.marketing .col-lg-4 {
		  margin-bottom: 20px;
		  text-align: center;
		}
		.marketing h2 {
		  font-weight: normal;
		}
		.marketing .col-lg-4 p {
		  margin-right: 10px;
		  margin-left: 10px;
		}

		/* Featurettes
		------------------------- */

		.featurette-divider {
		  margin: 80px 0; /* Space out the Bootstrap <hr> more */
		}

		/* Thin out the marketing headings */
		.featurette-heading {
		  font-weight: 300;
		  line-height: 1;
		  letter-spacing: -1px;
		}

		/* RESPONSIVE CSS
		-------------------------------------------------- */

		@media (min-width: 768px) {

		  /* Remove the edge padding needed for mobile */
		  .marketing {
			padding-right: 0;
			padding-left: 0;
		  }

		  /* Navbar positioning foo */
		  .navbar-wrapper {
			margin-top: 20px;
		  }
		  .navbar-wrapper .container {
			padding-right: 15px;
			padding-left:  15px;
		  }
		  .navbar-wrapper .navbar {
			padding-right: 0;
			padding-left:  0;
		  }

		  /* The navbar becomes detached from the top, so we round the corners */
		  .navbar-wrapper .navbar {
			border-radius: 4px;
		  }

		  /* Bump up size of carousel content */
		  .carousel-caption p {
			margin-bottom: 20px;
			font-size: 21px;
			line-height: 1.4;
		  }

		  .featurette-heading {
			font-size: 50px;
		  }
		}

		@media (min-width: 992px) {
		  .featurette-heading {
			margin-top: 120px;
		  }
		}
	</style>
</head>

<body>
<div class="header">
	<div class="navbar navbar-inverse navbar-fixed-top bluebg">
		<div class="container">
			<!-- Add your navigation -->
			<div class="navbar-header">
				<!-- Button for responsive menu //-->
				<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
					<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"><img src="http://trinityblog.in/view/images/logo.png?id=1371823334" height="42"></a>
			</div>
			<div class="collapse navbar-collapse">
				<ul class="nav navbar-nav">
					<li class="active"><a href="http://trinityblog.in/canyon">Home</a></li>
					<li><a href="https://plus.google.com/+anehthakur?rel=author">Author</a></li>
					<li><a href="http://demo.trinityblog.in/">Demo</a></li>
					<li><a href="http://feeds.feedburner.com/trinitytuts">Rss Feed</a></li>
					<li><a href="http://demo.trinityblog.in/bootstrap/bootstrap-gallery.php">Bootstrap Slider</a></li>
				</ul>
			</div>
		</div>
	</div>
</div>
<!-- Bootstrap Slider -->
	<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" class=""></li>
      </ol>
      <div class="carousel-inner">
        <div class="item active">
          <img data-src="holder.js/900x500/auto/#777:#7a7a7a/text:First slide" alt="First slide" src="http://trinitytuts.com/wp-content/uploads/2014/03/DSC_0478.jpg">
          <div class="container">
            <div class="carousel-caption">
              <h1>Aneh Thakur</h1>
              <p>Love Think Code!!</p>
              <p><a class="btn btn-lg btn-primary" href="https://plus.google.com/+TrinityblogIn" role="button">Follow us</a></p>
            </div>
          </div>
        </div>
        <div class="item ">
          <img data-src="holder.js/900x500/auto/#666:#6a6a6a/text:Second slide" alt="Second slide" src="http://trinitytuts.com/wp-content/uploads/2014/03/slider-bg-2.jpg">
          <div class="container">
            <div class="carousel-caption">
              <h1>Trinity Tuts Canyon</h1>
              <p>Learn create and Share with World!!</p>
              <p><a class="btn btn-lg btn-primary" href="http://trinitytuts.com/" role="button">Learn & Create</a></p>
            </div>
          </div>
        </div>
      </div>
      <a class="left carousel-control" href="#myCarousel" data-slide="prev"><span class="glyphicon glyphicon-chevron-left"></span></a>
      <a class="right carousel-control" href="#myCarousel" data-slide="next"><span class="glyphicon glyphicon-chevron-right"></span></a>
    </div>
<!-- Bootstrap Slider End -->
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>

</body>
</html>

After adding gallery we create two box one for description and other for banner, image etc. I am using bootstrap {.featurette} class to do this you can check out live demo from above demo link. Stay tuned to know more about bootstrap.

Thanku.

Happy coading.

Design with twitter Bootstrap

What is Bootstrap?

Getting Started

Quick Links

ABOUT

Subscribe to Blog via Email

What is Bootstrap?

Getting Started

Share this:

Quick Links

ABOUT

Subscribe to Blog via Email