Scribd
Upload
138 views

CSS Flexbox With Bootstrap

This document contains a group presentation on CSS Flexbox with Bootstrap. It includes an introduction to Flexbox, descriptions of Flexbox properties like flex-direction, flex-wrap, justify-content, align-items and more. It provides an example webpage using Flexbox and describes how Flexbox can be used with Bootstrap by adding simple class names. References for further reading on Flexbox and Bootstrap are also included.

Uploaded by

Siva Krishnan
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
138 views

CSS Flexbox With Bootstrap

This document contains a group presentation on CSS Flexbox with Bootstrap. It includes an introduction to Flexbox, descriptions of Flexbox properties like flex-direction, flex-wrap, justify-content, align-items and more. It provides an example webpage using Flexbox and describes how Flexbox can be used with Bootstrap by adding simple class names. References for further reading on Flexbox and Bootstrap are also included.

Uploaded by

Siva Krishnan
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 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