Tutorial-BootStrap

BootStrap Tutorial

Advantages of BootStrap

• Responsive application
• Saves lot of developement time
• Consistency
• Customization
• Support: Documentation/Community Support

Examples of some Responsice websites

• takachizu
• bmw
• radesign
• cssconf

Installing the required extensions

• Bootstrap 4, Font awesome 4, Font Awesome 5 Free & Pro snippets
• IntelliSense for CSS class names in HTML

Add BootStrap to your HTML page

Referencing Bootstrap files from local folder

• Downland the Bootstrap code file from here
• Unzip the contents of the zip folder. Copy the CSS and JS folders into your project
• Reference the BootStrap css file

  <!-- Bootstrap CSS : Referencing local file-->
    <link rel="stylesheet"
          href="css/bootstrap.css">

Referencing Bootstrap files from CDN

A content delivery network (CDN) is a system of distributed servers (network) that deliver pages and other Web content to a user, based on the geographic locations of the user, the origin of the webpage and the content delivery server.

Bootstrap CDN

<link
  rel="stylesheet"
  href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css"
/>
<script
  src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"
></script>

Exploring

In this section we will try different components in Bootstrap randomly. Using the Bootstrap 4 extension we can create bootstrap components using auto-completion

• to create a Bootstrap compoent type b4- the editor will show a dropdown with list of options
• Lets create some commonly used components in the file in 2_Exploring folder.
• Create the components mentioned under each comments in the html file.

    <!-- Nav tabs -->
  

    <!-- Tab panes -->

    <!-- Pills-->

    <!-- Jumbotron -->
   
   <!-- list -->

HTML Semantic Elements

• The Study that examines the meaning of phrases and words is called semantics
• Elements with meaning are called semantic elements
• A Semantic element clearly defines its meaning both to the developer and the browser Example: <div> <span> - does not explain anything about its content <form> <table> <article> - this tags clearly defines its contents

W3Schools :Semantic Elements

Typography & Utilities

• Typography
  • offical doc
• Text Alignment
  • offical doc
• Floats & Position
• Color & Background Color
  • offical docs
• Spacing
• Sizing
• Breakpoints

CSS Components

• Buttons
• NavBar
• Lists Groups Badges
• Forms
• Input Groups
• Alerts Progress
• Tables & Pagination
• Cards
• Media Objects
• Jumbotron

Grid System & Flexbox

• Grid System
• Grid Alignment
• Flexbox
• Auto Margin Wrapping Order

JavaScript Widgets

• Carousel
• Collapse
• Tooltips
• Popovers
• Modals
• Scrolls

Creating the Base Project

• Add a new folder
• create a sub-folder named css
• create a file style.css inside the css folder
• Create a sub-folder named images
• Create an index.html file in the root folder
• Add reference to the Bootstrap CDN
• Add reference to the custom style.css
• Add reference to the Script files
  • Jquery CDN
  • PopperJS
  • BootstrapJS
• Added reference to font awesome CDN

Creating Landing Page Project

Creating Quiz App

• Lets make use of all the concepts we learned so far to implement this project
• You will find the base project here
• Implement the Navigation Menu
• Implement the NavBrand
• Implement the dropdown menu for Quiz
• Implement the home section
• Implement the HTML Quiz section
• Implement the CSS Quiz section
• Implement the Bootstrap Quiz section

Creating the Social Project

Setup project & Navbar

• Make copy of the base project for initial setup
• Rename the folder as SocialApp
• Lets add the Navigation

  navbar navbar-expand-sm bg-dark navbar-dark fixed-top
  

• Under the navbar we will add a container .container
• Add a NavBrand a.navbar-brand
• Add Hamburger Menu
  • button.navbar-toggler
  • Add attributes data-toggle=”collapse” data-target=”#navbarCollapse”
  • Add a span inside the button to display the icon span.navbar-toggler-icon
  • Create a div for navigation links .collapse.navbar-collapse with id ‘navbarCollapse’
• Add the ul/li for Navigation links inside the div

  ul.navbar-nav.ml-auto>li.nav-item*4>a.nav-link
  

  • Home
  • Explore
  • Create
  • Share
• Add the href to point to page bookmarks
  • #home
  • #explore-head-section
  • #create-head-section
  • #share-head-section

• Modify the style.css file and add the following css rules

  body{
    background:#333;
    color:#fff;
  }
  
  
  .navbar {
    border-bottom:#008ed6 3px solid;
    opacity:0.8;
  }
  

Home Section

• Create the Home Section below the Navbar
• Create a header element with a div as a child

  header#home-section>.dark-overlay
  

• inside the dark-overlay add another div **.home-inner.container** this will contain the contents of the section
• Create the div for row & columns .row>.col-lg-8.d-none.d-lg-block
  • col-lg-8 8 column grid show on large screen
  • d-none this will hide the block
  • d-lg-block this will show the div as block on large screen
• Add h1 tag h1.display-4 with text Build social profiles and gain revenue and profits
• Preview your current changes and see the output. Dont worry about the text going under the navbar
• Lets add flex container using **.d-flex
  • .p-4.align-self-start
  • i.fas.fa-check.fa-2x
  • Add another div .p-4.align-self-end
  • Add some lorem15
• Repeat the above steps for two other options from d-flex
• Add a div below the 8 column div with 4 columns .col-lg-4
• Add a card inside this div card bg-primary text-center card-form
• Add the card body .card-body
• Add h3 with content ‘Sign Up Today’
• Add p tag with content ‘Please fill out this form to register’
• add a form tag which will have the signUp form form>.form-group
• add a input field input.form-control.form-control-lg
• add placeholder to Username
• repeat the form-group and input for Email,Password and Confirm Password
• add a submit button input:submit add class of btn btn-outline-light
• add additional class for the submit button to make it a block btn-block
• Now that the markup is compelete. Lets add some custom CSS to fix the layouts
• Open the style.css file
• Define rule for id selector #home-section

  #home-section{
    /*Sets the Background Image*/
    background:url(../img/home.jpg);
    background-repeat:no-repeat;
    background-size:cover;
    background-attachment: fixed;
    min-height: 700px;
  }
  

• let setup the overlay

  #home-section .dark-overlay{
  position: absolute;
  top:0;
  left:0;
  width:100%;
  min-height: 700px;
  /* make the image darker */
  background: rgba(0,0,0,0.7)
  }
  

• Now lets fix the padding of the home section

  #home-section .home-inner{
  padding-top:150px
  }
  

• Set opacity for the card form

  #home-section .card-form{
  opacity: 0.8;
  }
  

• Set background for the ticks

  #home-section .fas {
  color:#008ed6;
  background:#fff;
  padding:5px;
  border-radius:5px;
  }
  

Explore Head Section

• Create the head section for explore

  section#explore-head-section>.container>.row
  

• Add a div inside row .col.text-center.py-5
• Add h1 tag h1.display-4
• Add p tag with some lorem p.lead>lorem20
• Add link button a.btn.btn-outline-secondary

Explore Body Section

• Add section tag to wrap all the contents

  section#explore-section.bg-light.text-muted.py-5
  

• Add a container div .container>.row
• Split the row into two section of 6 columns each .col-md-6*2
• Add the image tag in the first div img-fluid mb-3 rounded-circle
• In the second div add h3 tag ‘Explore & Connect’
• Add lorem20
• Below we will add checkboxes and lorem like it was done in the home section using d-flex
• .d-flex>.p-4.align-self-start
• Add the icon i.fas.fa-check.fa-2x
• Add div and lorem content .p-4.align-self-end>lorem15
• Repeat above to add two more checkbox options
• Add css to format the checkboxes

#explore-section .fas{
  background:#333;
  color:#fff;
  padding: 5px;
  border-radius: 5px;

}

Create Head & Section

• Copy the content in head & section of Explore and paste it for Create
• Add class to change the background of the head section to blue
• Change the h1 content to Create
• Change the button to outline light
• Change the id to create instead of explore
• Change image to point to create section image
• Change the text of h3 to ‘Create your passion’
• remove the bg-light and text-muted class for create-section
• swap the sections by specifying the order class
• set the background for the checkboxes, by sharing the home section css

Share Head & Section

• Repeat the same steps used for create section.
• Change the colors to match the final project settings

Footer Section

• add footer tag footer#main-footer.bg-dark
• add a container div with row and col .container>.row>.col.text-center.py-4
• add h3 tag with ‘SocialApp’
• add p tag with Copyright ©
• add a span to display the year
• add a button btn.btn.btn-primary
• add data-toggle=”modal” data-target=”#contactModal”

Contact Modal Section

• add a div .modal.fade.text-dark#contactModal
• create the modal structure .modal-dialog>.modal-content>.modal-header
• add modal title using h5 tag h5.modal-title
• add a button to close btn.close
• add span with close text span>×
• add data-dimiss=”modal” attribute to button
• add the modal body .modal-body>form
• add the form-group for name .form-group>label+input:text.form-control
• repeat for email and message
• add a button below the modal-body

Smooth Scrolling

• on the body tag add the attribute data-spy=”scroll” data-target=”#main-nav” and id as home
• set the id of nav to main-nav
• Initialize the scroll spy in the script section

   //Init Scrollspy
    $('body').scrollspy({target:'#main-nav'});

This site is open source. Improve this page.