Scribd Logo
Upload

Welcome to Scribd!

  • Bootstrap GRID Overview: Ravindra Reddy

    Uploaded by

    Ravindra Reddy
    9 views10 pages
    https://www.seoskills.in

    Original Title

    Bootstrap Overview

    Copyright

    © © All Rights Reserved

    Available Formats

    PPTX, PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document
    https://www.seoskills.in

    Copyright:

    © All Rights Reserved
    Download as PPTX, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    9 views10 pages

    Bootstrap GRID Overview: Ravindra Reddy

    Uploaded by

    Ravindra Reddy
    https://www.seoskills.in

    Copyright:

    © All Rights Reserved
    Download as PPTX, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    of 10

    Bootstrap GRID Overvie

    Ravindra Reddy
    About bootstrap

    1. Bootstrap is a free front-end framework for faster and easier web development

    2. Bootstrap includes HTML and CSS based design templates for typography, forms, buttons, tables,
    navigation, modals, image carousels and many other, as well as optional JavaScript plugins

    3. Bootstrap also gives you the ability to easily create responsive designs

    Bootstrap was developed by Mark Otto and Jacob Thornton at Twitter, and released as an open source
    product in August 2011 on GitHub.

    In June 2014 Bootstrap was the No.1 project on GitHub!


    3 steps to create BS Pag

    1. Add the HTML5 doctype


    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    </head>
    </html>

    2. Add meta tag for mobile view


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

    3. Add Containers to wrap the content

    .container
    class provides a responsive fixed width container
    .container-fluid
    class provides a full width container, spanning the entire width of the viewport
    Order of placement

    <head>
    <title>Bootstrap Example</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <script src="jquery.min.js"></script>
    <script src="js/bootstrap.js"></script>
    </head>
    Grid classes

    Bootstrap's grid system allows up to 12 columns across the page.

    The Bootstrap grid system has four classes:

    1. xs (for phones - screens less than 768px wide)


    2. sm (for tablets - screens equal to or greater than 768px wide)
    3. md (for small laptops - screens equal to or greater than 992px wide)
    4. lg (for laptops and desktops - screens equal to or greater than 1200px wide)
    Basic structure of grid

    Bootstrap's grid system allows up to 12 columns across the page.

    <div class="row">
    <div class="col-md-6"></div>
    <div class="col-md-6"></div>
    </div>

    <div class="row">
    <div class="col-md-4"></div>
    <div class="col-md-2"></div>
    <div class="col-md-6"></div>
    </div>

    First; create a row (<div class="row">). Then, add the desired number of
    Contextual Colors

    Bootstrap's contextual color classes for content

    1. text-muted,
    2. .text-primary
    3. .text-success,
    4. .text-info,
    5. .text-warning
    6. .text-danger:
    Contextual background clas

    Bootstrap's supports 5 contextual background color classes.

    1. .bg-primary,
    2. .bg-success
    3. .bg-info
    4. .bg-warning
    5. .bg-danger:
    Contextual background clas

    Bootstrap's supports 5 contextual background color classes.

    1. .bg-primary,
    2. .bg-success
    3. .bg-info
    4. .bg-warning
    5. .bg-danger:
    Bootstrap tables

    You might also like