My First webpage using Bootstrap Framework

By Sidharth Patnaik -
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.

Comments

Post a Comment

Popular posts from this blog

Non Restoring Division Algorithm Implementation in C

By Sidharth Patnaik -
Image
This  is a Dynamic program for the implementation of the NON RESTORING Division Algorithm in C Language. Non Restoring Division uses Left Shift Operations, Twos' Compliment and Binary Addition. Screenshots[Demo] The Code #include<stdio.h> #include<malloc.h> int *a,*q,*m,*mc,*c,n,d; int powr(int x,int y) { int s=1,i; for(i=0;i<y;i++) s=s*x; return s; } void print(int arr[],int n) { int i; for(i=0;i<n;i++) printf("%d ",arr[i]); } void bin(int n, int arr[]){ int r, i = 0; do{ r = n % 2; n /= 2; arr[i] = r; i++; }while(n > 0); } void set(int array[], int x){ int i,tmp[20]={0}; for(i = x -1; i >=0; i--) tmp[x-1-i]=array[i]; for(i=0;i<x;i++) array[i]=tmp[i]; } int len(int x) { int i=0; while(powr(2,i)<=x) i++; return ++i; } void addBinary(int a1[], int a2[]) { int bi[2]={0},ca[20]={0}; int t=len(n),tmp=0; int *su=(int*)malloc(sizeof(int)*len(n)); while(t...
Read more

Bit Stuffing Code Implementation in Java

By -
Image
This is an implementation of the Bit Stuffing popularly used in data communication, also known as one of the concepts of Framing data bits. To know more please  click here. Sample Output: This is a sample output with data binary data entered as 11001111110. Program Code: import java.util.*; public class BitStuffing { public static void main(String[] args) { System.out.print("Enter the Binary message: "); Scanner sn=new Scanner(System.in); String data = sn.nextLine(); String res = new String(); String out=new String(); int counter = 0; for(int i=0;i<data.length();i++) { if (data.charAt(i)!='1' && data.charAt(i)!='0') { System.out.println("Enter only Binary values!!!"); return; } ...
Read more

Employee Management System Using Inheritance in Java

By Sidharth Patnaik -
Image
This program will help you in creating an simple Employee Management System using java language. In this program a class emp is used which has name, id and salary as data members. inside it there are two methods namely get() and disp() which work as getting user input and displaying the output. Scanner class is used as well. This program is an implementation of array of objects. Sample Output : The Code here: import java.util.*; class emp { public String name; public int id,sal; public void get() { Scanner s=new Scanner(System.in); System.out.print("Enter The Name: "); name=s.next(); System.out.print("Enter The id: "); id=s.nextInt(); System.out.print("Enter The sal: "); sal=s.nextInt(); s.close(); } public void disp() { System.out.println("The Name of the employee is "+name+" having id: "+id+"and a salary worth to: "+sal); } } class MainClass extends emp { publ...
Read more