Welcome to Complete Web Development Course With Jhankar Mahbub, Milstone 03, Module-13 Practice Section, I am Nizam Batch 07.


Module-13 : Responsive Layout Using Bootstrap

Video 13-1: Module Introduction and Recap

Download botstrap.min css and bootstrap.min.css file for ofline use bootstrap

Bootstrap Layout,content, Typography, Image-fluid,component, accordian, card, carosel, navbar, utilities, color,spacing, 1rem=16px,

Accordion


This is the first item's accordion body. It is shown by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow.

This is the second item's accordion body. It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow.

This is the third item's accordion body. It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow.

Video 13-2 : Flex layout, justify content, align items, horizontal center

Valantines Day

Price: $100

Valantines Day

Price: $100

Valantines Day

Price: $100


Video 13-3 : Bootstrap responsive Container and breakpoints

sm= small device, xl= extra large, container container-fluid=taking full width, grid, 12 column layout, 6-6=for two column, 4-4-4=for 3 column, for mobile device 12=1 col, col-lg-4, col-md-6, container>row>container, gx- horijontal gutter or gap. gy=vertical gutter.


Video 13-4 Grid : System with 12 column layout, responsive grid

5 Concepts for Responsive Website

  1. Container
  2. Row
  3. Column
  4. Breakpoints
  5. 12 columns with breakpoints

Responsive Cols

column-1

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Id blanditiis consequatur, inventore impedit officia animi quaerat nobis assumenda et, dolorum neque repudiandae a molestias porro possimus eius est iure. Ratione!

column-2

Lorem ipsum dolor sit amet consectetur, adipisicing elit. Aliquam mollitia adipisci veritatis recusandae praesentium perferendis aperiam dolore laudantium, est a inventore deserunt, tenetur sed quia eaque quae! Explicabo, veritatis cupiditate.

column-3

Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugit labore quis nam corporis. Reprehenderit, voluptatum! Voluptas commodi quis facilis dolore, quaerat nulla rem tenetur magni, ipsam eius voluptatibus nesciunt eligendi?

column-4

Lorem ipsum dolor sit amet consectetur adipisicing elit. Assumenda, consequatur, placeat dolor consectetur doloribus ad quos est nulla sunt ex cumque corrupti. Error exercitationem aperiam labore, iste animi perferendis obcaecati!

Again Responsive

Lorem ipsum dolor sit amet consectetur adipisicing elit. Perferendis, dolores nihil quisquam mollitia voluptatibus officiis. Voluptatibus dicta est maiores libero sapiente quae distinctio adipisci, autem ex eligendi dolorum labore minus illo magni nostrum accusamus architecto, alias pariatur. Similique corporis soluta deserunt! Corporis cum maiores eos necessitatibus velit sed veniam eum?

Video 13-5 : Responsive players using bootstrap grid columns

Team players

Player-1

Lorem ipsum dolor sit amet consectetur adipisicing elit. Exercitationem deleniti mollitia facere rem incidunt, porro commodi labore veniam sit nulla!

Player-2

Lorem ipsum dolor sit amet consectetur adipisicing elit. Exercitationem deleniti mollitia facere rem incidunt, porro commodi labore veniam sit nulla!

>

Player-3

Lorem ipsum dolor sit amet consectetur adipisicing elit. Exercitationem deleniti mollitia facere rem incidunt, porro commodi labore veniam sit nulla!

Player-4

Lorem ipsum dolor sit amet consectetur adipisicing elit. Exercitationem deleniti mollitia facere rem incidunt, porro commodi labore veniam sit nulla!

Responsive experiment

Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloribus non consectetur ad sequi vero iste facilis eos totam. Dicta, ad.

Sed quos ad et a maiores aliquid modi voluptas! Vero quia in esse laborum ratione error unde dolor odio quos.

Explicabo blanditiis maxime a rem illum quos ipsam, laudantium hic? Recusandae hic, facilis illo voluptatem animi temporibus dolorum error voluptatibus?

Iste esse rem dolore? Repudiandae unde facilis deleniti ad soluta praesentium assumenda illo suscipit consequuntur numquam quod quo, corrupti nulla.

Nam, cum velit quo quisquam asperiores consequatur nostrum repellat? Impedit minus magni nulla voluptatem nemo, tempore animi cumque corporis. Quidem.

Sint voluptatibus quas et? Corrupti dolores aliquid, hic, magni beatae veritatis magnam aliquam maxime facilis, placeat sint sunt non? Placeat!

Quasi odit alias quidem aut, deleniti harum culpa ratione tempora, praesentium quis accusamus fugiat. Corrupti debitis adipisci atque dolorum eos!

Possimus delectus magnam repellendus esse et libero ipsum natus tenetur minus, sit distinctio necessitatibus ipsam corrupti quidem facere unde voluptas?

Blanditiis, beatae in ipsam voluptatibus officiis tempore dolores dolorem dolore alias dolor molestias facere, explicabo quae suscipit error odio consectetur.

Excepturi eligendi voluptatibus, culpa temporibus ad provident id reiciendis porro, reprehenderit, eius necessitatibus. Accusamus culpa iste vitae quisquam neque ullam.

Sed quia necessitatibus aliquid dolorum praesentium! Iusto voluptate inventore temporibus, cupiditate minima eligendi quaerat tempore ducimus est quibusdam distinctio possimus!

Voluptatum repellendus alias minima provident atque in quisquam exercitationem adipisci, accusamus fugiat aliquid ullam? Placeat eligendi expedita ad deleniti tempora.

Video 13-6 : (Recap) More Responsive Example for Bags and Jackets

Buy our Bags

Bag 1

Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ea suscipit obcaecati atque itaque alias sunt nihil enim dolore, earum minima magni temporibus. Soluta voluptatem ratione quos necessitatibus neque sapiente vel!

Bag 2

Magni, sunt consectetur. Voluptate, est quia earum dolorem fuga enim ea! Reprehenderit labore pariatur est unde cupiditate incidunt ratione voluptate, laboriosam illo et vero praesentium nisi fuga dolorum quibusdam sit!

Bag 3

Explicabo illo iusto consequatur ullam, saepe suscipit perspiciatis ipsam nesciunt sapiente incidunt nihil laboriosam quisquam magnam dolores rerum sit at. Placeat quasi corrupti ipsam pariatur quam repudiandae inventore voluptates deleniti.

Bag 4

Eos in incidunt quo earum fugit? Numquam exercitationem in quasi praesentium veniam eligendi consectetur illum laudantium nulla reiciendis rem facere explicabo, quis maxime! Nobis ipsam soluta maxime vel amet harum.

Bag 5

Explicabo quis unde officiis, perspiciatis nostrum dolores incidunt sunt voluptates nihil fugit ex dicta consequuntur quam iure nemo. Odit labore vitae dolorem iste possimus enim itaque. Cumque accusamus quibusdam esse?

Bag 6

Laborum perspiciatis ex animi quibusdam quam nobis deserunt praesentium enim earum quas, quo neque? Unde a odit numquam ad, debitis facere rerum sequi nihil doloremque, ratione quas nemo nisi dignissimos!

Video 13-7 :Responsive Card layout using card layout and gutters


...
Messi

This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

...
Neymar

This is a short card.

...
Mbappo

This is a longer card with supporting text below as a natural lead-in to additional content.

...
Ronaldo

This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

Video: 13-8 Create Form with Floating label and form validation

Please Login!

We'll never share your email with anyone else.

Modal


Video 13-9 : Module Summary and Explore Bootstrap examples and themes

See Examples of bootstrap, sidebar, bootstrap theme

Video 13_5-1 Practice Bootstrap to create a convention center landing page

QUIZ

Q1: Which flex class will you use to put elements in the horizontal center of the available width?
Ans: justify-content-center

Q2: Which flex class will you use to put elements in the vertical center of the available width?
Ans: align-items-center

Q3: What is a carousel? It’s ok if you forgot! Just go to the bootstrap website and check it out.
Ans: Image Slides in a website

Q4: If you want to have three columns in a row, how many bootstrap columns should each div have?
Ans: 4

Q5: Which bootstrap CSS class will you use to put the navbar at the top of the page? Feel free to check out the bootstrap website.
Ans: fixed-top

Q6: Which class will give you vertical gutters in bootstrap grid system?
Ans: gy-5

Q7: Why did bootstrap divide the grid into 12 imaginary columns?
Ans: 12 is easily divisible by 2, 3, 4 and 6

Q8: How wide are bootstrap’s gutters by default. (You can look it up in bootstrap website Layout > Gutters)
Ans: 1.5rem(24px)

Q9: Which one is not a valid grid class prefix?
Ans: col-sx-4

Q10: How would you make your website responsive?
Ans: By using Responsive classes for different divice width.

Video 13_5-1 Practice Bootstrap to create a convention center landing page

QUIZ

Q1: What is an accordion on a website? (Just google the question )
Ans: Vertically stacked list of headers that can be clicked to show or hide content.

Q2: If you want to have 3 equal columns in Bootstrap, which class would you use?
Ans: col-md-4

Q3: What is the purpose of the nav tag?
Ans: To contain all the elements needed for navigation

Q4: What is 1.5 rem in font size?
Ans: 24px

Q5: What does my-5 mean for bootstrap? (be careful...this one could be tricky)
Ans: Top and bottom margin will be 3rem.

Q6: How will you set text alignment in the middle of the page using bootstrap? (feel free to check out the documentation)
Ans: text-center

Q7: What is pagination in web development? (if needed, google it)
Ans: Breakdown the content of a website into multiple pages within one page.

Q8: What is bootstrap? (Lame! This question, after exploring bootstrap for 3 days)
Ans: CSS Framwork for developing responsive and mobile-first website

Q9: What is a website layout?
Ans: Element placement and their position in a website.

The End