My First webpage using Bootstrap Framework

Bootstrap webpage

In this post, you will learn to create your first webpage using the Bootstrap Framework. Bootstrap framework is a responsive framework. It automatically adjusts the site’s layout according to the device in which it is viewed. Responsiveness is given highest priority nowadays. This webpage using Bootstrap Framework uses basic components. Designing a webpage using Bootstrap Framework is easy and need to less few lines of code.

Page Preview

 

 

Components used

  • Containers
  • Jumbotron
  • Well
  • Panels
The Code
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">
<div class="container">
 <div class="jumbotron">
  <h1>Page Title</h1>
  <h4>This is my first webpage in Bootstrap</h4>
 </div>
</div>
<div class="container">
 <div class="row">
  <div class="col-sm-4">
   <div class="well">
    <b>This is my sidebar content !</b><br/>
    <ul>
     <li>Sample List 1</li>
     <li>Sample List 2</li>
     <li>Sample List 3</li>
     <li>Sample List 4</li>
    </ul>
   </div>
  </div>
  <div class="col-sm-8">
   <div class="panel panel-default">
    <div class="panel-heading">
     <h3 class='panel-title'><b>Welcome user</b></h3>
    </div>
    <div class='panel-body'>
     <h3>This is a simple heading</h3>
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
     Praesent eu tincidunt ex. Integer convallis rhoncus sollicitudin. 
     Fusce porta luctus ex ut suscipit. Suspendisse sodales pellentesque 
     felis eget imperdiet. Duis ullamcorper a mi nec dictum. Donec vestibulum 
     libero nec ante rhoncus tincidunt. Maecenas efficitur dolor id consectetur 
     ultrices. Nunc cursus orci nec mi mattis ullamcorper. Morbi quis dapibus neque, 
     iaculis luctus tortor. Proin vulputate, risus nec elementum fringilla, dolor 
     mauris aliquet neque, vitae faucibus tellus felis at lacus. Nulla dignissim sed 
     augue sit amet ultrices. Morbi vitae quam et arcu consequat sodales sed 
     non purus. Nam facilisis imperdiet velit, sed pretium odio suscipit quis.</p>
     <button id='init1' class='btn btn-primary pull-right'>Simple Button</button>
    </div>
   </div>
  </div>
 </div>
</div>
<div class="container">
 <div class="well">
 Site designed by <a href="http://www.dprobuk.com" target="_blank"><b>dProBuk</b></a> using <a href="http://www.getbootstrap.com" target="_blank"><b>Bootstrap Framework</b></a>
 </div>
</div>

Hope you enjoyed reading this article. Please take a moment to share the love with your friends.
Alternatively, if you have any problems, please drop it below.

Catch me

Sidharth Patnaik

Blogger at Codermag
Tinkerer/Coder/Blogger
Catch me

Latest posts by Sidharth Patnaik (see all)

Related posts