Bootstrap 3 Tutorials

Bootstrap 3 Tutorials

Bootstrap 3 Tutorials

Twitter Bootstrap is a open source platform to design mobile first responsive website , Bootstrap is a combinition of css javascript and icons, but needed a predefined structure of html 5 and class name and some id to design a site using bootstrap. so in this seris of tutorial we will learn about the predefine html structure and classname and id with sample code and in this Bootstrap tutorial we will learn to web design using bootstrap 3

Install Bootstrap Process

Download the Bootstrap 3 Files

There are two versions available for download, compiled Bootstrap and Bootstrap source files. You can download Bootstrap files from https://getbootstrap.com/getting-started/.

Compiled download contain compiled and minified version of CSS and JavaScript files as well as icons in font format for faster and easier web development, while the source contain original source files for all CSS and JavaScript, along with a local copy of the docs.

File Structure of Bootstrap

Unzip the compressed downloaded compiled Bootstrap folder to see the structure. You’ll find the following file structure.

bootstrap/
|—— css/
| |—— bootstrap.css
| |—— bootstrap.min.css
| |—— bootstrap-theme.css
| |—— bootstrap-theme.min.css
|—— js/
| |—— bootstrap.js
| |—— bootstrap.min.js
|—— fonts/
| |—— glyphicons-halflings-regular.eot
| |—— glyphicons-halflings-regular.svg
| |—— glyphicons-halflings-regular.ttf
| |—— glyphicons-halflings-regular.woff

 

Bootstrap Tutorials

Bootstrap Tutorials

Now Making the first template with bootstrap

Please place the unzip folder inside your theme folder and create an index.html file and make a basic html structure. Now create link for the css and js and save

the sample code is :

Try It Yourself

<!DOCTYPE html>
<html>
	<head>
		<meta charset=”utf-8″> <!-- used for the character set used  -->
		<meta http-equiv=”X-UA-Compatible” content=”IE=edge”>
		<meta name=”viewport” content=”width=device-width, initial-scale=1″>
		<title>Basic Bootstrap</title>
	
		<link rel=”stylesheet” type=”text/css” href=”css/bootstrap.min.css”>
		<link rel=”stylesheet” href=”css/bootstrap-theme.min.css”>
	</head>
	
	<body>
		<h1>Hello World!</h1>
	
		<script src=”js/jquery-1.11.3.min.js”></script>
		<script src=”js/bootstrap.min.js”></script>
	</body>
</html>

Now the topics we will cover in this twitter bootstrap tutorial seris are:

Bootstrap Tutorials

Bootstrap Tutorials

Bootstrap 3 grid system tutorial

Grid system is the key to divide a page into many parts , Bootstrap 3 grid system is the container or container fluid and row and column system, to make a mobile responsive website using bootstrap the grid system is the first need to make the structure and in this tutorial we will learn how to make the structure of a website using bootstrap grid system. and the grid is divided into 12 column and 4 different window size, thet is fro mobile, tablet, laptop and desktop. Click on the title to learn bootstrap grid system.

Bootstrap 3 typography tutorial

The bootstrap typography is the text style defined by bootstrap and it is a little bit different from browser default to make the text browser compatible
and as it could look like, the design nearly same in cross browser. learn bootstrap typogtaphy by clicking the title.

Bootstrap 3 image tutorial

Image and its placement is a very important part of a site, as if a image size is over the size of the container it does not look good, or while have to show as a thumbnail gallery then the design of the image is different, also sometime needed the image to show as rounded corner and also fully round image , bootstrap have provided some classes to handle all this. in this bootstrap tutorial click the headding to learn about bootstrap image.

Bootstrap 3 table tutorial

Tables are mainly used to show tabuler data like perchases details or order details, and its become difficult sometime, to show a table in a responsive manner, and also its needed to show a table as zebra style, or bordered or have to give a hover effect and bootstrap have made the all problem solved and user just need to add the specific bootstrap predefined classes, want to learn bootstrap responsive table from this bootstrap tutorial? just click on the title.

Bootstrap 3 Jumbotron and Page Header tutorial

Bootstrap jumbotron is a big box for calling extra attention to some special content or information of user. It is a gray box with rounded corner. The Bootstrap jumbotron have a little bigger font sizes of the text inside it. it can be used inside container or container fluid and outside container or container fluid also. for more details click on the title.

Bootstrap 3 well tutorial

Bootstrap well use to add a rounded gray border around a box with a gray background and a little padding, it provides a quick way to apply a simple effect to an element. It is used to make a little portion highlight or different from other. To read in details click on the title.

Bootstrap 3 alert tutorial

It is very needfull to show some alert to a site user like as while submitting a form should give some success or failed or worning alert, or if user goint to hit some restricted area then need to show the user a alert etc and bootstrap made the design process of alert box easy. click on the title and lets learn in detail.

Bootstrap 3 Button tutorial

Bootstrap provides classes for verious rypes of buttons like in size or color, also can be made disabled or enabled a button by using bootstrap class. Vlick on the headding link to learn details.

Bootstrap 3 button group tutorial

Bootstrap Button Group is used to include some buttons inside a div or contener and give it to classname .btn-group , normaly its a horizontal button group. the above title link will describe that in details.

Bootstrap 3 Glyphicons

Many times we need to attach a icon to make user understood the purpose of the portion, and for that bootstrap heve given lots of classes for a large numbers of icon and in case of bootstrap its called glyphicons. Click on the title for more details.

Bootstrap 3 Badges and Labels

The Badges are the number indicator of a button or text, it is mainly used to show how many messages or order have been submitted.
The Labels are the character or text indicator of a heading or a text , it is rounded borderd area.
to read in details from this tutorial click on the above heading.

Bootstrap 3 Progress Bars

Progress Bars are predefined attractive element of bootstrap, A progress bar is mainly used to show a how much present of a task is completed graphically.
click on the title to read in details

Bootstrap 3 Pagination

In this bootstrap tutorial we will learn about paginations, Pagination are used to navigate or linked a page. suppose you have a lots of posts in your blog and you want to show few of them in one page and next few in second page and so on then there is needed a navigation to linked the pages and a indicator of page number
read in details by clicking on the title.

Bootstrap 3 Pager

A pager is also one king of pagination , it provides the next and prev button , When we are use to show a single post some time we need two button on the buttom position to show the previous and next post.
click on the title to read in details.

Bootstrap 3 List Groups

A list group is used to display a unordered or a div in a list view, the list view mainly used in sidemenu or display some list of content.
now read in detail by clicking on the above link.

Bootstrap 3 Panels

Bootstrap 3 Panels lets us to place the content in a better presentation. Bootstrap 3 Panels have a border with some padding and devided into header and footer and body, for heading and related text.

Bootstrap 3 Dropdowns

Dorpdowns are mainly used in navigation menu to make dropdown menu, But sometime it is used in button and div also for scripting.

Bootstrap 3 Basic Collapsible

A collapse and accordion is a hide panel or portion which is opened on click on a button or link with scrolling effect.

Bootstrap 3 Tabs and Pills

Tab and pils are the nav component, the pils are mainly used in navbar and the tab is used on javascript van bar to show regarding hide portion like accordian.

Bootstrap 3 Navigation Bar

Bootstrap 3 Navigation Bar used to navigate to proper page according to its link . In this bootstrap tutorial we will learn bootstrap nav bar with two color.

Bootstrap 3 Forms

Responsive Form is a very useful html components which is used for send the data to server via get or post method. Now a days so many users are using mobile for internet browsing so we have to make a form easy to fillup from mobile also

Bootstrap 3 Form Inputs

In bootstrap the form inputs are take some property inside class .form-control and the form fields are: text, password, datetime, datetime-local, date, month, time, week, number, email, url, search, tel, and color.

Bootstrap 3 Media Objects

Bootstrap media object is used to make left or right allign media like video or image amd the media object is mainly used in water fall struntion comments or testimonuials.

Bootstrap 3 Carousel

A slider is a comon component of a website and make fully responsive slider is become very easy with help of bootstrap 3 and in bootstrap slider you can use caption or text also.

Bootstrap 3 Modal

Bootstrap modal window the a popup window to show some content inside it and can be customised the design of the popup window using bootstrap classes and css.
Click the above headding to learn in details.

Bootstrap 3 Tooltip

A tooltip is a instructiona box with small instruction which described about the functions of the tools. and bootstrap provides a beutiful looks of the tooltips. learn in details how to make a tooltips usig bootstrap by clicking on the heading link.

Bootstrap 3 Popover

Popover is similar to tooltip , bootstrap provided us a very nice popover and today we willgoing to learn how to make a popover.
Click the title link to learn how to make a bootstrap popover.

Bootstrap 3 mobile friendly web design tutorial

Bootstrap 3 mobile friendly web design tutorial

 

in this Bootstrap 3 tutorials we have gone through the installation process and structure and the topics we are going to cover.

Thanks for reading and please provide your valuable comment to make the website better and more usable.

Add a Comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.