Module 1: Bootstrap 4 By Example Chapter 1: Getting Started 3 Getting Bootstrap 4 Setting up the framework 5 Folder structure 6 Warming up the sample example 6 Bootstrap required tags 8 Building our first Bootstrap example 10 The container tag 11 Optionally using the CDN setup 14 Community activity 15 Tools 16 Bootstrap and web applications 16 Browser compatibility 17 Summary 18 Chapter 2: Creating a Solid Scaffolding 19 Understanding the grid system 19 Building our scaffolding 20 Setting things up 21 Offset columns 23 Completin g the grid rows 24 Nesting rows 24 Finishing the grid 26 Fluid container 28 We need some style! 28 There are headings everywhere 30 Playing with buttons 31 [ ii ] More typography and code tags 32 Manipulating tables 37 Styling the buttons 40 Like a boss! 41 Final thoughts 42 Box-sizing 42 Quick floats 43 Clearfix 43 Font definitions for typography 44 Summary 44 Chapter 3: Yes, You Should Go Mobile First 47 Making it greater 47 Bootstrap and the mobile-first design 49 How to debug different viewports at the browser 49 Cleaning up the mess 52 Creating the landing page for different devices 53 Mobile and extra small devices 54 Tablets and small devices 59 Desktop and large devices 61 Summary 62 Chapter 4: Applying the Bootstrap Style 65 Changing our grid layout 65 Starting over the grid system 67 The header 67 The introduction header 68 The about section 71 The features section 73 The price table section 75 The footer 78 Forming the forms 81 Newsletter form 81 Contact form 83 The sign-in form 87 Images 89 Helpers 91 Floating and centering blocks 91 Context colors 91 Spacing 92 Responsive embeds 93 Summary 94 [ iii ] Chapter 5: Making It Fancy 95 Using Bootstrap icons 95 Paying attention to your navigation 99 Until the navigation collapse 100 Using different attachments 102 Coloring the bar 103 Dropping it down 103 Customizing buttons dropdown 106 Making an input grouping 107 Getting ready for flexbox! 109 Understanding flexbox 109 Playing with Bootstrap and flexbox 111 Summary 112 Chapter 6: Can You Build a Web App? 113 Understanding web applications 113 Creating the code structure 114 Adding the navigation 114 Adding the search input 117 Time for the menu options! 118 The option at the thumbnail 118 Adding the Tweet button 119 Customizing the navigation bar 120 Setting up the custom theme 120 Fixing the list navigation bar pseudo-classes 121 You deserve a badge! 122 Fixing some issues with the navigation bar 123 Do a grid again 127 Playing the cards 127 Learning cards in Bootstrap 4 128 Creating your own cards 129 Adding Cards to our web application 130 Another card using thumbnails 133 Implementing the main content 135 Making your feed 136 Doing some pagination 142 Creating breadcrumbs 143 Finishing with the right-hand-side content 144 Summary 149 [ iv ] Chapter 7: Of Course, You Can Build a Web App! 151 Alerts in our web app 152 Dismissing alerts 153 Customizing alerts 153 Waiting for the progress bar 155 Progress bar options 156 Animating the progress bar 157 Creating a settings page 158 Pills of stack 159 Tabs in the middle 163 Adding the tab content 165 Using the Bootstrap tabs plugin 165 Creating content in the user info tab 166 The stats column 169 Labels and badges 171 Summary 173 Chapter 8: Working with JavaScript 175 Understanding JavaScript plugins 175 The library dependencies 176 Data attributes 176 Bootstrap JavaScript events 177 Awesome Bootstrap modals 177 Modal general and content 179 The modal header 179 The modal body 180 The modal footer 180 Creating our custom modal 181 A tool for your tip 183 Pop it all over 186 Popover events 189 Making the menu affix 191 Finishing the web app 193 Summary 198 Chapter 9: Entering in the Advanced Mode 199 The master plan 200 The last navigation bar with flexbox 201 The navigation search 205 The menu needs navigation 206 Checking the profile 211 [ v ] Filling the main fluid content 212 From the side stacked menu 213 I heard that the left menu is great! 214 Learning the collapse plugin 216 Using some advanced CSS 220 Filling the main content 221 Rounding the charts 223 Creating a quick statistical card 226 Getting a spider chart 229 Overhead loading 232 Fixing the toggle button for mobile 234 Summary 235 Chapter 10: Bringing Components to Life 237 Creating the main cards 237 The other card using Bootstrap components 241 Creating our last plot 244 Fixing the mobile viewport 246 Fixing the navigation menu 250 The notification list needs some style 253 Adding the missing left menu 254 Aligning the round charts 256 Learning more advanced plugins 258 Using the Bootstrap carousel 258 Customizing carousel items 260 Creating slide indicators 260 Adding navigation controls 262 Other methods and options for the carousel 263 The Bootstrap spy 264 Summary 269 Chapter 11: Making It Your Taste 271 Customizing a Bootstrap component 271 The taste of your button 272 Using button toggle 273 The checkbox toggle buttons 274 The button as a radio button 275 Doing the JavaScript customization 276 Working with plugin customization 276 The additional Bootstrap plugins 282 Creating our Bootstrap plugin 283 Creating the plugin scaffold 284 [ vi ] Defining the plugin methods 289 The initialize method and plugin verifications 289 Adding the Bootstrap template 290 Creating the original template 292 The slide deck 293 The carousel indicators 294 The carousel controls 295 Initializing the original plugin 295 Making the plugin alive 296 Creating additional plugin methods 298 Summary g the grid rows 24 Nesting rows 24 Finishing the grid 26 Fluid container 28 We need some style! 28 There are headings everywhere 30 Playing with buttons 31 [ ii ] More typography and code tags 32 Manipulating tables 37 Styling the buttons 40 Like a boss! 41 Final thoughts 42 Box-sizing 42 Quick floats 43 Clearfix 43 Font definitions for typography 44 Summary 44 Chapter 3: Yes, You Should Go Mobile First 47 Making it greater 47 Bootstrap and the mobile-first design 49 How to debug different viewports at the browser 49 Cleaning up the mess 52 Creating the landing page for different devices 53 Mobile and extra small devices 54 Tablets and small devices 59 Desktop and large devices 61 Summary 62 Chapter 4: Applying the Bootstrap Style 65 Changing our grid layout 65 Starting over the grid system 67 The header 67 The introduction header 68 The about section 71 The features section 73 The price table section 75 The footer 78 Forming the forms 81 Newsletter form 81 Contact form 83 The sign-in form 87 Images 89 Helpers 91 Floating and centering blocks 91 Context colors 91 Spacing 92 Responsive embeds 93 Summary 94 [ iii ] Chapter 5: Making It Fancy 95 Using Bootstrap icons 95 Paying attention to your navigation 99 Until the navigation collapse 100 Using different attachments 102 Coloring the bar 103 Dropping it down 103 Customizing buttons dropdown 106 Making an input grouping 107 Getting ready for flexbox! 109 Understanding flexbox 109 Playing with Bootstrap and flexbox 111 Summary 112 Chapter 6: Can You Build a Web App? 113 Understanding web applications 113 Creating the code structure 114 Adding the navigation 114 Adding the search input 117 Time for the menu options! 118 The option at the thumbnail 118 Adding the Tweet button 119 Customizing the navigation bar 120 Setting up the custom theme 120 Fixing the list navigation bar pseudo-classes 121 You deserve a badge! 122 Fixing some issues with the navigation bar 123 Do a grid again 127 Playing the cards 127 Learning cards in Bootstrap 4 128 Creating your own cards 129 Adding Cards to our web application 130 Another card using thumbnails 133 Implementing the main content 135 Making your feed 136 Doing some pagination 142 Creating breadcrumbs 143 Finishing with the right-hand-side content 144 Summary 149 [ iv ] Chapter 7: Of Course, You Can Build a Web App! 151 Alerts in our web app 152 Dismissing alerts 153 Customizing alerts 153 Waiting for the progress bar 155 Progress bar options 156 Animating the progress bar 157 Creating a settings page 158 Pills of stack 159 Tabs in the middle 163 Adding the tab content 165 Using the Bootstrap tabs plugin 165 Creating content in the user info tab 166 The stats column 169 Labels and badges 171 Summary 173 Chapter 8: Working with JavaScript 175 Understanding JavaScript plugins 175 The library dependencies 176 Data attributes 176 Bootstrap JavaScript events 177 Awesome Bootstrap modals 177 Modal general and content 179 The modal header 179 The modal body 180 The modal footer 180 Creating our custom modal 181 A tool for your tip 183 Pop it all over 186 Popover events 189 Making the menu affix 191 Finishing the web app 193 Summary 198 Chapter 9: Entering in the Advanced Mode 199 The master plan 200 The last navigation bar with flexbox 201 The navigation search 205 The menu needs navigation 206 Checking the profile 211 [ v ] Filling the main fluid content 212 From the side stacked menu 213 I heard that the left menu is great! 214 Learning the collapse plugin 216 Using some advanced CSS 220 Filling the main content 221 Rounding the charts 223 Creating a quick statistical card 226 Getting a spider chart 229 Overhead loading 232 Fixing the toggle button for mobile 234 Summary 235 Chapter 10: Bringing Components to Life 237 Creating the main cards 237 The other card using Bootstrap components 241 Creating our last plot 244 Fixing the mobile viewport 246 Fixing the navigation menu 250 The notification list needs some style 253 Adding the missing left menu 254 Aligning the round charts 256 Learning more advanced plugins 258 Using the Bootstrap carousel 258 Customizing carousel items 260 Creating slide indicators 260 Adding navigation controls 262 Other methods and options for the carousel 263 The Bootstrap spy 264 Summary 269 Chapter 11: Making It Your Taste 271 Customizing a Bootstrap component 271 The taste of your button 272 Using button toggle 273 The checkbox toggle buttons 274 The button as a radio button 275 Doing the JavaScript customization 276 Working with plugin customization 276 The additional Bootstrap plugins 282 Creating our Bootstrap plugin 283 Creating the plugin scaffold 284 [ vi ] Defining the plugin methods 289 The initialize method and plugin verifications 289 Adding the Bootstrap template 290 Creating the original template 292 The slide deck 293 The carousel indicators 294 The carousel controls 295 Initializing the original plugin 295 Making the plugin alive 296 Creating additional plugin methods 298 Summary