Scribd Logo
Upload

Welcome to Scribd!

  • Bootstrap: A Free and Open-Source Front-End Framework

    Uploaded by

    Meena Jadoon
    157 views16 pages
    Bootstrap is a free front-end framework for building responsive, mobile-first websites. It includes HTML and CSS templates for common elements like navigation, buttons, forms, and more. Bootstrap also uses a responsive 12-column grid system to automatically adapt layouts to different screen sizes. Developers can include Bootstrap via a CDN or by downloading the framework files.

    Original Description:

    Original Title

    Bootstrap Lecture 1

    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
    Bootstrap is a free front-end framework for building responsive, mobile-first websites. It includes HTML and CSS templates for common elements like navigation, buttons, forms, and more. Bootstrap also uses a responsive 12-column grid system to automatically adapt layouts to different screen sizes. Developers can include Bootstrap via a CDN or by downloading the framework files.

    Copyright:

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

    Bootstrap: A Free and Open-Source Front-End Framework

    Uploaded by

    Meena Jadoon
    Bootstrap is a free front-end framework for building responsive, mobile-first websites. It includes HTML and CSS templates for common elements like navigation, buttons, forms, and more. Bootstrap also uses a responsive 12-column grid system to automatically adapt layouts to different screen sizes. Developers can include Bootstrap via a CDN or by downloading the framework files.

    Copyright:

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

    Bootstrap

    What is Bootstrap?

     Bootstrap is a free front-end framework for faster and easier web development
     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
     Bootstrap also gives you the ability to easily create responsive designs
    What is Responsive Web Design?

    Responsive web design is about creating web sites which automatically adjust themselves to
    look good on all devices, from small phones to large desktops.
    Why Use Bootstrap?

     Easy to use: Anybody with just basic knowledge of HTML and CSS can start using
    Bootstrap
     Responsive features: Bootstrap's responsive CSS adjusts to phones, tablets, and desktops
     Mobile-first approach: In Bootstrap, mobile-first styles are part of the core framework
     Browser compatibility: Bootstrap 4 is compatible with all modern browsers (Chrome,
    Firefox, Internet Explorer 10+, Edge, Safari, and Opera)
    Where to Get Bootstrap 4?

    There are two ways to start using Bootstrap 4 on your own web site.
    You can:
     Include Bootstrap 4 from a CDN
     Download Bootstrap 4 from getbootstrap.com
    Create First Web Page With
    Bootstrap 4
    1. Add the HTML5 doctype

     Bootstrap 4 uses HTML elements and CSS properties that require the HTML5 doctype.
     Always include the HTML5 doctype at the beginning of the page, along with the lang
    attribute and the correct character set:
     <!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="utf-8"> 
      </head>
    </html>
    2. Bootstrap 4 is mobile-first

     Bootstrap 4 is designed to be responsive to mobile devices


     Mobile-first styles are part of the core framework
     Add the <meta> tag inside the <head> element

     <meta name="viewport" content="width=device-width, initial-
    scale=1">
    3. Containers

    Bootstrap 4 also requires a containing element to wrap site contents

    There are two container classes to choose from:


    The .container class provides a responsive fixed width container
    The .container-fluid class provides a full width container, spanning the entire width of the
    viewport
    Create First Web Page With Bootstrap 4

     <!DOCTYPE html>
    <html lang="en">
    <head>
      <title>Bootstrap 4 Example</title>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <link rel="stylesheet"href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
    </head>
    <body>

    <div class="container">
      <h1>My First Bootstrap Page</h1>
      <p>This is some text.</p> 
    </div>

    </body>
    </html>
    Bootstrap 4 Grids

     It allows up to 12 columns across the page


     If you do not want to use all 12 columns individually, you can group the columns together
    to create wider columns
     The grid system is responsive, and the columns will re-arrange automatically depending
    on the screen size.
    Grid Classes

    The Bootstrap 4 grid system has five classes:


    1. .col- (extra small devices - screen width less than 576px)
    2. .col-sm- (small devices - screen width equal to or greater than 576px)
    3. .col-md-(medium devices - screen width equal to or greater than 768px)
    4. .col-lg-(large devices - screen width equal to or greater than 992px)
    5. .col-xl- (xlarge devices - screen width equal to or greater than 1200px)
    Bootstrap automatically handle the layout

    <div class="row">
      <div class="col">column 1</div>
      <div class="col"> column 2 </div>
      <div class="col"> column 3</div>
    </div>
    Responsive Columns

    On mobile phones or screens that are less than 576px wide, the columns will automatically
    stack on top of each other

    <div class="row">
      <div class="col-sm-3">.col-sm-3</div>
      <div class="col-sm-3">.col-sm-3</div>
      <div class="col-sm-3">.col-sm-3</div>
      <div class="col-sm-3">.col-sm-3</div>
    </div>
    Two Unequal Responsive Columns

    <div class="row">
      <div class="col-sm-4">.col-sm-4</div>
      <div class="col-sm-8">.col-sm-8</div>
    </div>

    You might also like