Scribd Logo
Upload

Welcome to Scribd!

  • CSS Flexbox With Bootstrap

    Uploaded by

    Siva Krishnan
    37 views12 pages

    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

    Copyright:

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

    CSS Flexbox With Bootstrap

    Uploaded by

    Siva Krishnan

    Copyright:

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

    EASWARI ENGINEERING COLLEGE

    (AUTONOMOUS)
    BHARATHI SALAI, RAMAPURAM, CHENNAI – 89
    DEPARTMENT OF MECHANICAL ENGINEERING

    BATCH NO: 02 IV YEAR C SECTION DATE : 21-11-2022

    191CSO701T – WEB DESIGNING


    GROUP PRESENTATION

    CSS FLEXBOX WITH BOOTSTRAP

    Presented by

    SHREERAAM G 310619114082
    SRIRAM KUMAR T 310619114086
    SUSEENDRAN M S 310619114094

    1
    Agenda
    •Introduction to Flexbox
    •Flexbox Properties
    • Flex direction
    • Flex wrap
    • Justify content
    • Align items
    • Align self
    • Gap
    • Child Element Properties

    •Example Webpage using Flexbox


    •Flexbox using Bootstrap

    CSS FLEXBOX WITH BOOTSTRAP 2


    Introduction
    What is Flexbox ?
    Flexbox (or) Flexible box is a layout module that provides more efficient way
    to align items, distribute space among items and justify the content easily
    even when the sizes are dynamic or unknown.
    Flexbox is a complete module with many set of properties. In which some of
    them are set to parent element and some are set to the child elements.

    CSS FLEXBOX WITH BOOTSTRAP 3


    Flex Properties
    PARENT CONTAINER .container {

      display: flex;

      flex-direction: row;

                      row-reverse;

                      column;

                      column-reverse;
    Flex-direction
      flex-wrap:  wrap;

                  no-wrap;

                  wrap-reverse;

      flex-flow:  column wrap;

                  column-reverse no-wrap;

    Flex-wrap               etc.,  

    CSS FLEXBOX WITH BOOTSTRAP 4


    Flex Properties
    .container {
    JUSTIFY CONTENT ALIGN ITEMS
      justify-content:flex-start;
                      flex-end;
                      center;
                      space-between;
                      space-around;
                      space-evenly;
       
      align-items:    flex-start;
                      flex-end;
                      center;
                      stretch;
                      baseline;
    }

    CSS FLEXBOX WITH BOOTSTRAP 5


    Flex Properties
    ALIGN CONTENT GAP
    .container {
      align-content:  flex-start;
                      flex-end;
                      center;
                      stretch;
                      space-between;
                      space-around;
                      space-evenly;

      gap:  10px;
            30px;
            10px 30px;
    }

    CSS FLEXBOX WITH BOOTSTRAP 6


    Flex Properties
    CHILD ELEMENT

    ORDER:
     The order property controls the order in which the element has to be displayed.

    FLEX-GROW:
     In what ratio should the container’s remaining space be distributed to the child element?
    The default value is 1.

    FLEX-SHRINK:
     In what ratio, the child element has to shrink if the screen size or window changes? The
    default value is 1.

    FLEX-BASIS:
     The minimum or maximum threshold value below or above which the flex-grow or shrink

    ALIGN-SELF:
     Over-ride align-items property and align each child element individually.
     transition should change. The default value is 0.

    CSS FLEXBOX WITH BOOTSTRAP 7


    Flexbox Example HTML Page
    <head>
      <meta name="viewport"
            content="width=device-width, initial-scale=1.0" />
      <link rel="stylesheet" href="style.css" />
    </head>
    <body>
      <div class="container">
        <div class="row">
          <div class="card-01"></div>
          <div class="card-01"></div>
          <div class="card-01"></div>
        </div>
        <div class="row">
          <div class="card-02"></div>
          <div class="card-02"></div>
        </div>
        <div class="row">
          <div class="card-03"></div>
        </div>
      </div>
    </body>

    CSS FLEXBOX WITH BOOTSTRAP 8


    Flexbox Example CSS Page
    .row { .card-03 {
      width: 100%;   background: #ccccff;
      display: flex;   max-width: 940px;
      justify-content: center; }
      flex-wrap: wrap; @media (max-width: 800px) {
    }   .card-01 {
    .card-01, .card-02, .card-03 {     flex: 100%;
      position: relative;     max-width: 600px;
      flex: 1;   }
      height: 150px;   .card-02 {
      margin: 10px;     flex: 100%;
      border-radius: 5px;     max-width: 600px;
    }   }
    .card-01 {   .card-03 {
      background: #6495ed;     flex: 100%;
      max-width: 300px;     max-width: 600px;
    }   }
    .card-02 { }
      background: #40e0d0;
      max-width: 460px;
    }

    CSS FLEXBOX WITH BOOTSTRAP 9


    Flexbox Example OUTPUT

    Laptop / Desktop Mobile Devices

    CSS FLEXBOX WITH BOOTSTRAP 10


    Flexbox using Bootstrap
    Just by adding “d-flex” as the class name to the parent container. All its child
    element behaves flexibly.
    <div class="container d-flex">
      <div class="item"></div>
    </div>

    All the properties we have seen till now can be created just by adding a class
    name to either the parent container (or) child element.

    class="d-flex flex-row align-items-center justify-content-around"

    <div class="d-flex flex-wrap">


      <div class="order-1 flex-grow-1"></div>
    </div>

    CSS FLEXBOX WITH BOOTSTRAP 11


    References
    https://getbootstrap.com/docs/5.2/utilities/flex/
    https://css-tricks.com/snippets/css/a-guide-to-flexbox/

    CSS FLEXBOX WITH BOOTSTRAP 12

    You might also like