Book Image

Bootstrap 4 Cookbook

By : Ajdin Imsirovic
Book Image

Bootstrap 4 Cookbook

By: Ajdin Imsirovic

Overview of this book

Bootstrap, one of the most popular front-end frameworks, is perfectly built to design elegant, powerful, and responsive interfaces for professional-level web pages. It supports responsive design by dynamically adjusting your web page layout. Bootstrap 4 is a major update with many impressive changes that greatly enhance the end results produced by Bootstrap. This cookbook is a collection of great recipes that show you how to use all the latest features of Bootstrap to build compelling UIs. This book is using the most up-to-date version of Bootstrap 4 in all its chapters. First off, you will be shown how you can leverage the latest core features of Bootstrap 4 to create stunning web pages and responsive media. You will gradually move on to extending Bootstrap 4 with the help of plugins to build highly customized and powerful UIs. By the end of this book, you will know how to leverage, extend, and integrate bootstrap to achieve optimal results for your web projects.

Related Content you might be interested in

Current Title:

Small book image
Bootstrap 4 Cookbook
Ajdin Imsirovic
Jun, 2017 | 338 pages
Small book image
Mastering Bootstrap 4.
Benjamin Jakobus
Feb, 2018 | 354 pages
Small book image
Learning Bootstrap 4 by Building Projects
Eduonix Learning Solutions
Aug, 2018 | 218 pages
Small book image
Vue.js Quick Start Guide
Ajdin Imsirovic
Oct, 2018 | 186 pages
Table of Contents (19 chapters)
Title Page
Title Page
Credits
Credits
About the Author
About the Author
About the Reviewer
About the Reviewer
www.PacktPub.com
www.PacktPub.com
Customer Feedback
Customer Feedback
Preface
Preface
Free Chapter
1
Installing Bootstrap 4 and Comparing Its Versions
Installing Bootstrap 4 and Comparing Its Versions
Introduction
Installing Bootstrap 4 to Cloud9 IDE using npm
Installing Bootstrap 4 to Cloud9 IDE via Git
Installing Bootstrap 4 Jekyll-powered docs
Customizing the styles of Bootstrap 4 docs
Making custom Grunt tasks in Bootstrap 4
Comparing Bootstrap 4 versions with Bower
Installing Bootstrap 4 to our Cloud9 IDE with Bower
2
Layout Like a Boss with the Grid System
Layout Like a Boss with the Grid System
Introduction
Preparing a static server with Bootstrap 4, Harp, and Grunt
Deploying your web project with Surge
Splitting up our Harp project into partials
Using containers with margin and padding utility classes
Adding columns in a row
Making col-* classes work
Building a simple page with the default grid
Building a real-life web page example with the default grid
3
Power Up with the Media Object, Text, Images, and Tables
Power Up with the Media Object, Text, Images, and Tables
Introduction
Extending the text classes of .display-* and adding hover effects with Hover.css
Creating comment sections using media objects
Enriching text content with Bootstrap typography classes
Customizing the blockquote element with CSS
Extending the blockquote styles with Sass
Aligning text around images
Wrapping text around rounded images
Styling a pricing section using Bootstrap's default table classes
4
Diving Deep into Bootstrap 4 Components
Diving Deep into Bootstrap 4 Components
Creating custom alerts and positioning them in the viewport
Making full-page modals
Altering the behavior of popups using tether options
Controlling the color and opacity of ToolTips using Sass variables
Using Bootstrap's Sass mixins to create custom buttons
Adjusting the rounding of corners on buttons and button groups
Controlling the number of card columns on different breakpoints with SCSS
Making cards responsive
Easily positioning inline forms
5
Menus and Navigations
Menus and Navigations
Adding Font Awesome to Bootstrap navbar
Placing a single Bootstrap navbar dropdown to the right
Centering navbar links
Making a transparent navbar on a darker background
Creating a Navbar with Icons and Flexbox
Adding another row of links to the navbar
Adding Yamm3 Megamenu images to a navbar dropdown
Adding Yamm3 Megamenu list of links to a navbar dropdown
6
Extending Bootstrap 4
Extending Bootstrap 4
Introduction
Converting checkboxes into Toggles with Bootstrap Toggle plugin
Onboarding users with Shepherd
Toggling visibility of password fields with custom jQuery code
Extending the functionality of select elements with Bootstrap Select plugin
Customizing select boxes with Select2 plugin
Adding input sliders with Rangeslider.js
Allowing users to easily add dates to your input fields with jQuery UI Datepicker
Converting plain tables into sophisticated data tables with Bootgrid
Navigating easily with simple-sidebar jQuery plugin
Adding fully customizable notifications with Notify.js
Integrating a fancy modal using animatedModal.js
Making pagination dynamic with the jQuery Pagination plugin and simplePagination.js
Validating forms with svalidate.js
Adding a rating system using jQuery Bar Rating plugin
7
Make Your Own jQuery Plugins in Bootstrap 4
Make Your Own jQuery Plugins in Bootstrap 4
Introduction
Making the simplest possible jQuery plugin
Making the plugin customizable with the extend() and each() methods
Integrating a simple CSS Class Replacement plugin with Bootstrap 4
8
Bootstrap 4 Flexbox and Layouts
Bootstrap 4 Flexbox and Layouts
Introduction
Breakpoint-dependent switching of flex direction on card components
Letting cards take up space with the .flex-wrap and .col classes
Adding any number of columns with Flexbox
Combining numbered .col classes with plain .col classes
Working with card layouts and the Flexbox grid
Center-aligning cards on wider viewports only
Positioning nav-tabs with Flexbox
9
Workflow Boosters
Workflow Boosters
Introduction
Customizing Bootstrap builds by cherry-picking Sass partials
Cleaning up unused CSS with UnCSS and Grunt
Removing CSS comments with the grunt-strip-CSS-comments plugin
10
Creating a Blog with Jekyll and Bootstrap 4
Creating a Blog with Jekyll and Bootstrap 4
Making Jekyll work with Bootstrap 4
Splitting Jekyll files into partials
Making Jekyll blog-aware
Deploying your blog to the web with GitHub
11
Bootstrap 4 with ASP.NET Core
Bootstrap 4 with ASP.NET Core
Starting a project in ASP.NET Core and Bootstrap 4 in Visual Studio 2017
Migrating the default web page of a .NET Core project from Bootstrap 3 to Bootstrap 4
Working with Bower, Sass, and Grunt in our .NET Core project
12
Integrating Bootstrap 4 with React and Angular
Integrating Bootstrap 4 with React and Angular
Introduction
Integrating Bootstrap 4 with React
Replacing the Default Styles in Angular 2 QuickStart with Bootstrap 4 CDN CSS
Integrating Angular 4 and Bootstrap 4 with the help of ng-bootstrap
Conclusion

Making full-page modals

In this recipe, we will alter the behavior of the modal component, so as to have it completely cover the available screen space.

To see the final result, open the chapter4/complete code's app folder, and run the git bash on it. Follow it up with the harp server command, and navigate to localhost:9000 in your browser to see the result we will achieve in this recipe.

Upon opening the web page as explained in the preceding paragraph, you should see a large Click Me button that will trigger the modal, which will then appear and cover the entire viewport.

Getting ready

To get acquainted with the modal component in Bootstrap 4, visit https://v4-alpha.getbootstrap.com/components/modal/.

How to do it…

  1. Open the empty recipe-04-02.ejs file, located in the chapter4/start/app folder.
  2. Add the following code to it:
<div class="container">

 <div class="mt-5">
 <h1><%- title %></h1>
 <p><a href="https://v4-alpha.getbootstrap.com/components/modal...
Previous Section
End of Section 3
Next Section