Wednesday, July 29, 2015

Bootstrap Tutorial For Beginners 9 - Creating Multi Column Layout









<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, 
initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the 
head; any other head content must come 
*after* these tags -->
    <title>ProgrammingKnowledge</title>

    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link href="css/custom.css" rel="stylesheet">
  </head>
  <body>
   <nav class="navbar navbar-default navbar-fixed-top">
  <div class="container">
   <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 class="navbar-brand" href="www.EasyOnlineConverter.com">ProgrammingKnowledge</a>
   <div class="navbar-collapse collapse">
    <ul class="nav navbar-nav navbar-right">
 <li class="active"><a href="#" > Home </a></li> 
 <li><a href="#">About</a></li>
      <li class="dropdown">  
    <a href="#" class="dropdown-toggle" 
       data-toggle="dropdown">Learn <b 
class="caret"></b>
      <ul class="dropdown-menu">
   <li class="dropdown-header">Examples</li>
    <li><a href="#">C++</a></li>
       <li><a href="#">Java</a></li>
    <li class="divider"></li>
    <li class="dropdown-header">Tutorials</li>
    <li><a href="#">C++</a></li>
       <li><a href="#">Java</a></li>
   </ul>
     </li>   
 </ul>
   </div>
  </div>
</nav>

<div class="container">

<div class="jumbotron text-center">
<h1>Hello World !!!</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
Nunc suscipit convallis nisl, eget rutrum lectus commodo at. 
Pellentesque mattis justo vel augue pretium euismod. Interdum 
et malesuada fames ac ante ipsum primis in faucibus. Fusce eu 
turpis eros.</p>
<button type=button class="btn btn-primary">Click me</button>
<button type=button class="btn btn-success"> thank you</button>
</div>
<div class="row">
<div class="col-sm-4">
<h3>Head 1</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
Nunc suscipit convallis nisl, eget rutrum lectus commodo at. 
Pellentesque mattis justo vel augue pretium euismod. Interdum 
et malesuada fames ac ante ipsum primis in faucibus. Fusce eu 
turpis eros.</p>

<button type=button class="btn btn-danger"> thank you</button>
</div>
<div class="col-sm-4">
<h3>Head 2</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
Nunc suscipit convallis nisl, eget rutrum lectus commodo at. 
Pellentesque mattis justo vel augue pretium euismod. Interdum 
et malesuada fames ac ante ipsum primis in faucibus. Fusce eu 
turpis eros.</p>
<button type=button class="btn btn-danger"> thank you</button>
</div>
<div class="col-sm-4">
<h3>Head 3</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
Nunc suscipit convallis nisl, eget rutrum lectus commodo at. 
Pellentesque mattis justo vel augue pretium euismod. Interdum 
et malesuada fames ac ante ipsum primis in faucibus. Fusce eu 
turpis eros.</p>
<button type=button class="btn btn-danger"> thank you</button>
</div>
</div>
</div>

<!-- Fixed footer -->
<div class="navbar navbar-inverse navbar-fixed-bottom">
<div class="container">
<div class="navbar-text pull-left">
<p>copyright ProgrammingKnowledge 2015</p>
</div>
</div>
</div>

    <!-- jQuery (necessary for Bootstrap's JavaScript 
plugins) -->
    <script src="
https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery
.min.js"></script>
    <!-- Include all compiled plugins (below), or include 
individual files as needed -->
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>












Understanding the Bootstrap 3 Grid System

Searches related to bootstrap column

bootstrap column height

bootstrap table

bootstrap navbar

bootstrap column no padding

bootstrap column ordering

bootstrap column spacing

bootstrap column height 100

bootstrap column center

No comments:

Post a Comment