Create responsive website with Bootstrap

Bootstrap tutorial includes all topics such as jumbotron, table, button, grid, form, image, alert, wells, container, carousel, panels, glyphicon, badges, labels, progress bar, pagination, pager, list group, dropdown, collapse,tabs, pills, navbar, inputs, modals, tooltip, popover and scrollspy.

BOOTSTRAP TUTORIAL

Bootstrap Example

It is very easy to setup and start using Bootstrap. This chapter will explain how to download and setup Bootstrap.

Download Bootstrap

You can download the latest version of Bootstrap from http://getbootstrap.com/. When you click on this link, you will get to see a screen as below -


Here you can see two buttons -

  • Download Bootstrap − Clicking this, you can download the precompiled and minified versions of Bootstrap CSS, JavaScript, and fonts. No documentation or original source code files are included..

  • Download Source − Clicking this, you can get the latest Bootstrap LESS and JavaScript source code directly from GitHub.

First Bootstrap Example

Add the HTML 5 doctype : Bootstrap uses HTML elements and CSS properties, so you have to add the HTML 5 doctype at the beginning of the page with lang attribute and correct character set.

See this example:

<!DOCTYPE html>
<html>
<head>
<title>First Bootstrap Example</title>
<meta name = "viewport" content = "width = device-width, initial-scale = 1.0">
<!-- Bootstrap -->
<link href = "http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel = "stylesheet">
</head>
<body>
<h1>Hello, world!</h1>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</body>
</html>

Bootstrap is mobile friendly: Bootstrap 3 is designed to be responsive to mobile devices.

Mobile-first styles are part of the core framework of Bootstrap.You have to add the following <meta> tag inside the <head> element for proper rendering and touch zooming:

<meta name = "viewport" content = "width = device-width, initial-scale = 1.0">

Note: The "width=device-width" part is used to set the width of the page to follow the screen-width of the device (vary according to the devices).

The initial-scale=1 part is used to set the initial zoom level when the page is first loaded by the browser.

Previous Next
Applied Art and Communication Design Course in Mumbai
Index Solutions - Web Design and Development Company Mumbai
Advance Digital Marketing Course Online
Advance Digital Marketing Course in Thane Mumbai
Online Full Stack Developer Course in Mumbai Thane
Online Job Portal in India
Index Solutions - Web Design and Development Company in Mumbai India