Bootstrap 4 Online Library

Bootstrap 4 By Example
by Silvio Moreto

Learn responsive web development with Bootstrap 4’s front end framework

About This BookBecome an expert in Bootstrap framework, and speed up front-end development and prototyping through real-life examplesAn applied guide exploring two web applications such as Twitter and Dashboard from scratchHands on the Bootstrap version 4 even before the official releaseWho This Book Is For

If you are a frontend developer with no knowledge of Bootstrap, then this book is for you. Basic knowledge of HTML, CSS, and JavaScript is expected, as well as a reasonable understanding of web frameworks, such as jQuery.

What You Will LearnDiscover how to use Bootstrap’s components and elements, and to customize them for your own projectsUnderstand the framework’s usage in the best way with the recommended development patternsCreate web pages for any kind of device like tablet, mobile, computer, etc.Construct a Twitter app by exploring the advanced bootstrap components like Breadcrumbs, Pagination, Media objects, and so onCombine the power of JavaScript with your Bootstrap app for more functionalityCreate a Dashboard web app using Bootstrap’s JavaScript pluginsLearn the difference between Bootstrap’s version 3 and 4 of the frameworkExtend your knowledge on Bootstrap’s external plugins, their incorporation and usageIn Detail

Bootstrap is a free, open source collection of tools that helps developers create websites or web applications. It provides a faster, easier, and less repetitive solution to designing and building applications. Before Bootstrap’s release, it was necessary to import a variety of libraries into your project that offered different components and features for web interface development. Plus with the increased popularity of smartphones there were lack of libraries that could handle the responsiveness of a web page. Bootstrap’s existence let it quickly become famous as a front-end framework that offered a wide set of tools from page grid up to components that render a web page in the best possible way for any device.

This book will be a tutorial covering various examples as well as step-by-step methodology to create interesting web applications using Bootstrap and to understand the front-end framework to its core.

We begin with an introduction to the Bootstrap framework and setting up an environment to build a simple web page. We then cover the grid system, basic Bootstrap components, HTML elements, and customization components for responsive and mobile first development. This is presented by creating a beautiful Landing page sample. You will also learn how to create a web application like Twitter by using the full set of components offered in the framework. Finally, you will learn to create a dashboard web app, using Bootstrap to its finest potential including component customizations, event handling, and external library integration. All these examples are explained step-by-step and in depth, while covering the versions 3 and the most recent version 4 of Bootstrap. So, you will be in the state of the art for front-end development.

By the end of this book, you will be familiar with the development of a plugin for the framework and Bootstrap’s world which is popular for fast paced front-end web development, used in countless projects all over the world, and now yours.

Style and approach

This is a step-by-step guide that closely focuses on developing web applications in most objective way solving real-life problems with Bootstrap. It covers two sample web applications, which are explained in detail.


Mastering Bootstrap 4
by Benjamin Jakobus, Jason Marah

Learn how to build beautiful and highly customizable web interfaces by leveraging the power of Bootstrap 4

About This Book

  • Adapt and customize Bootstrap to produce enticing websites that fit your needs
  • Explore Bootstrap’s grid system, helper classes, and responsive utilities
  • Extend Bootstrap with jQuery plugins and learn how to create your own custom plugins

Who This Book Is For

This book targets intermediate-level front-end web-developers. The book is not intended to be an introduction to web development. As such, the book assumes that readers have a firm grasp on the basic concepts behind web-development, as well as essential HTML, JavaScript and CSS skills.

What You Will Learn

  • Create a professional Bootstrap-based website from scratch without using third-party templates
  • Apply the Bootstrap mobile-first grid system and add responsiveness and aesthetic touches to image elements
  • Style various types of content and learn how to build a page’s layout from scratch by applying the power of Bootstrap 4
  • Take advantage of Bootstrap’s form helper and contextual classes
  • Infuse your web pages with life and movement using Bootstrap jQuery plugins
  • Customize the behavior and features of Bootstrap’s jQuery Plugins extensively
  • Optimize your Bootstrap-based project before deployment
  • Incorporate Bootstrap into an AngularJS or React application and use Bootstrap components as AngularJS directives or React components

In Detail

Bootstrap 4 is a free CSS and JavaScript framework that allows developers to rapidly build responsive web-interfaces.

Right from the first chapter, dive into building a customized Bootstrap website from scratch. Get to grips with Bootstrap’s key features and quickly discover the various ways in which Bootstrap can help you develop web-interfaces. Then take walk through the fundamental features, such as its grid system, helper classes, and responsive utilities. When you have mastered these, you will discover how to structure page layouts, use forms, style different types of content and utilize Bootstrap’s various navigation components. Among other things, you will also tour the anatomy of a Bootstrap plugin, creating your own custom components and extending Bootstrap using jQuery. Finally, you will discover how to optimize your website and integrate it with third-party frameworks.

By the end of this book, you will have a thorough knowledge of the framework’s ins and outs, and be able to build highly customizable and optimized web interfaces.

Style and approach

This comprehensive step-by-step guide walks you through building a complete website using Bootstrap 4. Each chapter is accompanied by source code and screenshots, and focuses on a distinct set of lessons that are illustrated within the context of a demo project.


Bootstrap 4 Quick Start
by Jacob Lett

Want to improve the design of your website or web application without having to write CSS styles from scratch?

Learning HTML and CSS is a lot more challenging than it used to be. Responsive web design adds more layers of complexity to design and develop websites. In this book you will become familiar with the new cards component, setting up the new flexbox grid layout, customizing the look and feel, how to follow the mobile-first development workflow, and more!

Web designer and developer Jacob Lett has built 100+ websites and WordPress themes. Let him show you exactly how to build responsive layouts that look great in every browser and device. He shares what you can’t learn from the official documentation… the process of actually building a full layout.

This book is focused on the workflow and does not duplicate what you can already find in the official documentation. This book will show you how to reference the documentation and use it effectively in your projects.

BONUS: Includes a link to download a free cheat sheets bundle and a 1 hour training video.Who is this for?You’re an absolute beginner and want to become a web developer.You learned HTML and CSS 5-10 years ago but are new to responsive web design basics.You have used Bootstrap before but want to learn new techniques and workflow.What will I learn?Learn what responsive web design is, the history behind it, and how the Bootstrap 4 frontend framework makes it easier to implement.Learn the web design process and workflow necessary to make a responsive website and application with Bootstrap 4.Learn what’s new in Bootstrap 4 with a deep focus on CSS3 Flexbox, Cards, and the responsive grid layout.What will I build?Responsive Marketing Homepage – Topics covered: responsive images, image cards, parallax background images, Google fonts, carousel cross-fade, and vertical centered text.Bootstrap Admin Dashboard – Topics covered: 100% height sidebar, card deck, FontAwesome icons, responsive charts and tables, and custom navigation tree menu.How is this training unique?Learn by doing as you build two professional responsive layouts examples step-by-step.Focused on the workflow vs duplicating what you can find in the official documentation. This book will show you how to reference the documentation and use it effectively in your projects.Uses hyperlinks to point to code demos, snippets, videos, and external resources.What do I need?Some experience with HTML and CSS is helpful but not necessary.Does not require knowing Sass, command line, or Photoshop.A computer with Google Chrome.A text editor like Atom and an internet connection.

You want to build a beautiful website or user interface that works on all major browsers. Let Jacob show you how step by step. If you like detailed step by step guides, plenty of examples, and printable cheat sheets, then you’ll love Jacob Lett’s approach at how he creates responsive layouts using Bootstrap 4.

Buy the Bootstrap 4 Quick Start today and start building responsive layouts in less time and with less effort!


Bootstrap
by Jake Spurlock

Discover how easy it is to design killer interfaces and responsive websites with the Bootstrap framework. This practical book gets you started building pages with Bootstrap’s HTML/CSS-based tools and design templates right away. You’ll also learn how to extend your app with interactive features, using its suite of jQuery plugins—often without writing a single line of code.

Developed by Twitter and available free from GitHub, Bootstrap supports responsive design by dynamically adjusting your web page layout. With just a basic knowledge of HTML, CSS, and JavaScript, you can build apps that work equally well on desktop screens, smartphones, and tablets. This book shows you how.

  • Become familiar with Bootstrap’s file structure, grid systems, and container layouts
  • Learn HTML elements for typography, code, tables, forms, buttons, images, and icons
  • Design interfaces and other web elements, such as navigation, breadcrumbs, and custom modal windows
  • Use jQuery plugins for features such as revolving slideshows, tabbable interfaces, and dropdown menus
  • Modify everything from column count to typography colors with the LESS stylesheet language

Introducing Bootstrap 4
by Jörg Krause

Learn how to use the front end CSS framework Bootstrap 4 to create powerful web applications. You’ll work with all the components of Bootstrap 4 using easy-to-follow instructions and example code snippets. You’ll also use Bootstrap 4 for typography, forms, and modules, and see how to structure your page and your code to be optimally efficient.
CSS frameworks give front end developers the capability to create responsible or adaptive web designs that overcome the various variations of modern browsers. Bootstrap is the leading CSS framework and gives developers a unique way to create responsive web sites.

What You’ll Learn

  • Understand the basics about responsive web design using CSS3
  • Install and use the SASS framework
  • Use the templates and themes market for Bootstrap

Who This Book Is For
This book is for developers of web applications who already know how to use CSS and JavaScript and want to explore the capabilities of a framework to increase productivity.


Vue.js 2 and Bootstrap 4 Web Development
by Olga Filipova

Learn how to combine Bootstrap with Vue.js to build responsive web applications.

About This Book

  • Build applications with a good architecture and clean UI with Vue.js and Bootstrap
  • Understand Bootstrap components and learn to integrate them with the Vue.js structure
  • Build, deploy, and test your code with various utility tools provided by Vue.js

Who This Book Is For

This book is for JavaScript programmers who are new to web frameworks and want to start learning it by developing interactive and responsive web applications.

What You Will Learn

  • Create and build web applications using Vue.js, Webpack, and Nuxt.js
  • Combine Bootstrap components with Vue.js’ power to enrich your web applications with reusable elements
  • Connect the Vuex state management architecture to the Firebase cloud backend to persist and manage application data
  • Explore the new grid system of Bootstrap 4 along with the far simpler directives in Vue.js
  • Test Vue applications using Jest
  • Authenticate your application using Bootstrap’s forms, Vue.js’ reactivity, and Firebase’s authentication API
  • Deploy your application using Firebase, which provides Backend as a Service

In Detail

In this book, we will build a full stack web application right from scratch up to its deployment.

We will start by building a small introduction application and then proceed to the creation of a fully functional, dynamic responsive web application called ProFitOro. In this application, we will build a Pomodoro timer combined with office workouts. Besides the Pomodoro timer and ProFitOro workouts will enable authentication and collaborative content management. We will explore topics such as Vue reactive data binding, reusable components, routing, and Vuex store along with its state, actions, mutations, and getters. We will create Vue applications using both webpack and Nuxt.js templates while exploring cool hot Nuxt.js features such as code splitting and server-side rendering. We will use Jest to test this application, and we will even revive some trigonometry from our secondary school!

While developing the app, you will go through the new grid system of Bootstrap 4 along with Vue.js’ directives. We will connect Vuex store to the Firebase real-time database, data storage, and authentication APIs and use this data later inside the application’s reactive components. Finally, we will quickly deploy our application using the Firebase hosting mechanism.

Style and Approach

Step-by-step tutorial


Bootstrap 4 Cookbook
by Ajdin Imsirovic

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.


Learning Bootstrap 4
by Matt Lambert

Unearth the potential of Bootstrap 4 to create highly responsive and beautiful websites using modern web techniques

About This Book

  • This book shows how to take advantage of the all new features introduced in Bootstrap
  • Learn responsive web design and discover how to build mobile-ready websites with ease
  • Find out how to extend the capabilities of Bootstrap with a huge range of tools and plugins, including jQuery,
  • Do more with JavaScript and learn how to create an enhanced user experience

Who This Book Is For

If you want to learn to build enterprise-level websites efficiently with Bootstrap, this book is for you. You must have a basic and fundamental understanding of HTML, CSS, and JavaScript; however, there is no need to have prior Bootstrap experience.

What You Will Learn

  • Fire up Bootstrap and set up the required build tools to get started
  • See how and when to use Flexbox with the Bootstrap layouts
  • Find out how to make your websites responsive, keeping in mind Mobile First design
  • Work with content such as tables and figures
  • Play around with the huge variety of components that Bootstrap offers
  • Extend your build using plugins developed from JavaScript
  • Use Sass to customize your existing themes

In Detail

Bootstrap, the most popular front-end framework built to design elegant, powerful, and responsive interfaces for professional-level web pages has undergone a major overhaul. Bootstrap 4 introduces a wide range of new features that make front-end web design even simpler and exciting.

In this gentle and comprehensive book, we’ll teach you everything that you need to know to start building websites with Bootstrap 4 in a practical way. You’ll learn about build tools such as Node, Grunt, and many others. You’ll also discover the principles of mobile-first design in order to ensure your pages can fit any screen size and meet the responsive requirements. Learn to play with Bootstrap’s grid system and base CSS to ensure your designs are robust and that your development process is speedy and efficient. Then, you’ll find out how you can extend your current build with some cool JavaScript Plugins, and throw in some Sass to spice things up and customize your themes. This book will make sure you’re geared up and ready to build amazingly beautiful and responsive websites in a jiffy.

Style and approach

With the help of several real-world examples and code, this book will teach you to build a full-featured responsive website in Bootstrap, which is mobile-ready.


Bootstrap 4 – Responsive Web Design
by Silvio Moreto, Matt Lambert, Benjamin Jakobus, Jason Marah

Unearth the potential of Bootstrap with step-by-step guidance.

About This Book

  • An applied guide exploring web application development with Bootstrap 4
  • Learn responsive web design and discover how to build mobile-ready websites with ease
  • Become an expert in Bootstrap framework, and speed up frontend development and prototyping through real-life examples

Who This Book Is For

If you’re a web developer with little or no knowledge of Bootstrap, then this course is for you. The course offers support for version 4 of Bootstrap; however, it will offer support for version 3 as well. So, you will be ready for whatever comes your way. Prior knowledge of HTML, CSS, and JavaScript is expected.

What You Will Learn

  • Discover how to use Bootstrap’s components and elements, and customize them for your own projects
  • Understand the framework’s usage in the best way with the recommended development patterns
  • Use Sass to customize your existing themes
  • Apply the Bootstrap mobile-first grid system and add responsiveness and aesthetic touches to image elements
  • Customize the behavior and features of Bootstrap’s jQuery Plugins extensively
  • Style various types of content and learn how to build a page’s layout from scratch by applying the power of Bootstrap 4
  • Work with content, such as tables and figures

In Detail

Bootstrap framework’s ease-of-use (along with its cross-browser compatibility, support for mobile user interfaces, and responsive web design capabilities) makes it an essential building block for any modern web application.

With the first module, plunge into the Bootstrap frontend framework with the help of examples that will illustrate the use of each element and component in a proper way. You will get a better understanding of what is happening and where you want to reach. Also, you will gain confidence with the framework and develop some very common examples using Bootstrap. All these examples are explained step by step and in depth.

The second module is a comprehensive tutorial; we’ll teach you everything that you need to know to start building websites with Bootstrap 4 in a practical way. You’ll learn about build tools such as Node, Grunt, and many others. You’ll also discover the principles of mobile-first design in order to ensure that your pages can fit any screen size and meet responsive requirements. Learn Bootstrap’s grid system and base CSS to ensure that your designs are robust and that your development process is speedy and efficient.

Right from the first chapter of the third module, you’ll delve into building a customized Bootstrap website from scratch. Get to grips with Bootstrap’s key features and quickly discover the various ways in which Bootstrap can help you develop web interfaces. Once you reach the final pages of this book, you should have mastered the framework’s ins and outs, and should be building highly customizable and optimized web interfaces.

The course will enable you to rapidly build elegant, powerful, and responsive interfaces for professional-level web pages using Bootstrap 4.

This Learning Path combines some of the best that Packt has to offer in one complete, curated package. It includes content from the following Packt products:

  • Bootstrap by Example – by Silvio Moreto
  • Learning Bootstrap 4, Second Edition – by Matt Lambert
  • Mastering Bootstrap 4 – by Benjamin Jakobus and Jason Marah

Style and approach

This course will help you unearth the potential of Bootstrap and will provide a step-by-step guide on how to create beautiful websites and model web applications.


Learn Bootstrap: The Collection
by Maria Antonietta Perna, Syed Fazle Rahman, Ilya Bodrov-Krukowski, Ahmed Bouchefra, Craig Watson, Rhiana Heath, Ivaylo Gerchev, George Martsoukos, Ashraff Hathibelagal, Manjunath M, Zeeshan Chawdhary, David Attard, Callum Hopkins, Reggie Dawson

Bootstrap stands as the most popular open-source, front-end framework on the Web. Since its official release in 2011, it has undergone several changes, and it’s now one of the most stable and responsive frameworks available. It’s loved by web developers of all levels, as it gives them the capability to build a functional, attractive website design within minutes. A novice developer with just some basic knowledge of HTML and little CSS can easily get started with Bootstrap.

This collection presents three books:

  • Your First Week With Bootstrap, a collection of articles introducing Bootstrap
  • 8 Practical Bootstrap Projects, which presents several complete, real world Bootrap projects
  • Bootstrap: Related Tools & Skills, which contains a collection of articles outlining essential tools and skills that every Bootstrap developer should know.

This collection is for all frontend developers who want to build responsive, mobile-first websites with Bootstrap. You’ll need to be familiar with HTML and CSS and have a reasonable level of understanding of JavaScript in order to follow the discussion.



About apujb86