Book description
Take your Bootstrap game to the next level with this practical guide
About This Book
Packed with easy-to-follow recipes on building responsive web pages with Bootstrap 4 that can be applied to a web project of your choice
Build intuitive user interfaces that are mobile-ready with the latest features offered by BS4
Stay on top of the changes that Bootstrap 4 brings to front-end development
Craft beautiful UIs and learn best practices, tips and tricks for quick, effortless, and proper Bootstrap 4 development
Who This Book Is For
If you are a web designer or a developer who is familiar with the basics of Bootstrap and now want to build highly responsive and professional web pages using Bootstrap 4, this cookbook is for you. Familiarity with the fundamentals of HTML, CSS and jQuery, and some experience of incorporating JavaScript plugins is assumed.
What You Will Learn
Craft beautiful UIs the right way
Use jQuery and JavaScript to extend Bootstrap layouts
Become more efficient by speeding up your workflow to achieve amazing results in the shortest time possible
Setup your environment for future changes of the framework.
Stay DRY by quickly prototyping Bootstrap-based websites with the help of Github’s own serverless blogging platform, Jekyll
Integrate Bootstrap with the most popular JS frameworks, Angular and React
Combine Bootstrap with the .NET platform
In Detail
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.
Style and approach
Packed full of solutions that can be instantly applied, the practical-based recipes will help you get the most from Bootstrap.
Table of contents
- Preface
-
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
-
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
-
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
-
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
-
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
-
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
- Make Your Own jQuery Plugins in Bootstrap 4
-
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
- Workflow Boosters
- Creating a Blog with Jekyll and Bootstrap 4
- Bootstrap 4 with ASP.NET Core
- Integrating Bootstrap 4 with React and Angular
Product information
- Title: Bootstrap 4 Cookbook
- Author(s):
- Release date: June 2017
- Publisher(s): Packt Publishing
- ISBN: 9781785889295
You might also like
book
Learning Bootstrap 4 - Second Edition
Unearth the potential of Bootstrap 4 to create highly responsive and beautiful websites using modern web …
book
Bootstrap
Discover how easy it is to design killer interfaces and responsive websites with the Bootstrap framework. …
book
Bootstrap 4 – Responsive Web Design
Unearth the potential of Bootstrap with step-by-step guidance. About This Book An applied guide exploring web …
video
Bootstrap 4 Development for Professionals
Bootstrap 4 has taken the world of web development by storm with its user-friendly features that …