Mastery Of Bootstrap 5 - Unlock Bootstrap From Basic To Pro

Posted By: ELK1nG

Mastery Of Bootstrap 5 - Unlock Bootstrap From Basic To Pro
Published 11/2024
MP4 | Video: h264, 1920x1080 | Audio: AAC, 44.1 KHz
Language: English | Size: 73.24 GB | Duration: 73h 4m

Easy Step-by-Step Guide To Gain Practical Mastery of Bootstrap 5 || Creating Responsive Web Layouts ||

What you'll learn

Learn how to link Bootstrap in your projects using Bootstrap CDN or by using the downloaded complete Bootstrap folder.

Learn how to use Bootstrap's responsive Stack (Horizontal/Vertical Stack) to design website layouts

Learn how to use Bootstrap's Row columns and Flex design to create different website layouts

Master the Bootstrap's responsive navbar, navs, pills and tabs, offcanvas, dropdown menu.

Understand the mastery of Bootstrap's 12 column-grid system to design different website layouts

Explore how to structure Bootstrap's alert, modal, toast, popover, tooltips.

Mastery of Bootstrap's carousel and how to customize it

Use Bootstrap's classes (icons, links, float, sizing, spacing, text, bg-color, display, position, border) to style your elements quickly and efficiently.

Master the art of using Bootstrap to structure pagination, buttons, badges, progress bar, breadcrumb

Mastery of Bootstrap's flexible scrollspy, accordion, collapse layouts.

Apply Bootstrap's classes to structure Table, List groups, Cards, Forms

Requirements

You already know how to code with HTML and CSS. You have a good understanding of CSS

Already know how to work with Flexbox, though not a must.

You will need a laptop that has a code editor installed - e.g. Visual Studio Code, Sublime text, etc. I will be using Visual Studio Code

Description

I'm thrilled to have you here!!! This is a COMPREHENSIVE Bootstrap 5  course**Please Note: This Bootstrap course DOES NOT INCLUDE Map or SASS or Mixins or SASS Customization. This course DOES NOT INCLUDE installing Bootstrap through NPM.Thank you for purchasing this comprehensive Bootstrap course.  In this course, we will be able to demystify Bootstrap and understand the why behind the what in Bootstrap 5. I can't wait to guide you through this powerful tool that will transform your web development skills using the Bootstrap framework. If you're a beginner in Bootstrap and you are trying to get a grip of website layout development or you are an experienced developer looking to upgrade your front-end skills, this course is designed to provide you with a solid foundation and practical knowledge to build stunning, responsive websites with ease.At the end of this course:- You will be able to design and craft a premium website with different pages using the functionality of Bootstrap frameworkWhy this course? - Learn how to link Bootstrap in your projects using Bootstrap CDN or locally by using the downloaded complete Bootstrap folder.- Understand the mastery of Bootstrap's 12 column-grid system to design different website layouts  - Learn how to use Bootstrap's Row columns and Flex design to create different website layouts - Learn how to use Bootstrap's responsive Stack (Horizontal/Vertical Stack) to design website layouts- Mastery of Bootstrap's carousel and how to customize it - Mastery of Bootstrap's scrollspy, accordion, collapse layouts.- Master the Bootstrap's responsive navbar, nav, pills and tabs, offcanvas, dropdown menu.- Apply Bootstrap's classes to structure Table, List groups, Cards, Forms- Master the art of using Bootstrap to structure pagination, buttons, badges, progress bar, breadcrumb- Explore how to structure Bootstrap's alert, modal, toast, popover, tooltips.- Use Bootstrap's classes (icons, links, float, sizing, spacing, text, bg-color, display, position, border) to style your elements quickly and efficientlyWhy Bootstrap?Bootstrap is the most popular front-end development framework in the world. Bootstrap can help you create a great website and get your website up and running in a short period of time. Bootstrap is very easy to get started – all you need is a good understanding of HTML and CSS.With Bootstrap, you can achieve a consistent and professional-looking design across your mobile application. It offers a set of predefined styles and themes that can be easily customized to match your brand's identity. Bootstrap is created with modern web browsers in mind and it is compatible with all modern browsers such as Chrome, Firefox, Safari, Internet Explorer, etc.With Bootstrap, developers can save time and effort by utilizing pre-designed components, as well as the grid system for creating responsive layouts. It also provides numerous styling options and utilities to enhance the overall appearance and functionality of websites.Bootstrap is widely used by web developers to streamline the web development process and create consistent and visually appealing user interfaces.The grid system in Bootstrap 5.* comes with a new, more flexible layout. It introduces a new gap utility and no longer relies on floats.There are lot more things you can do with Bootstrap.You can easily create responsive websites.You can work with text utilities, shadow, opacity, border, links, background colours, etc.You can quickly create multi-column layout with pre-defined classes.You can quickly create different variation of navigation bar.Enroll now and enjoy the trip into Bootstrap 5 Framework.

Overview

Section 1: Introduction to this course

Lecture 1 Introduction - Part 1

Lecture 2 Introduction - Part 2

Lecture 3 Introduction - Part 3

Lecture 4 Introduction - Part 4

Lecture 5 Check out CSS customization of Bootstrap classes projects

Lecture 6 IMPORTANT information: PLEASE WATCH before you buy!!!

Lecture 7 Introduction - Part 5

Lecture 8 Introduction - Part 6

Lecture 9 Introduction - Part 7

Section 2: Downloading a text editor

Lecture 10 How to download the text editor: VS Code or Sublime Text

Section 3: Linking Bootstrap locally or via CDN to your web project - IMPORTANT LESSONS!!!

Lecture 11 How to Link Bootstrap to your project - IMPORTANT LESSON!!!

Lecture 12 Our Bootstrap Template & accessing the Bootstrap CSS file - IMPORTANT LESSON!

Lecture 13 Accessing the Bootstrap JS files - bundle.js and snippets.js (IMPORTANT!!)

Section 4: Bootstrap Breakpoints

Lecture 14 Breakpoints

Section 5: Bootstrap Icons

Lecture 15 Bootstrap icons - 1st method (IMORTANT!!!)

Lecture 16 Bootstrap icons - 2nd method (IMORTANT!!!)

Section 6: Bootstrap Text and Headings Tool

Lecture 17 Text Utility - Part 1

Lecture 18 Text Utility - Part 2

Lecture 19 Text Truncate

Lecture 20 Text Selection

Lecture 21 Pointer Events

Lecture 22 Monospace

Lecture 23 Blockquote

Lecture 24 Headings and Display Heading

Section 7: Bootstrap Opacity and Shadow

Lecture 25 Opacity

Lecture 26 Shadow

Section 8: Bootstrap Text color, Background-color

Lecture 27 Text Color and opacity

Lecture 28 Text Background-color with opacity

Lecture 29 Background-color with opacity and gradient

Section 9: Bootstrap Links

Lecture 30 Link utility

Lecture 31 Reset colour

Lecture 32 Stretched link

Lecture 33 Icon link - 1st method

Lecture 34 Icon link - 2nd method (IMPORTANT!!!)

Lecture 35 Changing the colours on the icon link

Lecture 36 Focus ring

Section 10: Bootstrap Border Utility

Lecture 37 Border - color, opacity, width, additive, subtractive

Lecture 38 Border Radius

Section 11: Bootstrap Display Utility

Lecture 39 Display utility - part 1

Lecture 40 Display utility - part 2

Section 12: Bootstrap Overflow

Lecture 41 Overflow utility

Section 13: Bootstrap Vertical rule and Horizontal rule

Lecture 42 Vertical Rule

Lecture 43 Horizontal Rule

Section 14: Bootstrap Position - Relative, Absolute, Fixed and Sticky

Lecture 44 Position Relative

Lecture 45 Position Absolute

Lecture 46 Position Absolute - When it has a parent

Lecture 47 Position Fixed and Sticky

Section 15: Bootstrap Visibility: hidden, Display: none and Visually-hidden

Lecture 48 Visibility: hidden vs Display: none

Lecture 49 Visually hidden

Section 16: Bootstrap Spacing and Sizing

Lecture 50 Spacing - Padding and Margin

Lecture 51 Mx-Auto

Lecture 52 Sizing - Width and Height

Lecture 53 Max-Width and Max-Height on Images

Section 17: Bootstrap Float utility

Lecture 54 Float Property

Lecture 55 Float property on images/videos (floating 2 equal items)

Lecture 56 Floating 3 and 4 equal items

Section 18: Bootstrap Breadcrumb

Lecture 57 Breadcrumb

Section 19: Bootstrap Buttons and Close Button

Lecture 58 Buttons - btn and btn-color

Lecture 59 Outline, Size and Block buttons

Lecture 60 Toggle Buttons

Lecture 61 Explaining Why there is need for aria Attribute

Lecture 62 Close Button

Lecture 63 Button Group

Lecture 64 Checkbox and Radio Button

Lecture 65 Vertical Button Group

Section 20: Bootstrap Pagination

Lecture 66 Pagination Structure - IMPORTANT LESSON!!!

Lecture 67 Working with icons on Pagination

Lecture 68 Active and Disabled states

Lecture 69 Sizing of pagination

Lecture 70 Alignment of pagination

Section 21: Bootstrap Progress bar

Lecture 71 Progress bar - width, color and height

Lecture 72 Progress bar - Striped and Animated

Lecture 73 Progress bar - Multiple Progress Bar

Section 22: Bootstrap Badges

Lecture 74 Badges

Lecture 75 Positioned Badges

Lecture 76 Keyboard Input

Section 23: Bootstrap Placeholders

Lecture 77 Placeholder and color of placeholder

Lecture 78 Sizes of placeholder

Lecture 79 Animation of placeholder

Section 24: Bootstrap Table

Lecture 80 Structure of a table - IMPORTANT LESSON!!

Lecture 81 Table caption, small table, table group dividers

Lecture 82 Vertical Alignment

Lecture 83 Table Borders

Lecture 84 Responsive table

Lecture 85 Background colors on table, on rows, on cells

Lecture 86 Striped table

Lecture 87 Hoverable table and Active table

Section 25: Bootstrap Images, Videos, Figures and Ratio

Lecture 88 Fluid Images and Videos with thumbnail

Lecture 89 Aligning Images and Videos

Lecture 90 Object-fit for Images and Videos

Lecture 91 Figures

Lecture 92 Ratio - Aspect Ratio

Section 26: Bootstrap Carousel

Lecture 93 Structure of a carousel - IMPORTANT LESSON!!!

Lecture 94 Carousel Indicators

Lecture 95 Carousel Captions

Lecture 96 Carousel dark, Autoplay and Intervals

Lecture 97 Carousel Crossfade

Lecture 98 Customizing the Carousel indicators previous and next arrows

Lecture 99 Customizing the carousel caption

Lecture 100 Customizing the carousel indicators

Lecture 101 Customizing the Carousel indicators as images

Lecture 102 Customizing the carousel arrow container

Section 27: Bootstrap Alert

Lecture 103 Alert and Alert Color

Lecture 104 Alert Link

Lecture 105 Adding More Contents into the alert box

Lecture 106 Adding Icons to the alert

Lecture 107 Dismissible Alert

Lecture 108 Alert triggered by a button and Customizing the message

Lecture 109 Customizing another trigger button for alert

Lecture 110 Dismissible alert with icon

Section 28: Bootstrap Toast

Lecture 111 Toast Structure - Part 1 - IMPORTANT LESSON!!

Lecture 112 Toast Structure - Part 2 - IMPORTANT!!!

Lecture 113 Adding image and buttons to the toast

Lecture 114 Adding Finishing touches to the toast

Section 29: Bootstrap Modal

Lecture 115 Structure of a Modal: part 1 - IMPORTANT LESSON!!

Lecture 116 Structure of a Modal: part 2 - IMPORTANT LESSON!!

Lecture 117 Scrollable Modal

Lecture 118 Embedding YouTube Video /Adding Images & Videos to Modals

Lecture 119 Vertically Centered Modal

Lecture 120 Toggle between modals

Lecture 121 Modal Sizes - sm, lg, xl

Lecture 122 Full Screen Modal

Section 30: Bootstrap Offcanvas

Lecture 123 Structure of offcanvas: IMPORTANT LESSON!!

Lecture 124 Offcanvas placement and Static offcanvas

Lecture 125 Offcanvas Responsive Sizes

Lecture 126 Enable Body Scrolling and Dark offcanvas

Section 31: Bootstrap Tooltip

Lecture 127 Structure of a Tooltip - IMPORTANT!!!!

Lecture 128 Tooltip placement

Lecture 129 Tooltip on links, text, icons

Section 32: Bootstrap Popovers

Lecture 130 Structure of a popover - IMPORTANT!!!

Lecture 131 Hoverable popover and Dismissible popover

Lecture 132 Placement of Popovers

Section 33: Bootstrap Dropdown Menu

Lecture 133 Structure of Dropdown - IMPORTANT!!!

Lecture 134 Dropdown offset

Lecture 135 Dropdown with active, non-interactive, disabled, header, divider

Lecture 136 Dark dropdown

Lecture 137 Dropdown link

Lecture 138 Button Group Dropdown

Lecture 139 Auto close behaviour in Dropdown

Lecture 140 Split dropdown button

Lecture 141 Directions - dropup, dropend, dropstart, centered

Lecture 142 Sizing of the dropdown

Lecture 143 Menu Alignment and Responsive alignment

Section 34: Bootstrap Navs, Pills & Tabs

Lecture 144 Basic Structure of the nav - IMPORTANT LESSON

Lecture 145 Horizontal alignment of nav

Lecture 146 Vertical nav

Lecture 147 Underlined nav

Lecture 148 Nav with dropdown - IMPORTANT LESSON

Lecture 149 Using and / elements for nav

Lecture 150 Pills - IMPORTANT LESSON

Lecture 151 Applying flex utility to pills and nav

Lecture 152 Pills with dropdown

Lecture 153 Tabs

Lecture 154 Tab with dropdown

Lecture 155 Nav Tabs JavaScript behavior - Part 1 (IMPORTANT)

Lecture 156 Nav Tabs JavaScript behavior - Part 2 (IMPORTANT)

Lecture 157 Pills JavaScript behavior

Lecture 158 Vertical Pills Javascript behaviour (IMPORTANT)

Section 35: Bootstrap Containers

Lecture 159 Containers

Section 36: Bootstrap Navbar

Lecture 160 Basic Structure of a navbar - IMPORTANT LESSON

Lecture 161 Navbar-brand with image and text

Lecture 162 Navbar without using list

Lecture 163 Placing navbar-brand to the right

Lecture 164 Navbar with dropdown menu

Lecture 165 Adding a Search form in the navbar

Lecture 166 Colour schemes

Lecture 167 Understanding the CSS behind the dark theme

Lecture 168 Navbar Toggler - IMPORTANT

Lecture 169 Navbar Toggler - finishing touches

Lecture 170 Navbar toggler placement

Lecture 171 Dropdown submenu - IMPORTANT!!

Lecture 172 Toggleable Scrolling

Lecture 173 Offcanvas Navbar (IMPORTANT)

Lecture 174 Placement of Navbar

Section 37: Bootstrap Stack

Lecture 175 Horizontal Stack - .hstack

Lecture 176 Hstack Responsive

Lecture 177 Layouts with hstack

Lecture 178 Hstack Navbar

Lecture 179 Create an inline form with .hstack

Lecture 180 Vertical Stack - .vstack

Lecture 181 Create an inline form with .vstack

Lecture 182 Nesting vstack inside hstack

Lecture 183 Masonry Layout with nested vstack inside hstack

Lecture 184 Applied Masonry Layout on media

Section 38: Bootstrap Flex

Lecture 185 display flex, display inline-flex, Gap

Lecture 186 Flex-fill

Lecture 187 Responsive variations of display flex and inline-flex

Lecture 188 Flex direction: row, row-reverse, column, column-reverse

Lecture 189 Applying column/row with break points for Responsiveness

Lecture 190 Justify-content on row

Lecture 191 Justify-content on column

Lecture 192 Align-items on row

Lecture 193 Align-items on column

Lecture 194 Centering flex items horizontally and vertically

Lecture 195 Flex wrap/wrap-reverse

Lecture 196 Align-content on row

Lecture 197 Align-content on column

Lecture 198 Masonry Layout with Flex Column/Flex wrap

Lecture 199 Media (image/video) Masonry Layout

Lecture 200 Auto margins in flex

Lecture 201 Flex order

Lecture 202 Flex Grow and Shrink

Lecture 203 Align-self

Section 39: Bootstrap Grid system (12 column-grid system)

Lecture 204 Equal width columns (.col) with .row and container (IMPORTANT!!)

Lecture 205 Column breaks

Lecture 206 Equal Columns having breakpoints (col-sm, col-md, etc)

Lecture 207 Reordering of columns

Lecture 208 Auto columns (.col-auto) and its breakpoints (.col-lg-auto, .col-md-auto, etc)

Lecture 209 Equal Columns of Columns using col-1, col-2, col-3, col-4, col-6

Lecture 210 Stand alone columns (col-1 to col-12)

Lecture 211 Mixing varying Width-sized Columns (col-1 to col-12) to get 12 grid system

Lecture 212 Mixing (col-1 to col-12) with col and col-auto

Lecture 213 Column wrapping

Lecture 214 Width-sized Columns having breakpoints (col-sm-6, col-md-8, etc)

Lecture 215 Mix and Match with different Columns

Lecture 216 Auto margin on Columns

Lecture 217 Nesting of columns

Lecture 218 Row Columns (.row-cols-auto, .row-cols-2, etc)

Lecture 219 Row Columns having breakpoints

Section 40: Bootstrap Columns: Aligning, Justifying, Offsetting

Lecture 220 Vertical alignment of columns (align-items-* classes)

Lecture 221 Horizontal alignment (justify-content-* classes)

Lecture 222 Offsetting columns

Section 41: Bootstrap Gutters

Lecture 223 Horizontal gutters: gx-* (IMPORTANT!!!)

Lecture 224 Vertical gutters: gy-*

Lecture 225 Horizontal and Vertical gutters: g-* (IMPORTANT!!!)

Lecture 226 When gutter zero (g-0) comes in handy

Lecture 227 Applying Gutters (g-*) on Row column (row-cols-*)

Section 42: Bootstrap Carousel Grid System

Lecture 228 Carousel Grid System

Lecture 229 Autoplay Ride Carousel System

Section 43: Bootstrap Lists and List Group

Lecture 230 Bootstrap Lists (unstyled and inline lists)

Lecture 231 Structure of a description list

Lecture 232 Bootstrap Description list layout

Lecture 233 Structure of a list group - IMPORTANT

Lecture 234 List group with colours

Lecture 235 List group flush

Lecture 236 List group with Links and buttons

Lecture 237 Numbered List group

Lecture 238 Checkbox and Radio List group

Lecture 239 List group with badges

Lecture 240 List group custom content

Lecture 241 Horizontal list group

Lecture 242 Horizontal list group with badges

Lecture 243 List Group with JavaScript behaviour - IMPORTANT LESSON!!!

Section 44: Bootstrap Scrollspy

Lecture 244 List group scrollspy - IMPORTANT!!!!

Lecture 245 Simple list (anchors) scrollspy

Lecture 246 Navbar pills scrollspy

Lecture 247 Dropdown navbar pills scrollspy

Lecture 248 Nested nav pills scrollspy

Section 45: Bootstrap Accordion

Lecture 249 Structure of the accordion - Part 1 (IMPORTANT!!!)

Lecture 250 Structure of the accordion - Part 2 (IMPORTANT!!!)

Lecture 251 Structure of the accordion - Part 3 (IMPORTANT!!!)

Lecture 252 Always open accordion

Lecture 253 Accordion that shows its contents by default

Lecture 254 Accordion Flush

Section 46: Bootstrap Collapse

Lecture 255 Structure of the collapse using anchor element (IMPORTANT!!)

Lecture 256 Structure of the collapse using button element

Lecture 257 collapse: with width and height

Lecture 258 Collapse with multiple target - IMPORTANT

Section 47: Bootstrap Card

Lecture 259 Structure of a card - IMPORTANT

Lecture 260 Card with text-colour

Lecture 261 Card with header and footer

Lecture 262 Text alignment of a card

Lecture 263 Card with links, stretched link and button

Lecture 264 Card with border and background color

Lecture 265 Card with image (at the top and bottom)

Lecture 266 Card with image overlay

Lecture 267 Placeholders for cards

Lecture 268 Horizontal card

Lecture 269 Create a column-grid layout (.col, .col-*) for a card

Lecture 270 Create a row columns layout (row-col-*) for a card

Lecture 271 Card with list group

Lecture 272 Kitchen sink card

Lecture 273 WATCH!!! - Introduction to card with nav pills/nav tabs JavaScript behaviour

Lecture 274 Card with nav pills JavaScript behaviour

Lecture 275 card with nav tabs JavaScript behaviour

Lecture 276 Card group

Section 48: Bootstrap Form

Lecture 277 Checkbox - without and with labels

Lecture 278 Checkbox - inline and reversed checkbox

Lecture 279 Radio

Lecture 280 Checkbox and Radio Toggle Buttons

Lecture 281 Switch

Lecture 282 Range

Lecture 283 Basic Structure of Select - IMPORTANT

Lecture 284 Select - sizing, multiple attribute, size attribute

Lecture 285 Data list

Lecture 286 Form Controls

Lecture 287 Readonly Form controls

Lecture 288 Input Group - Part 1

Lecture 289 Input Group - Part 2

Lecture 290 Floating labels - Part 1

Lecture 291 Floating labels - Part 2

Lecture 292 Dropdown Form

Lecture 293 Form Layouts with col-{breakpoint}, row-cols-*, col-{breakpoint}-*

Lecture 294 Horizontal form label sizing (Col-form-label)

Lecture 295 Form Validation - using required attribute

Lecture 296 Form Validation - using JavaScript validation

Section 49: Bootstrap Spinners

Lecture 297 Spinner-border

Lecture 298 Placement and alignment of spinner-border

Lecture 299 Spinner-grow

Lecture 300 Spinners on buttons

Section 50: CSS Customization in Bootstrap

Lecture 301 Text Customization

Lecture 302 Heading and display customization

Lecture 303 Background-color, text-bg-color and text color customization

Lecture 304 Shadow customization

Lecture 305 Opacity, width and height customization

Lecture 306 bg-opacity and border customization

Lecture 307 padding-margin, link, keyboard input customization

Lecture 308 Button, rounded customization

Lecture 309 Button close, progressbar customization

Lecture 310 Placeholder customization

Lecture 311 Table customization

Lecture 312 Modal customization

Lecture 313 Tooltip customization

Lecture 314 Popover customization

Lecture 315 Accordion customization - Part 1

Lecture 316 Accordion customization - Part 2

Lecture 317 Nav-pills customization

Lecture 318 Nav-tabs customization

Lecture 319 Dropdown menu customization.

Lecture 320 Offcanvas customization

Lecture 321 Offcanvas customization - the width

Section 51: Final Web Project: Apply Bootstrap 5 To Design A Modern And Responsive Website

Lecture 322 Overview of the project and how to download the videos and pictures

Lecture 323 Creating folders and opening our project folder in the VS Code

Lecture 324 Preparing the Bootstrap icons for the project

Lecture 325 Creating our basic HTML and CSS files

Lecture 326 Importing Google Fonts for the project

Lecture 327 Styling the CSS whole site scheme colours

Lecture 328 Structure of the navbar (IMPORTANT!!!)

Lecture 329 Styling the navbar and navbar-nav

Lecture 330 Adding navbar-brand to the navbar

Lecture 331 Adding form to the navbar

Lecture 332 Working on the dropdown menu - Part 1

Lecture 333 Customizing the dropdown menu class

Lecture 334 Working on the dropdown menu - Part 2

Lecture 335 Adding the complete navbar to the gallery and pricing page

Lecture 336 Creating the video crossfade carousel - Part 1

Lecture 337 Creating the video crossfade carousel - Part 2

Lecture 338 Carousel indicators

Lecture 339 Adding the carousel to the gallery and pricing page

Lecture 340 Structure of the footer - part 1

Lecture 341 Structure of the footer - part 2

Lecture 342 Styling the "Follow Us" section of the footer

Lecture 343 Adding the footer to the Gallery and Pricing page

Lecture 344 Structuring the display headings of the sections in the web pages

Lecture 345 Home page: Structure of Our Core section

Lecture 346 Home page: Adding icons to Our Core section

Lecture 347 Home page: Structure of the Discover PAMCH section: the nav-pills

Lecture 348 Home page: Structure of the Discover section: the tab-pane (part 1)

Lecture 349 Home page: Structure of the Discover section: the tab-pane (part 2)

Lecture 350 Home page: Structure of the Discover section: the tab-pane (part 3)

Lecture 351 Home page: Structure of the Discover section: the tab-pane (part 4)

Lecture 352 Home Page: Interchanging the rounded-end and rounded-start: tab-pane

Lecture 353 Home page: Structure of the Our New System section and adding the texts

Lecture 354 Home page: Adding images to the Our New System section

Lecture 355 Home page: Structure of Our Board section - part 1

Lecture 356 Home page: Structure of Our Board section - part 2

Lecture 357 Gallery page: Structuring and styling the masonry layout

Lecture 358 Gallery page: Adding the images to the masonry layout

Lecture 359 Pricing page: Header of the basic pricing plan

Lecture 360 Pricing page: Contents of the basic pricing plan

Lecture 361 Pricing page: Finishing up the Pro and Premium pricing plans

Lecture 362 Pricing page: structuring the FAQ background

Lecture 363 Pricing page: Creating the modal

Lecture 364 Pricing page: creating the accordion - part 1

Lecture 365 Pricing page: creating the accordion - part 2

Lecture 366 Final wrap up

This course is structured for a web design enthusiast looking to upgrade your Bootstrap skills, and for any front-end web developer who needs a solid foundation and practical knowledge to build responsive websites with Bootstrap.,This course is for beginners in Bootstrap BUT you need to have a good understanding of CSS