Skip to main content
twitter-bootstrap

Getting Started With Bootstrap Responsive Website Development

What is Twitter Bootstrap?

Bootstrap is a Front-end-framework developed by the team at Twitter. It is a combination of HTML, CSS, and Javascript code designed to help increase user interface elements. Bootstrap was also programmed to support both HTML5 and CSS3. Bootstrap is a free collection of tools for developing a websites and web applications.

  1. Download

    You need to download bootstrap.zip folder from the official website. Before downloading, the bootstrap makes sure that code editor is install on your computer. (we recommend you for windows user Sublime text- 2 and for Linux user they can use Atom).

  2. File structure

    The file structure of bootstrap is the most basic form of Bootstrap: compiled files for easy usage in any web project. bootstrap provide compiled CSS and JS files , as well as they offer you compiled and minified CSS and JS (bootstrap.min.*).
    Please note that all JavaScript plugins require jQuery to be included.

    getting-started-with-bootstrap-responsive-website-development

  3. Documentation

    • CSS − Bootstrap fits with the specialty of global CSS settings, basic HTML components styled and improved with extensible classes, and an advanced grid system.
    • Components − Bootstrap introduces over a dozen reusable sections built to display icons, drop-downs, navigations, alerts, popovers, and much more.
    • JavaScript Plugins − Bootstrap introduces over a dozen custom jQuery plugins. You can easily include them one by one.
    • Customize − You can customize Bootstrap’s components, some variables, and jQuery plugins to get your very own version.
  4. Steps to use the bootstrap

  • Create a basic HTML  page.
<!DOCTYPE html>

<html>

<head>

<title>Bootstrap 101 Template</title>

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

</head>

<body>

<h1>Hello, world!

</h1>

<scripsrc="http://code.jquery.com/jquery.js">

</script>

</body>

</html>
  • Include CSS files in the head section using link tag and the javaScript files linked with Script tag.
<!DOCTYPE html>
<html>

<head>

<title>Bootstrap 101 Template</title>

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

<!-- Bootstrap -->

<link href "css/bootstrap.min.css" rel="stylesheet" media="screen">

</head>

<body>

<h1>Hello, world!</h1>

<scripsrc="http://code.jquery.com/jquery.js"></script>

<script src="js/bootstrap.min.js"></script>

</body>

</html>
  • After including the bootstrap files you can use the CSS classes in your HTML code.
<div class="form-group has-success">
  <label class="col-form-label" for="inputSuccess1">
    Input with success
  </label>
  • after this, you can start development of your web-site or application using bootstrap.

%d bloggers like this: