Book Image

Bootstrap 4 Site Blueprints - Second Edition

By : Ian Whitney, David Cochran
Book Image

Bootstrap 4 Site Blueprints - Second Edition

By: Ian Whitney, David Cochran

Overview of this book

Packed with trade secrets, this second edition is your one-stop solution to creating websites that will provide the best experience for your users. We cover six popular, real-world examples, where each project teaches you about the various functionalities of Bootstrap 4 and their implementation. The book starts off by getting you up and running with the new features of Bootstrap 4 before gradually moving on to customizing your blog with Bootstrap and SASS, building a portfolio site, and turning it into a WordPress theme. In the process, you will learn to recompile Bootstrap files using SASS, design a user interface, and integrate JavaScript plugins. Towards the end of the book, you will also be introduced to integrating Bootstrap 4 with popular application frameworks such as Angular 2, Ruby on Rails, and React.
Table of Contents (15 chapters)
Bootstrap 4 Site Blueprints
Credits
About the Authors
About the Reviewer
www.PacktPub.com
Preface

Conflicts between WordPress and Bootstrap – predefined classes


The HTML pages of WordPress contain a lot of CSS classes to style them by default. Themes such as JBST 4 can overwrite WordPres's default HTML code and enable you to change the HTML structure of elements of your WordPress website.

You can read more about the WordPress template hierarchy at https://developer.wordpress.org/themes/basics/template-hierarchy/. Let's take the search form as an example. To display a site search form on your website you can call the WordPress get_search_form() PHP function. This function returns a search form built with the HTML code as shown in the following:

 <form role="search" method="get" id="searchform" 
    class="searchform" action="<?php echo esc_url( home_url( '/' ) ); ?>"> 
    <div> 
        <label class="screen-reader-text" for="s"><?php _x( 'Search for:', 'label' ); ?></label> 
        <input type="text" value="<?php echo get_search_query...