Excellent Programming Tricks

Bootstrap

Bootstrap 4 essentials

August 30, 2018

  1. Notes
    1. Bootstrap 4 requires the HTML5 doctype (<!doctype html>).
    2. It follows mobile first strategy, so when you develop something, then it's better to design first for the small scale device. So use responsive viewport meta tag (<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">) in head section.
    3. Component start with base class and extended through modifier class.
    4. Prefer HTML and CSS over JavaScript.
    5. Disable JavaScript functionality (data attribute API) use $(document).off('.data-api') or specific element use $(document).off('.miza.data-api').
    6. Click Events for details.
    7. Programmatic JavaScript API used in bootstrap for plugin which is single, chainable and returned the collection value.
      1. Methods can accept an optional options object.
    8. Visually hidden contents (like .sr-only) are visually hidden but accessible through dependable technologies for non visual users information [sr-only sr-only-focusable].
    9. Additional bootstrap styling is added on element for change/customize default HTML behavior is called reboot. Use classes when you need additional styling.   
      1. 'box-sizing' is globally set on every element. So,  declared elements never exceeds due to border or padding. Initial font-family:16px.
      2. Bootstrap uses their customized web fonts instead of default web fonts
      3. For easy spacing 'margin-top' is removed from heading and <p> tags. In addition, 'margin-bottom' (.5rem for headings and 1rem for paragraphs) is added.
      4. All lists like <ul>, <ol>, and <dl> remove 'margin-top' and added 'margin-bottom' 1rem, but nested lists have no 'margin-bottom'.
        1. Reset <dd> like margin-left:0; and margin-bottom: .5rem.
        2. Reset <dt> like margin-left:0; and margin-bottom: .5rem with bolded.
      5. Remove 'margin-top' and use 'margin-bottom' on <pre>.
      6. Tables are slightly changed, mainly additional classes are use. Remarkable change are done on 'Forms' and 'address'. Blockquote have changed margin.  
      7. Everywhere cursor is text but pointer when element is clickable.
      8.  For hidden use attribute hidden (<input type="text" hidden> for more accuracy.
      9. Responsive typography: Scaling text and components are adjusting with the root elements based on media queries. Bootstrap don't do this automatically, but can be easily added.
  2. Layout (Components and options inside container with grid system in responsive manner)
    1. Containers
      1. Most basic layout element.
      2. Inside content center in a page. 
      3. Require when use default grid system.
      4. Responsive.
      5. Fixed or Fluid width.
      6. Container can be nested.
      7. Use .container-fluid for full width container.
      8. z-index
        1. Control third axis.
        2. Avoid conflicts set high and specific standard for layered components.  
    2. Grid
      1. Grid system requires series of containers, rows, and columns to align and layout.
      2. Grid have five breakpoints.
      3. Container (.container or .container-fluid) provide horizontally pad and center site's content. While .container for a responsive pixel width and .container-fluid for 100% width across all viewport and device sizes. 
      4. Row is used for column wrapping.
      5. Gutter horizontal padding between columns. Use .no-gutters on .row for removing margin form rows and padding from columns.
      6. Columns are immediate child of .row and contain within column. Columns are fluid width and maximum twelve columns are valid.
    3.  Grid Options
      1. Extra Small
        1. <576px
        2. xs (col-)
        3. Maximum container width auto (none).
      2. Small
        1. >=576px
        2. sm (col-sm-)
        3. Maximum container width 540px.
      3. Medium
        1. >=769px
        2. md (col-md-)
        3. Maximum container width 720px.
      4. Large
        1. >=992px
        2. lg (.col-lg-)
        3. Maximum container width 960px.
      5. Extra Large
        1. >=1200px
        2. xl (.col-xl-)
        3. Maximum container width 1140px.
      6. Auto columns
        1. Like col-3 or col-sm-3 or col-md-3 or col-lg-3 or col-xl-3.
    4. Equal-width
      1. Equal width column value from xs to xl, use class .col on columns.
    5. Force next columns to break to new line
      1. Breakpoints <div class="w-100"></div>. 
    6. Setting one column fixed width
      1. One column fixed size and sibling columns are automatically resize.
      2. .container>.row>.col+.col-6+.col
    7. Variable width content
      1. Column width adjust with columns natural content width.
      2. .container>.row>.col + .col-md-auto + .col .col-lg-2.
    8. Stacked to horizontal
      1. Using single set classes .col-*-*.
      2. Like .col-lg-4 means column acquire four columns with horizontal area when large screen, but no stack on other screen mode.
    9. Mix and match
      1. Combination of different size columns in different tires. Use multiple .row with different columns.
    10. Alignment
      1. Vertical Alignment
        1. Columns start from top, center or bottom.
          1. .container>.row .align-items-start >.col+.col+.col
          2. .container>.row .align-items-center >.col+.col+.col
          3. .container>.row .align-items-end >.col+.col+.col
        2. Single columns start from top, center or bottom.
          1. .container>.row>.col .align-self-start + .col .align-self-center + .col .align-self-end
      2. Horizontal Alignment
        1. Different type of alignment. For example,
        2. .container>.row .justify-content-start > .col-3 + .col-3
        3. .container>.row .justify-content-center > .col-3 + .col-3
        4. .container>.row .justify-content-end > .col-3 + .col-3
        5. .container>.row .justify-content-around > .col-3 + .col-3
        6. .container>.row .justify-content-between > .col-3 + .col-3
    11. Extra Column
      1. In a row more than twelve columns are placed then additional columns  in the next line.
    12. Order
      1. Can change column order by using .order- class.
      2. .col .order-first/col order-last classes use for order.
    13. Offsetting columns in two ways
      1. Offset classes (like .offset-md-*).
      2. Margin utilities (like .mr-auto) to force sibling columns from one another.
    14. Nested column
      1. .container>.row>>.col-md-8>.row>.col-md-4+.col-md-4
    15. Self column
      1. Create and customize my new column by using bootstrap mixins
    16. Media object
      1. Design alongside and without wrap with content.
      2. Two classes are required for media object.
        1. .media class wrap the media with content
        2. .media-body class wrap only the content.
        3. .media>img+.midia-body{...}
      3. Media object can be infinitely nested.
    17. Alignment
      1. Media object can be aligned to the top, middle, or end of .media-body content.
        1. .align-self-start
        2. align-self-center
        3. align-self-end
    18. Order
      1. .media>.midia-body{...}+img.
    19. Media list
      1. ul.list-unstyled>li.media>img+.media-body
    20. Utilities for layout
      1. Showing, hiding, aligning, and space content.
  3. Content
    1. Typography
      1. Heading
        1. Classes .h1 to .h6 are available for heading without associate HTML (<p class="h2">abc</p>).
        2. Can customize heading.
      2. Display Heading
        1. A larger, slightly more opinionated heading style (.display-1, .display-2, .display-3, .display-4).
        2. <h1 class="display-1">Display</h1>
      3. Lead
        1. Make a paragraph stand out by adding .lead class.
      4. Inline text elements
        1. Reboot mark and small element with .mark and .small classes. 
        2.  <p>Back <mark>Door</mark> text.</p>
        3. <p><small>Small.</small></p>
      5. Dotted underline (abbreviation)
        1. Use .initialism class for small font (<p><abbr title="galib" class="initialism">GAB</abbr></p>).
      6. Blockquotes (block of content from another source)
        1. <blockquote class="blockquote">  <p class="mb-0">...</p></blockquote>
        2. Writer name/naming source
          1. <blockquote class="blockquote">  <p >...</p>  <footer class="blockquote-footer">You <cite title="Source Title">Galib</cite></footer></blockquote>
        3. Text center/right
          1. <blockquote class="blockquote text-center/text-right">  <p >...</p>  <footer class="blockquote-footer">You <cite title="Source Title">Galib</cite></footer></blockquote>
      7. Lists
        1. .list-unstyled for unordered list with margin modification.
        2. Inline arrangement requires two classes. Like ul.list-inline>li.list-inline-item.
      8. Responsive typography
        1. Scaling text and components are adjusting with the root elements based on media queries. Bootstrap don't do this automatically, but can be easily added.
      9. Programming code and mathematical terms in Bootstrap
        1. Snippets
          1. Wrap inline snippets with <code>.
            1. <code>&lt;h6&gt;</code>.
        1. Code blocks
          1. Use <pre> for block of code.
            1. <pre class="pre-scrollable"><code> &lt;p&gt;Excellent.&lt;/p&gt; &lt;p&gt;Programming Tricks &lt;/p&gt; </code></pre>
        1. Variables
          1. a = b + c; Like <var>a</var> = <var>b</var> + <var>c</var>.
        2. User command input
          1. Very nice looking user comment styling. Use simply <kbd><kbd>Alt</kbd> + <kbd>,</kbd></kbd>.
        3. Sample output
          1. Use <samp> for indicating sample output.
    2.  Images
      1. Create responsive image using .img-fluid. .img-fluid's automatically set width as 100% and fit with parent width size. Also, auto is applied on height.
        1. <img src="..." class="img-fluid">
      2. Use .img-thumbnail for image with border.
      3. Aligning image
        1. <img src="..." class="rounded float-left/right" alt="...">
        2. <img src="..." class="rounded mx-auto d-block" alt="...">
        3. div.text-center>img.
      4. Picture
        1. Use .img-* class on img tag not picture tag.
    3. Tables
      1. table.table>caption+thead+tbody
        1. inside thead -> thead>tr>th.col
        2. inside tbody-> tbody>tr>th.row+th
      2. Classes:
        1. <table>: .table, .table-dark, .table-striped, .table-bordered, .table-borderless, .table-hover, .table-sm(reduce padding),
        2. <thead>: .thead-dark, .thead-light,
        3. <tr>: .table-active, .table-primary .table-secondary, .table-success, .table-danger, .table-warning, .table-info, .table-light, .table-dark, bg-primary, .bg-success, .bg-warning, .bg-danger, .bg-info.
        4. <th>/<td>: .table-active, .table-primary .table-secondary, .table-success, .table-danger, .table-warning, .table-info, .table-light, .table-dark, bg-primary, .bg-success, .bg-warning, .bg-danger, .bg-info.
      3. Make responsive table for vertically scroll
        1.  div.table-responsive{-sm|-md|-lg|-xl}>table.table>...   
    4. Figures with caption
      1. figure.figure>img.figure-img.img-fluid.rounded + figcaption.figure-caption.
  4. Components
    1. Alerts
      1. Text alert or close button not like javaScript alert box.
      2. Structure: <div class="alert alert-*" role="alert">...</div> //Alert background color alert-*->.
      3. With link: <div class="alert alert-info" role="alert">Alert text <a href="#" class="alert-link">With link</a></div>.
      4. Text alert color background
        1. Conveying meaning for visual indication not be conveyed to assistive technology. For user assistive technology use .sr-only.
        2. Classes : .alert-primary, .alert-secondary, .alert-success, .alert-danger, .alert-warning, .alert-info, .alert-light, .alert-dark.  
      5. Additional content
        1. Can use heading, paragraph and/or divider in alert.
        2. Add class .alert-heading with h1-h6.
        3. <hr> of divider and p for paragraph.
      6. Close button or dismiss alert button can be added.
      7. Use JavaScript code without using css classes.
    2. Badges
      1. Small count or labeling component. Also, used in button.
      2. Badges size match with its parent element.
      3. Style classes: 8 types of visual indication color classes (badge-primary, badge-*).
      4. Structure sample: <p>EPT <span class="badge badge-primary">New</span></p>
      5. Rounded badge
        1. <span class="badge badge-pill badge-primary">Galib</span>
      6. Link
        1. <a href="#" class="badge badge-primary">Link</a>
        2. Use color scheme for hover effect.
    3. Breadcrumb
      1. Current page location with navigation hierarchy.
      2. Structure: nav[aria-label=breadcumb]>ol.breadcumb>(li.breadcumb-item>a{home})+li.breadcumb-item.active[aria-current=page]{About}.
      3. Change separator: $breadcrumb-divider: quote(">").
    4. Buttons
      1. <button type="button" class="btn btn-primary">Primary</button>
      2. 9 style classes are used in button (btn-*). Additional class like .btn-link is used for link purpose.
      3. Structure
        1. Class .btn are use for button with <button>, <input> or <a> tag. Add role (role="button") when use <a> tag.
      4.  Remove image or background and add outline
        1. Classes: btn-outline-primary, btn-outline-secondary, btn-outline-success, .btn-outline-danger, btn-outline-info, btn-outline-light, btn-outline-dark.
      5. Size
        1. Small or large: .btn-lg or.btn-sm.
      6. Block level button
        1. <button class="btn btn-primary btn-sm btn-blokc">abc</button>.
      7. Active button
        1. <a href="#" class="btn btn-primary btn-lg active" role="button" aria-pressed="true">Primary link</a>
      8. Disable state
        1. <button type="button" class="btn btn-lg btn-primary" disabled>Button</button>
          1. Include aria-disabled="true" attribute and not valid in <a>.
          2. <a href="#" class="btn btn-primary btn-lg disabled" tabindex="-1" role="button" aria-disabled="true">Primary link</a>
    5. Group button
      1. Group buttons + Single line.
      2. Role can be group or toolbar (set of groups).
      3. Wrap buttons with .btn-group class.
        1.  <div class="btn-group" role="group" aria-label="Basic example">  
  <button type="button" class="btn btn-secondary">Left</button>  
  <button type="button" class="btn btn-secondary">Middle</button>  
  <button type="button" class="btn btn-secondary">Right</button>  
 </div>
      4. Combine set of buttons use role="toolbar".
        1. div.btn-toolbar[role=toolbar,aria-label=abc]>(div.btn-group[role=group]>button.btn.btn-primary.mr-2{Primary})+div.btn-group[role=group]>button.btn.btn-info{Info}
      5. Input group
        1. In get of group items (role=toolbar) you can add input element with prepend item if required.
      6. Size
        1. Button large size: btn-group-lg.
        2. Medium no class.
        3. Button small size: btn-group-sm.
      7. Nesting is possible in button group.
      8. Add .btn-group-vertical class for vertically stacked.
    6. Single content container - Cards
      1. No margin by default.
      2. Basic Structure
        1. .card>img.card-img-top+card-body>h*.card-title+p.card-text
      3. Width
        1. It has no specific width. It inherit width for its parent(100%) unless width is specified.
        2. Use parent grid class(col-*) for maintain width or specified width. 
      1. .card-body
        1. .card-body class use for building block.
        2. Use only when padding section is required inside body.
      2. Title, text, and links (inside .card-body)
        1. .card-title: Mainly used for title to a h* tag.
        2. .card-subtitle: Act like subtitle mainly with to a h* tag.
        3. .card-text: Mainly used for description like p tag.
        4. .card-link: For link.
      3. Images
        1. Basically image caps.
        2. .card-text: Can be added with image.
      4. Image Caps
        1. Body combine with image.
        2. .card-img-top: Place image to the top of the card.
        3. .card-img-bottom: Place image to the bottom of the card.
        4. Structure: .card>img.card-img-top+card-body>h*.card-title+p.card-text
      5. Image Card Background and Overlay
        1. Styling required or not required.
        2. Classes:
          1. .card-img
          2. .card-img-oberlay instead .card-body
        3. Structure: .card.bg-dark.text-white>img.card-img+.card-img-overlay
      6. List Group
        1. Structure: .card>.card-header+(ul.list-group.list-group-flush>li.list-group-item)
      7. Kitchen sink - Mix with image, body (heading, subheading, text), List Group, body(link). 
      8. Header and footer Caps
        1. .card-header: An optional header with div or h*.
        2. .card-footer: An optional footer with div or h*.
      9. Different type of nonresponsive arrangements
        1. Card groups
        2. Card decks
        3. Card columns
    7. Carousel
      1. Slideshow + Cycle.
      2. Can't be nested. Class .active is mandatory.
      3. https://getbootstrap.com/docs/4.1/components/carousel/
    8. Collapse/Accordion
    9. Dropdowns
      1. Works on click not hover.
      2. Basic structure: .dropdown>.dropdown-toggle#myID[aria-haspopup=true][aria-expanded=false]+.dropdown-menu[aria-labelledby=myID]>.dropdown-item
      3. Sample: .dropdown>button#myDropDownID.btn.dropdown-toggle[type=button]{Click}+.dropdown-menu[aria-labelledby=myDropDownID]>a.dropdown-menu*4
      4. For drop left/right
        1. .dropleft/.dropright
      5. Dropdown divider: <div class="dropdown-divider"></div>
    10. Forms
      1. Bootstrap reboot bootstrap forms fields.
      2. Structure: form>.form-group>label[for=myInputID]+input#myInputID.form-control+small
      3. Form controls
        1. .form-control class mainly work on input, select, and textarea.
        2. .form-control-file class only use on type="file".
        3. .form-control-readonly class only use for plain text (readonly) with more styling.
        4. .form-control-range class only use for range value.
      4. Form controls for checkbox and radios
        1. .form-check>.form-check-input#check1[type=checkbox/radio]+label.form-check-label[for=check1]
        2. For inline: .form-check.form-check-inlline>...
        3. Without labels (but add labels for assistive technology with aria-label)
          1. .form-check>.form-check-input.position-static#chick1[type=checkbox/radio][aria-label=...]   
      5. Sizing/height
        1. .form-control-lg or .form-control-sm are used for adjust height with input, select, and textarea. If you don't use this class it is adjust with middle height.
      6. Readonly
        1. No additional class is required boolean attribute is modified for prevent modification input value.
      7. Layout
        1. Display: block; width: 100%; Stack vertically. Additional class.
        2. .form-group class is the easiest way to add structure.
        3. form>(.form-group>label[for=check1]+input.form-control#check1[type=text])*4
      8. Grid
        1. General grid: form>.row>.col-*>input.form-control[type=text]
        2. Overrides column glitter: form>.form-row>col-*>input.form-control[type=text]
      9. Layout + Grid
        1.  form>.form-row>.form-group.col-md-6>...
      10. Horizontal Gird
        1. form>.row.form-group>...
    11. Input Group (prepend/append)
      1. .input-group>.input-group-prepend>input-group-text+input
    12. Jumbotron
      1. .jumbotron>h1+p+hr+p+h6
      2. .jumbotron>.container>...
    13. List Groups
      1. Basic structure: ul.list-group>li.list-group-item.active+li.list-group-item+li.list-group-item.disabled
      2. Link or buttons - actionable list group items with hover, disabled, and active state with class .list-group-item-action.
        1.  Structure: .list-group>a.list-group-item.list-group-item-action.active.
      3. Use .disable on list or anchor, Use disable attribute on buttons.
      4. Remove border - .list-group-flush
        1. <ul class="list-group list-group-flush">
      5. List item colors: list-group-item-*
        1. <ul class="list-group list-group-flush list-group-item-primary">
      6. Can use badge pill.
    14. Modal
    15. Nav VS Navbar
      1. Very similar but different.
      2. Nav start with base class .nav. Navbar start with base class .navbar.
      3. Nav use for building navigation components.
      4. Basically Navbar is a navigation header.
    16. Nav
      1. Use role if nav is using for navigation bar.
      2. .nav class not accept .active state.
      3. Basic structure:
        1. ul.nav>li.nav-item>a.nav-link
        2. (nav/div).nav>(a).nav-item.nav-link
        3. (nav/div).nav>(a).nav-link
      4. Place center: .justify-content-center; Right: .justify-content-end.
      5. Vertical/Stack navigation:
        1. .flex-column
        2. Responsive version: .flex-column-*
      7. Tabs: <ul class="nav nav-tabs">
      8. Pills: <ul class="nav nav-pills">
      9. Fill and justify (force to extent full): <ul class="nav nav-pills nav-fill">
        1. Horizontal space is occupied but items size may be differ.
      10. Justify: <nav class="nav nav-justified">
      11. Active: <a class="nav-link active" href="#">...</a>
      12. Disable: <a class="nav-link disabled" href="#">...</a>
      13. Tabs/pills with dropdown
        1. ul.nav.nav-tabs/.nav-pills>li.nav-item(>a.nav-link)+li.drodown(...)+li.nav-item(>a.nav-link)
      14. Tabs/Pills Content
        1.  <ul class="nav nav-tabs" id="myTab" role="tablist">  
  <li class="nav-item">  
   <a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">Home</a>  
  </li>   
 </ul>  
 <div class="tab-content" id="myTabContent">  
  <div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">...</div>   
 </div>
    17. Navbar
      1. .navbar-expand{-sm|-md|-lg|-xl} is used for responsive collapsing.
      2. Navbar requires wrap wih .navbar and .navbar-expand-*.
      3. By default navbar and their contents are fluid.
      4. Navbars are hidden when printing. Class .d-print is required for print with .navbar.
      5. Tag <nav> is used for navbar add role="navigation" if <div> tag is used.
      6. Supported content
        1. .navbar>.navbar-brand: Company/product name.
        2. .navbar>.collapse+.navbar-collapse: Grouping and hiding inside dropbox.
        3. .navbar>.collapse+.navbar-collapse>.nav-bar: Full-height and lightweight.
        4. .navbar>button.navbar-toggle: Toggle button.
        5. .navbar>button.navbar-toggle>.navbar-toggler-icon: Toggle icon.
        6. .navbar-text: Text inside navbar.
        7. .form-inline: Form inside navbar.
      7. Color
        1. .navbar-dark or .navbar-light + if you reuired customize with bg-*.
      8. Placement
        1. Navbars is a non-static position.
        2. <nav class="navbar fixed-top">
        3. <nav class="navbar fixed-bottom">
        4. <nav class="navbar sticky-top">
    18. Pagination
      1. Use aria-label for description of the purpose.
      2. Structure: nav[aria-label="pages"]>ul.pagination>li.page-item>a.page-link
      3. Can use icons in pagination box.
      4. Active:...>li.page-item.active>a.page-link.
      5. Disable: ...>li.page-item.disabled>a.page-link.
      6. Sizing: .pagination-lg, .pagination-sm.
      7. Alignment:
        1. Left: Default.
        2. Center: nav[aria-label="pages"]>ul.pagination.justify-content-center>...
        3. Right: nav[aria-label="pages"]>ul.pagination.justify-content-end>...
    19. Popovers/Dialog box
      1. <button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="top" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">  Popover </button>
    20. Progress bar/Range
      1. .progress>.progress-bar[role=progressbar][aria-valuenow=0][aria-valuemin=0][aria-valuemax=100]
    21. Scrollspy
      1. Mainly work on nav components or list group.
    22. Tooltips
  5. Utilities
    1. Borders
      1. Add border
        1. <div class="border"></div>
        2. .border-top, .border-right, .border-bottom, .border-left.
      2. Remove border
        1. .border-0, .border-top, .border-right, .border-bottom, .border-right.
      3. Border color
        1. class="border border-primary"
      4. Border-radius/Border-shape
        1. <div class="border rounded">...</div>
        2. classes: .rounded, .rounded-top, .rounded-right, .rounded-bottom, .rounded-left, .rounded-circle, .rounded-0.
        3. For image use only shape classes (<img class="rounded">).
    2. Clearfix
      1. Within  a container clear floated content.
      2. Add .clearfix to the parent element.
    3. Close icon
      1. <button type="button" class="close" aria-label="Close">  <span aria-hidden="true">&times;</span></button>
    4. Color
      1. For anywhere, combination with background color(mainly transparent bg) and color (13).
        1. .text-primary, .text-secondary, .text-success, .text-danger, .text-warning, .text-info, .text-light, .text-dark, .text-body, .text-muted, .text-white, .text-black-50, .text-white-50.
      2. For background color (10)
        1. .bg-primary, .bg-secondary, .bg-success, .bg-danger, .bg-warning, .bg-info, .bg-light, .bg-dark, .bg-white, .bg-transparent.
    5. Embeds
      1. Responsive video/slideshow based on parent width.
      2. Embeds reboot directly to <iframe>, <embed>, <video>, and <object> elements.
      3. Parent element with class .embed-responsive .embed-responsive-* and embeds element with class .embed-responsive-item.  
      4. * is a aspect ratio (21by9, 16by9, 4by3, 1by1).
      5. Explicit descendent class .embed-responsive-item for the styling with other attribute. It's not mandatory but using this class is a good practice.
      6.  <div class="embed-responsive embed-responsive-1by1">  
  <iframe class="embed-responsive-item" src="..."></iframe>  
 </div>
      1. Display
        1. Combine of classes support various effects and all possible values for display.
        2.  Breakpoints, from xs to xl.
        3. For xs
          1. .d-{value}, Like d-flex.
        4. For sm, md, lg, and xl
          1. .d-{breakpoint}-{value}.
        5. Suppose you set .d-lg-flex then flex is set on large screen and more large screen for xl not applicable on md.
        6. Hide or display elements on the device (d-none).
        7. Use d-print-* for print document.
      2. Flex
        1. .d-flex-* creates flexbox container and transform direct children elements into flex items.
        2. Direction of flex items in a flex container
          1. Left to right: .flex-row/.flex-*--row for horizontal direction.
          2. Right to left: .flex-row-reverse/.flex-*--row-reverse for opposite horizontal direction.
          3. Top to bottom: .flex-column/.flex-*--column for vertical direction.
          4. Bottom to top: .flex-column-reverse/.flex-*--column-reverse for opposite vertical direction.
        3. Auto margin for items
          1. Default: No auto margin.
          2. .mr-auto: Push items to right.
          3. .ml-auto: Push items to left.
        4. Justify-content
          1. change the alignment of flex items on the main axis.
          2. justify-content-*-start, .justify-content-*-end, justify-content-*-center, .justify-content-*-between, .justify-content-*-around.
        5. Align items
          1. Alignment of flex items on the cross axis (the y-axis to start, x-axis if flex-direction: column).
          2. .align-items-*-start, .align-items-*-end, .align-items-*-center, .align-items-*-baseline, .align-items-*-stretch.
        6. Align self
          1. Opposite of align items. Flexbox items to individually change their alignment on the cross axis (the y-axis to start, x-axis if flex-direction: column).
          2. .align-self-start, .align-self-end, .align-self-center, .align-self-baseline, .align-self-stretch.
        7. Fill
          1. Equal width with horizontal space.
          2. .flex-fill or .flex-*-fill.
        8. Grow
          1. .flex-glow-1[*] class grab available space.
        9. Shrink
          1. .flex-shrink-1[*] class create wrap new for shrink.
        10. Wrap
          1. I think here wrap means all items in a group.
          2. Default: No wrap. Also, you can use .flex-nowrap.
          3. Wrapping with .flex-wrap
          4. Reverse wrapping with .flex-wrap-reverse.
          5. .flex-wrap-* or .flex-reverse-*.
        11. Wrap items align
          1. <div class="d-flex align-content-* flex-wrap">  ...</div>
        12. Order
          1. Simply change item default position order.
          2. .order-[0-12] or .order-*-[0-12].
      3. Float
        1. Maintain the float behavior with below class.
        2. .float-left, .float-right, .float-none or float-*-*. 
      4. Position
        1. Maintain the position behavior with below class.
        2. Position class are available but not responsive.
          1. .position-static, .position-relative, .position-absolute, .position-fixed, .position-sticky.
        3. Position Top/Bottom
          1. <div class="fixed-top/bottom">...</div>
          2. Position an element at the top/bottom of the viewport, from edge to edge.
        4. Sticky top
          1. When scroll past then osition an element at the top of the viewport, from edge to edge.
          2. <div class="sticky-top">...</div>
      5. Shadow
        1. Shadows are disabled in bootstrap.
        2. Default or .shadow-none.
        3. Small shadow: .shadow-sm.
        4. Medium shadow: .shadow.
        5. Large shadow: .shadow-ld.
      6. Sizing
        1. Default value: Try to fill the parent space. Class .w-auto or .h-auto act like default value.
        2. Classes .mw-100 and .mh-100 are use for 100% maximum width or maximum height.
        3. Classes .w-25, .w-50, .w-75 and .w-100 maintain the width of an element respect of 25%, 50%, 75% and 100%.
        4. Classes .h-25, .h-50, .h-75 and .h-100 maintain the height of an element respect of 25%, 50%, 75% and 100%.
      7. Spacing (width/height)
        1. Spacing classes are applied from min-width:0 and up with no boundary. Thus, it start from xs to xl.
        2. Example- .m-2 or .p-4 works for four side. Also, works for all breakpoints.
        3. Format:
          1. {property}{sides}-{size} for xs
          2. {property}{sides}-{breakpoint}-{size} for sm, md, lg, and xl.
        4. Auto
          1. Only works for margin.
          2. <div class="m-auto">...</div>
        5. Sample
          1. .ml-0, .mt-4, .p-4, .mr-sm-4, .pb-xl-3.
      8. Horizontal centering
        1. Horizontally centering fixed-width block level content.
        2. <div class="mx-auto" style="width: 200px;">  Centered element</div>
      9. Text
        1. Control alignment, wrapping, weight, and more.
        2. Text justify
          1. <p class="text-justify">Excellent Programming Tricks...</p>
        3. Left, right or center alignment with responsive breakpoints
          1. Text alignment classes realign text component.
          2. .text-left, .text-center, .text-right.
          3. .text-sm-*, .text-md-*, .text-lg-*, .text-xl-*.
        4. Accept Overflow
          1. Prevent text from wrapping with a .text-nowrap class.
        5. Override overflow text with an ellipsis (...)
          1. <span class="d-inline-block text-truncate" style="max-width: 50px;">  Excellent Programming Tricks</span>
          2. Require display: block/inline-block.
        6. Text transform
          1. All text lowercase: .text-lowercase.
          2. All text uppercased: .text-uppercase.
          3. First word capitalized: .text-capitalize.
        7. Font weight and italic
          1. <p class="font-weight-bold">Bold text.</p>
          2. <p class="font-weight-normal">Normal weight text.</p>
          3. <p class="font-weight-light">Light weight text.</p>
          4. <p class="font-italic">Italic text.</p>
        8. Monospace
          1. <p class="text-monospace">Galib</p>
      10. Vertical align
        1. Applicable on inline, inline-block, inline-table, and table cell.
        2. Select from .align-baseline, .align-top, .align-middle, .align-bottom, .align-text-bottom, and .align-text-top as needed.
      11. Visibility
        1. <div class="visible">...</div>
        2. <div class="invisible">...</div>
    6. Ref: https://getbootstrap.com/docs/4.1/
    3 comments
    1. Nandhini PJune 20, 2019 at 6:14 PM


      Nice blog.That is very interesting; you are a very skilled blogger. I have shared your website in my social networks! A very nice guide.
      Web Designers in Hyderabad
      web designing companies in Hyderabad

      ReplyDelete
    2. rongno1June 25, 2019 at 10:13 PM


      Telenor Internet Packages 2g+3g+4g Daily 3days Weekly Monthly Internet Bundle My Best

      Friends Choose Your Favorite Package And Get Code Dial Your Phone And Enjoy

      If You Use Telenor Networks Then Let Us Tell You All The Internet Packages Of Telenor So That You Can Use The Best Internet And Besides,

      If You Have Not Yet Used Telenor Networks Then You Can You Or Your Wish Is Exactly What

      We Call You Telenor As Well As The Packages Of The Daily Month Package For A Three-Day

      Package, Seven Days Package, And The Weekend Package Means To Tell You Today,telenor internet pakages

      ReplyDelete
    3. KamiApril 21, 2020 at 2:02 PM

      Thanks for sharing nice post
      https://www.getsocialguide.com/

      ReplyDelete

    Authentic аnd Excellent

    Website

    HTML Template

    Wordpress Theme

    Database applications

    OR

    Application services?

    Please Contact With Us

    Excellent Programming Tricks (EPT) || Iftekhar-IT || We develops the Web applications and the WordPress templates. || Excellent Programming Tricks (EPT)
    Excellent Programming Tricks

    Iftekar galib is the founder of an excellent programming tricks blog. Also, he develops the Web applications and the WordPress templates. For our consistent clientele, iftekhar-it.com was started as a platform to perform services like Website Development and Database development. We aslo extend our business like Ecommerce, Online Promotions and custom requirements of our clients.


    We have good technical knowledge and experience, and know exactly what we are doing. Regularly we detect the latest technologies and innovative usages.

    Popular Posts
    Fontawesome 5 Guideline
    Short note of https://fontawesome.com/how-to-use/svg-with-js <i class="fab fa-apple fa-xs"></i> fa are not used in ...
    The Mask of Zorro | Movie | Favoirate quotes
    He is used for fighting your used for drinking there is no condition to fight a professional soldier. Preparer yourself before fight. No...

    © 2020 Blogger Theme by Iftekhar IT || Excellent Programming Tricks

    Execllent Programming Tricks. Powered by Blogger.