Frequently used Bootstrap Classes and funcitons | Bootstrap

Ref: https://getbootstrap.com/

1. Navigation has two parts one .navbar for Navigation header and other items.
1. By default responsive.
2. By adding .d-print for printing navbar.
3. If you use div instead of nav use role="navigation".
4. Navigation bar with collapse button.
1. <nav class="navbar" id="">
5. Navigation bar with expand all menu items
1. <nav class="navbar navbar-expand-lg" id="">
2. navbar +  navbar-expand + color shcheme (navbar for Navigation header).
3. navbar + .navbar-expand{-sm|-md|-lg|-xl} and if required use color scheme classes but myClass can solve color and background color scheme.
4. Operational containers .navbar-expand{-sm|-md|-lg|-xl} manage horizontal widths.
6. Sample
1. <nav class="navbar navbar-expand-lg  navbar-light bg-light fixed-top myClass" id="">
7. Sibling Elements
1. Brand icon
1. .navbar-brand - icon/logo/mini title with anchor in navbar
2. <a class="navbar-brand" href="#">
        <i class="fa fa-... CustomClass" ></i>
        <span class="myCustomClass">Excellent Programming Tricks</span>
       </a>
2. Collapse button
1. <button class="navbar-toggler navbar-toggler-right" id="myID" type="button" data-toggle="collapse" data-target = "#navbarSupportedContent" aria-controls = "navbarSupportedContent" aria-expanded="true" aria-label="Toggle navigation">
           <span class="navbar-toggler-icon"></span>
   </button>
8. Items
1. .collapse .navbar-collapse for grouping and hiding navbar contents
1. <div class="collapse navbar-collapse" id="navbarSupportedContent">
2. .navbar-nav for  dropdown menu with height and weight navigation
1. <ul class="navbar-nav ml-auto">
3. nav-item and .nav-link as shown below
1. <li class="nav-item"><a class="nav-link" href= "about.html" > About </a></li>.
9. Dropdown (submenu) - wrap + position
1. <li class="nav-item dropdown">
           <a class="nav-link dropdown-toggle" href="#" id="DropdownID" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
             Dropdown link
           </a>
           <div class="dropdown-menu" aria-labelledby="DropdownID">
             <a class="dropdown-item" href="#">Action</a>
             <a class="dropdown-item" href="#">Another action</a>
             <a class="dropdown-item" href="#">Something else here</a>
           </div>
         </li>
10. sample
1. https://getbootstrap.com/docs/4.0/components/navbar/
2. Grid
1. Always .container + .row + .col
2. Use only one class container but if you need you can use more than one but nested container class is not allowed in bootstrap.
3. .container-fluid:
1. When you change widow size it continuously its size also.
2. Responsive
3. Full screen
4. .container:
1. When you change window size its also change its size but specific point.
2. Responsive.
3. Gap between container
5. Column class has different tag elements.
1. <div class="container"><div class="row"><div class="col-md-4">title</div><ul class="col-md-8">list items (inline) </ul></div></div>
3. .clearfix  Float problem
1. Clear float
2. Use in parent sometimes
4. Centering
1. div items
1.  .mx-auto
1. Horizontally center.
1. Block item
1. With width property
1. heading {h1-h6]
1. <h3 class="text-center">...</h3>
5. Spacing
1. Format for xs {property}{sides}-{size}
2. Format for sm, md, lg, and xl {property}{sides}-{breakpoint}-{size}.
3. <h3 id="about" class="py-5 text-center">About Myself</h3> --py-5 means padding both top and bottom with some calculated value.
4. <h3 id="about" class="ml-0 text-center">About Myself</h3> --ml-0 means margin left with zero value.
6. Typography
1. class
1. .lead -- more size and weight than parent.
2. .text-right
2. Tag
1. <strong> --bold 
7. Color
1. Text
1. text-muted -- color(#777) like gray.
8. Media
1. https://v4-alpha.getbootstrap.com/layout/media-object/
9. Embedded
1. <div class="embed-responsive embed-responsive-4by3">
     <iframe class="embed-responsive-item" src="" allowfullscreen></iframe>
   </div> 
10. List
1. Inline
1. Elements in a row means inline list [remove bullet].
1. <ul class="list-inline"> <li class="list-inline-item"></li></ul>
2. One by one
1. <ul class="list-group">
     <li class="list-group-item">Freelancer iftekhar</li>
     <li class="list-group-item disabled">Disable?</li></ul>
2. <div class="list-group">
     <a href="#" class="list-group-item list-group-item-action active">
       Galib </a>
     <a href="#" class="list-group-item list-group-item-action">Normal</a>
     <a href="#" class="list-group-item list-group-item-action disabled">Disable</a>
   </div>
3. <div class="list-group">
     <button type="button" class="list-group-item list-group-item-action active">Galib</button>
     <button type="button" class="list-group-item list-group-item-action">Normal</button>
      <button type="button" class="list-group-item list-group-item-action" disabled>Disable</button>
   </div>
11. Form
1. Form elements in a row means inline form
1. <form class="form-inline"><input ...</div>
2. Add some structure. Mainly margin-bottom with label and also controlling padding.
1. <div class="form-group"></div>
2. Use form-group class only when require.
3. Textual inputs with 100% width.
1. .form-control
4. File inputs
1. .form-control-file
5. If label is not present in form use .sr-only.
12. Form input-group
1. Noting special just use input-group class with parent element.
13. Glyphicon
1. Not present in bootstpra v 4
14. .sr-only
1. Visually hidden but screen readers can access.
2. Information for non-visual user.
3. If label is not present in form use .sr-only
4. <label class="sr-only">Email Address</label>
15. Attributes
1. role="": Required | Functionality | Good way to communicate whit modern device.
1. We use meta(information of site), banner(site oriented not page oriented), navigation(every page may be involved), etc. 
1. Class and id not describe the role. 
2. <button role="navigation"> -- It doesn't mean that button is a navigation. Button relation/purpose with navigation.  
3. Misuse of curly brackets in HTML5.
4. HTML roles used in Bootstrap
1. role="form"
2. aria-describedby: Relationship with other elements
1. <input type="email" aria-describedby="emailHelp"><p id="emailHelp">...</p>