Browse Library
Sign In Start Free Trial
Close icon Search icon
Account
Browse Library Advanced Search Sign In Start Free Trial

Add to playlist

Create a Playlist

Modal Close icon
You need to login to use this feature.
  • Book Overview & Buying Bootstrap 4 Cookbook
  • Table Of Contents Toc
  • Feedback & Rating feedback
Bootstrap 4 Cookbook

Bootstrap 4 Cookbook

By : Imsirovic
2.8 (4)
Buy this Book
close
close
Bootstrap 4 Cookbook

Bootstrap 4 Cookbook

2.8 (4)
By: Imsirovic
Buy this Book

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.
Table of Contents (13 chapters)
close
close
close
Preface
Icon
Preface
Icon
What this book covers
Icon
What you need for this book
Icon
Who this book is for
Icon
Conventions
Icon
Reader feedback
Icon
Customer support
Lock Free Chapter
1
Installing Bootstrap 4 and Comparing Its Versions
Icon
Installing Bootstrap 4 and Comparing Its Versions
Icon
Introduction
Icon
Installing Bootstrap 4 to Cloud9 IDE using npm
Icon
Installing Bootstrap 4 to Cloud9 IDE via Git
Icon
Installing Bootstrap 4 Jekyll-powered docs
Icon
Customizing the styles of Bootstrap 4 docs
Icon
Making custom Grunt tasks in Bootstrap 4
Icon
Comparing Bootstrap 4 versions with Bower
Icon
Installing Bootstrap 4 to our Cloud9 IDE with Bower
2
Layout Like a Boss with the Grid System
Icon
Layout Like a Boss with the Grid System
Icon
Introduction
Icon
Preparing a static server with Bootstrap 4, Harp, and Grunt
Icon
Deploying your web project with Surge
Icon
Splitting up our Harp project into partials
Icon
Using containers with margin and padding utility classes
Icon
Adding columns in a row
Icon
Making col-* classes work
Icon
Building a simple page with the default grid
Icon
Building a real-life web page example with the default grid
3
Power Up with the Media Object, Text, Images, and Tables
Icon
Power Up with the Media Object, Text, Images, and Tables
Icon
Introduction
Icon
Extending the text classes of .display-* and adding hover effects with Hover.css
Icon
Creating comment sections using media objects
Icon
Enriching text content with Bootstrap typography classes
Icon
Customizing the blockquote element with CSS
Icon
Extending the blockquote styles with Sass
Icon
Aligning text around images
Icon
Wrapping text around rounded images
Icon
Styling a pricing section using Bootstrap's default table classes
4
Diving Deep into Bootstrap 4 Components
chevron up
Icon
Diving Deep into Bootstrap 4 Components
Icon
Creating custom alerts and positioning them in the viewport
Icon
Making full-page modals
Icon
Altering the behavior of popups using tether options
Icon
Controlling the color and opacity of ToolTips using Sass variables
Icon
Using Bootstrap's Sass mixins to create custom buttons
Icon
Adjusting the rounding of corners on buttons and button groups
Icon
Controlling the number of card columns on different breakpoints with SCSS
Icon
Making cards responsive
Icon
Easily positioning inline forms
5
Menus and Navigations
Icon
Menus and Navigations
Icon
Adding Font Awesome to Bootstrap navbar
Icon
Placing a single Bootstrap navbar dropdown to the right
Icon
Centering navbar links
Icon
Making a transparent navbar on a darker background
Icon
Creating a Navbar with Icons and Flexbox
Icon
Adding another row of links to the navbar
Icon
Adding Yamm3 Megamenu images to a navbar dropdown
Icon
Adding Yamm3 Megamenu list of links to a navbar dropdown
6
Extending Bootstrap 4
Icon
Extending Bootstrap 4
Icon
Introduction
Icon
Converting checkboxes into Toggles with Bootstrap Toggle plugin
Icon
Onboarding users with Shepherd
Icon
Toggling visibility of password fields with custom jQuery code
Icon
Extending the functionality of select elements with Bootstrap Select plugin
Icon
Customizing select boxes with Select2 plugin
Icon
Adding input sliders with Rangeslider.js
Icon
Allowing users to easily add dates to your input fields with jQuery UI Datepicker
Icon
Converting plain tables into sophisticated data tables with Bootgrid
Icon
Navigating easily with simple-sidebar jQuery plugin
Icon
Adding fully customizable notifications with Notify.js
Icon
Integrating a fancy modal using animatedModal.js
Icon
Making pagination dynamic with the jQuery Pagination plugin and simplePagination.js
Icon
Validating forms with svalidate.js
Icon
Adding a rating system using jQuery Bar Rating plugin
7
Make Your Own jQuery Plugins in Bootstrap 4
Icon
Make Your Own jQuery Plugins in Bootstrap 4
Icon
Introduction
Icon
Making the simplest possible jQuery plugin
Icon
Making the plugin customizable with the extend() and each() methods
Icon
Integrating a simple CSS Class Replacement plugin with Bootstrap 4
8
Bootstrap 4 Flexbox and Layouts
Icon
Bootstrap 4 Flexbox and Layouts
Icon
Introduction
Icon
Breakpoint-dependent switching of flex direction on card components
Icon
Letting cards take up space with the .flex-wrap and .col classes
Icon
Adding any number of columns with Flexbox
Icon
Combining numbered .col classes with plain .col classes
Icon
Working with card layouts and the Flexbox grid
Icon
Center-aligning cards on wider viewports only
Icon
Positioning nav-tabs with Flexbox
9
Workflow Boosters
Icon
Workflow Boosters
Icon
Introduction
Icon
Customizing Bootstrap builds by cherry-picking Sass partials
Icon
Cleaning up unused CSS with UnCSS and Grunt
Icon
Removing CSS comments with the grunt-strip-CSS-comments plugin
10
Creating a Blog with Jekyll and Bootstrap 4
Icon
Creating a Blog with Jekyll and Bootstrap 4
Icon
Making Jekyll work with Bootstrap 4
Icon
Splitting Jekyll files into partials
Icon
Making Jekyll blog-aware
Icon
Deploying your blog to the web with GitHub
11
Bootstrap 4 with ASP.NET Core
Icon
Bootstrap 4 with ASP.NET Core
Icon
Starting a project in ASP.NET Core and Bootstrap 4 in Visual Studio 2017
Icon
Migrating the default web page of a .NET Core project from Bootstrap 3 to Bootstrap 4
Icon
Working with Bower, Sass, and Grunt in our .NET Core project
12
Integrating Bootstrap 4 with React and Angular
Icon
Integrating Bootstrap 4 with React and Angular
Icon
Introduction
Icon
Integrating Bootstrap 4 with React
Icon
Replacing the Default Styles in Angular 2 QuickStart with Bootstrap 4 CDN CSS
Icon
Integrating Angular 4 and Bootstrap 4 with the help of ng-bootstrap
Icon
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...
Visually different images
CONTINUE READING
83
Tech Concepts
36
Programming languages
73
Tech Tools
Icon Unlimited access to the largest independent learning library in tech of over 8,000 expert-authored tech books and videos.
Icon Innovative learning tools, including AI book assistants, code context explainers, and text-to-speech.
Icon 50+ new titles added per month and exclusive early access to books as they are being written.
Bootstrap 4 Cookbook
End of Section 4
Next Section
notes
bookmark Notes and Bookmarks search Search in title playlist Add to playlist download Download options
font-size Font size

Change the font size

margin-width Margin width

Change margin width

day-mode Day/Sepia/Night Modes

Change background colour

Close icon Search
Country selected
Close icon Your notes and bookmarks

Confirmation

Modal Close icon
claim successful
Order Page Read Now

Buy this book with your credits?

Modal Close icon
Are you sure you want to buy this book with one of your credits?
Close
YES, BUY

Submit Your Feedback

Modal Close icon
Modal Close icon
Modal Close icon