Bootstrap for beginners

bootstrap

Bootstrap 3 is the framework of  HTML, CSS, and JavaScript,

Bootstrap is open source developed in August 2011 on GitHub by Jacob Thornton and Mark Otto at Twitter.

we can create mobile-first applications for responsive, Easy and quick to learn,

Bootstrap is completely free to download and save in folder we can use!

Bootstrap’s open CSS regulates Desktops, Tablets and Mobiles.

Supported by all browsers  Ex: Chrome, Safari, Opera, Internet  Explorer.

Bootstrap has a few easy ways to start quickly

Using bootstrap we can develop RWD(response web designing).

Features of Bootstrap:-

  1. HTML, CSS, JS Framework for developing projects on the web
  2. Responsive Design
  3. Helps your layout transition between computers, tablets, and mobile
  4. The extensive pre-compiled or modifiable code base
  5. Easy! To use
    1. Even for the non-developer
    2. Perfect for small colleges without much IT support
  6. Lots of features and online support
  7. Open source project
  8. Library with cookie-cutter mockups you can customize
  9. Lots of Popular Sites use it!
  10. Complex responsive features and JavaScriptfeatures with only basic knowledge of HTML and CSS.
  11. Excellent documentation
  12. Easy to follow examples
  13. Easy copy and paste template
  14. We can say like Mobile First
  15. Ensures consistency across browsers

How to get Bootstrap:-

Step:1 Download Bootstrap

  1. Just go to https://getbootstrap.com/
  2. Download Bootstrap
  3. bootstrap-3.3.7-dist

a. CSS

i. bootstrap.min.css

b. fonts

c. JS

4. we need jquery.min.js also(jquery.com)

a. jquery.min.js

Actually here we need 3 mandatory files those are

  • bootstrap.min.css
  • jquery.min.js
  • bootstrap.min.js

5. Set up site in the same directory

Step-2: Using CDN(Content Delivery Network)

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet"href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

In Head Section:-

It’s Normal structure width file download method

<!DOCTYPEhtml>
<htmllang="en">
<head>
<metacharset="utf-8">
<metahttp-equiv="X-UA-Compatible"content="IE=edge">
<metaname="viewport"content="width=device-width,initial-scale=1">
<link rel="stylesheet"href="css/bootstrap.min.css">
</head>
<body>
<!-- jQuery library -->
<script src="js/jquery.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>

In Head Section:-

It’s Normal structure width CDN download method

<!DOCTYPEhtml>
<htmllang="en">
<head>
<metacharset="utf-8">
<metahttp-equiv="X-UA-Compatible"content="IE=edge">
<metaname="viewport"content="width=device-width,initial-scale=1">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet"href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>
</html>

Bootstrap Grid:-

Bootstrap is a tool that allows our website to be easily developed on any device. In order to design

a web page, we need to know how about how it works.

Bootstrap framework  a page into a grid with rows and columns. This grid is based on a 12

column layout, which means the columns in each row must equal 12.columns and there are 4 types of screens

  1. Extra small screen(xs)- for mobiles
  2. Small screens – for tabs
  3. Medium screens – for desktop and laptops
  4. Large screens – for large screen

The Grid system is like below

1 2 3 4 5 6 7 8 9 10 11 12

12- columns

12

                   1 column with a width of 12

6 6

                        2 columns with width of 6

4 4 4

                        3 columns with width of 4

4 8

One column with a width of 4, the other with a width of 8

Responsive Designing:-

Bootstrap colors:-

    null
  • Primary Blue indicates the primary action you want a user to take.
  • Success Green indicates a positive action.
  • Info Blue indicates useful information for the user.
  • Warning Yellow indicates caution should be used with an action.
  • Danger Red indicates a negative action.

Bootstrap-Important classes:-

Container:-

<div class=”container”></div>

Container class element is added to proper centering and maximum width for layout

Container-fluid:-

<div class=”container-fluid”></div>

Container-fluid class for a full 100% width container, spanning the entire width of your viewport.

Headings:-

h1. Bootstrap heading  –semi bold 36px
h2. Bootstrap heading  -semi bold 30px
h3. Bootstrap heading  -semi bold 24px
h4. Bootstrap heading  -semi bold 18px
h5. Bootstrap heading  -semi bold 14px
h6. Bootstrap heading  -semi bold 12px

Paragraph:-

lead class to add some emphasis to a paragraph

Background color:-

If u want apply background color you just .bg-primary

.bg-primary, .bg-success, .bg-info, .bg-warn, .bg-danger

Text color & text alignments:-

.text-left Left aligned text

 .text-center Center aligned text

 .text-right Right aligned text

.text-justify Justified text

 .text-nowrap No wrap text

.text-lowercause Lowercase text

 .text-capitalize Capitalized text

.text-uppercase Uppercase text

.lead Good for first paragraph of article

Images classes:-

Image classes  allows to make the images responsive by adding a class .img-responsive to the Error! Filename not specified.tag. This class applies for maximum width: 100%; and height: auto; to the image so that it scales nicely to the parent element.

.img-fluid Make an image responsive

 .img-rounded Adds rounded corners to image

 .img-circle Crops image to be circle

 .img-thumbnail Adds rounded corner + border

Links:-

.list-unstyled Removes default list margin

.list-inline Makes list items inline

 .dl-horizontal Makes list items two colum

Table:-

.table – for displaying the data into  the tabular format

.table-striped – for  add zebra-striping to any table row within table

.table –bordered – for borders on all sides

.table – hover   –  for enable a hover state on table

.table – responsive – for create responsive table

Contextual classes:-

.active  – for  hover color to a particular row or cell

          .success – for its indicate like successful or positive

          .info  –  for normal informatics changes

          .warn – for  warning that might need attention

          .danger – for dangerous or potentially negative action

Forms Layout :-

Bootstrap provides class for forms  layouts:

     .form-group – for behave as grid rows

     .form-control – for 100% width

     .form-inline – for for left-aligned and inline-block controls

.input-group  – to input by adding an icons, text or a buttons in front or behind the input field as a “help text”

.input-group-addon – add icon or help text to the input

     .sr-only – for the label hiding

Buttons classes:-

.btn       – for  added to all buttons because it adds padding and margin

 .btn-default –  forThe default button styles

.btn-primary   –   for button that has the primary action

.btn-success   –   for  buttonCould be used on the last submit button in a forms

 .btn-info  –  for  Informational to the button

 .btn-link   –   forRemoves background color and add text color

 .btn-lg-  for  Large buttons

.btn-sm –   for  Smaller than default button

 .btn-xs-  for Even smaller buttons

 .btn-block   – for  Button that spans full width of parent

Float classes:-

pull-left   – for Floats items to  left

.pull-right –  forFloats items to  right

.center-block    – for   Set an element to block with auto left and right margin

.clearfix-  forClear floats by adding this class to the parent container

Leave a Reply

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