My First webpage using Bootstrap Framework

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

Components used

  • Containers
  • Jumbotron
  • Well
  • Panels
You can view the demo of the  webpage using Bootstrap Framework by clicking here.

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

Bikash Panda
Catch Me On

Bikash Panda

Blogger / Embedded System Developer at WeArGenius
A techie, tinkerer and tech lover, who loves to blog and feels everyone can learn tech provided they have the right attitude towards learning and passion. By profession, I am an IOT developer working in Smart Home/ Smart Grid domain.
Bikash Panda
Catch Me On

Related posts