Your First Week With Bootstrap
()
About this ebook
Bootstrap stands as one of the most popular, open-source, front-end frameworks 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.
In this book we'll take you through Bootstrap basics, introduce you to its major features, and get you building your first Bootstrap sites. It contains:
- Why I Love Bootstrap, and Why You Should Too by Syed Fazle Rahman
- Understanding Bootstrap: How it Works, and What's New by Syed Fazle Rahman
- Super Smart New Features to Win You Over by Maria Antonietta Perna
- Understanding Bootstrap Modals by Syed Fazle Rahman
- A Deep Dive into the Bootstrap Form Component by Ilya Bodrov-Krukowski
- The Card Component: a Complete Introduction by Ahmed Bouchefra
- How to Build a Responsive Type Scale with Bootstrap by Craig Watson
- A Beginner's Guide to the Latest Bootstrap Utility Classes by Ilya Bodrov-Krukowski
- 3 Tips for Speeding Up Your Bootstrap Website by Maria Antonietta Perna
- Customizing Bootstrap jQuery Plugins by Maria Antonietta Perna
- 8 Tips for Improving Bootstrap Accessibility by Rhiana Heath
- Front-end Frameworks: Custom vs Ready-to-use Solutions by Ivaylo Gerchev
This book is for all frontend developers who want to build responsive, mobile-first websites. 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.
Syed Fazle Rahman
Web Designer with over 6 years of experience, including user experience and front end development. Currently, CEO and Co-Founder of Hashnode, a network of software developers. Has published two books: Jump Start Bootstrap and Jump Start Foundation for SitePoint Premium.
Related to Your First Week With Bootstrap
Related ebooks
Getting Started with Bootstrap 3.2 Rating: 0 out of 5 stars0 ratingsBootstrap for Rails Rating: 0 out of 5 stars0 ratingsMastering Bootstrap 4 Rating: 5 out of 5 stars5/5Getting Started with Zurb Foundation 5 Rating: 3 out of 5 stars3/5Bootstrap for ASP.NET MVC - Second Edition Rating: 5 out of 5 stars5/5Learning Bootstrap 4 by Building Projects: Develop 5 real-world Bootstrap 4.x projects from scratch Rating: 0 out of 5 stars0 ratingsResponsive Web Design by Example: Embrace responsive design with HTML5, CSS3, JavaScript, jQuery and Bootstrap 4 Rating: 0 out of 5 stars0 ratingsBootstrap 4 Quick Start: A Beginner's Guide to Building Responsive Layouts with Bootstrap 4 Rating: 0 out of 5 stars0 ratingsHands-On Dashboard Development with Shiny: A practical guide to building effective web applications and dashboards Rating: 0 out of 5 stars0 ratingsInstant Handlebars.js: Learn how to create and implement HTML templates into your projects using the Handlebars library Rating: 0 out of 5 stars0 ratingsInstant Responsive Web Design Rating: 5 out of 5 stars5/5The Missing Bootstrap 5 Guide: Customize and extend Bootstrap 5 with Sass and JavaScript to create unique website designs Rating: 0 out of 5 stars0 ratingsRazor View Engine How-to: Create dynamic web pages in your MVC web application with the Razor view engine Rating: 0 out of 5 stars0 ratingsResponsive Media in HTML5 Rating: 0 out of 5 stars0 ratingsLess Web Development Essentials Rating: 0 out of 5 stars0 ratingsASP.NET Core for Jobseekers: Build Career in Designing Cross-Platform Web Applications Using Razor and Entity Framework Core Rating: 0 out of 5 stars0 ratingsMastering Sharepoint Framework Rating: 0 out of 5 stars0 ratingsBuild Your First Web Site Today: EASYNOW Webs Series of Web Site Design, #1 Rating: 0 out of 5 stars0 ratingsMastering Bootstrap 4: Master the latest version of Bootstrap 4 to build highly customized responsive web apps, 2nd Edition Rating: 0 out of 5 stars0 ratingsJump Start Vue.js Rating: 4 out of 5 stars4/5Getting Started with SharePoint Framework (SPFx): Design and Build Engaging Intelligent Applications Using SharePoint Framework Rating: 0 out of 5 stars0 ratingsPerformance Project Rating: 0 out of 5 stars0 ratingsUnleashing the Power of Astro Rating: 0 out of 5 stars0 ratingsInstant PageSpeed Optimization Rating: 0 out of 5 stars0 ratingsHTML5,CSS3,Javascript and JQuery Mobile Programming: Beginning to End Cross-Platform App Design Rating: 5 out of 5 stars5/5Next.js Quick Start Guide: Server-side rendering done right Rating: 0 out of 5 stars0 ratingsBlazor WebAssembly by Example: A project-based guide to building web apps with .NET, Blazor WebAssembly, and C# Rating: 0 out of 5 stars0 ratings
Internet & Web For You
How to Be Invisible: Protect Your Home, Your Children, Your Assets, and Your Life Rating: 4 out of 5 stars4/5Podcasting For Dummies Rating: 4 out of 5 stars4/5Social Engineering: The Science of Human Hacking Rating: 3 out of 5 stars3/5Coding All-in-One For Dummies Rating: 4 out of 5 stars4/5Coding For Dummies Rating: 5 out of 5 stars5/5Six Figure Blogging Blueprint Rating: 5 out of 5 stars5/5How To Start A Profitable Authority Blog In Under One Hour Rating: 5 out of 5 stars5/5Wireless Hacking 101 Rating: 5 out of 5 stars5/5Cybersecurity For Dummies Rating: 5 out of 5 stars5/5No Place to Hide: Edward Snowden, the NSA, and the U.S. Surveillance State Rating: 4 out of 5 stars4/5How to Disappear and Live Off the Grid: A CIA Insider's Guide Rating: 0 out of 5 stars0 ratingsTor and the Dark Art of Anonymity Rating: 5 out of 5 stars5/5The Gothic Novel Collection Rating: 5 out of 5 stars5/5Remote/WebCam Notarization : Basic Understanding Rating: 3 out of 5 stars3/5Everybody Lies: Big Data, New Data, and What the Internet Can Tell Us About Who We Really Are Rating: 4 out of 5 stars4/5The Hacker Crackdown: Law and Disorder on the Electronic Frontier Rating: 4 out of 5 stars4/5WordPress For Dummies Rating: 0 out of 5 stars0 ratingsThe $1,000,000 Web Designer Guide: A Practical Guide for Wealth and Freedom as an Online Freelancer Rating: 5 out of 5 stars5/5Get Rich or Lie Trying: Ambition and Deceit in the New Influencer Economy Rating: 0 out of 5 stars0 ratingsGrokking Algorithms: An illustrated guide for programmers and other curious people Rating: 4 out of 5 stars4/5JavaScript All-in-One For Dummies Rating: 5 out of 5 stars5/5Stop Asking Questions: How to Lead High-Impact Interviews and Learn Anything from Anyone Rating: 5 out of 5 stars5/5How To Start A Podcast Rating: 4 out of 5 stars4/5Beginner's Guide To Starting An Etsy Print-On-Demand Shop Rating: 0 out of 5 stars0 ratingsHacking : The Ultimate Comprehensive Step-By-Step Guide to the Basics of Ethical Hacking Rating: 5 out of 5 stars5/5Wordpress for Beginners: The Easy Step-by-Step Guide to Creating a Website with WordPress Rating: 5 out of 5 stars5/5How To Make Money Blogging: How I Replaced My Day-Job With My Blog and How You Can Start A Blog Today Rating: 4 out of 5 stars4/5
Reviews for Your First Week With Bootstrap
0 ratings0 reviews
Book preview
Your First Week With Bootstrap - Syed Fazle Rahman
Chapter 1: Why I Love Bootstrap, and Why You Should Too
by Syed Fazle Rahman
Bootstrap stands as one of the most popular, open-source, front-end frameworks 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.
Bootstrap provides a solid foundation for any website, irrespective of project size. It contains Reboot, which is based on Normalize.css and helps level out browser differences for various page elements. Bootstrap also provides great typography. Even basic HTML form elements like checkboxes, radio buttons, select options, etc., have been restyled to give them a modern look. I use Bootstrap because it saves me a considerable amount of effort.
Today’s websites should be modern, sleek, responsive, and mobile first
. Bootstrap helps us to achieve these goals with minimum fuss. Here are the top five reasons why I love Bootstrap:
Reason 1: The Powerful Grid System
Bootstrap has one of the best responsive, mobile-first grid systems available. It’s built with Flexbox and it’s easy to use. It helps in scaling a single website design from the smallest mobile device to high-definition displays, logically dividing the screen into 12 columns, so that you can decide just how much screen real estate each element of your design should take up.
Although developers have CSS Grid Layout for layout building, the Bootstrap Grid component can still be handy for quick prototyping — at least while we get more familiar with the new native CSS tool at our disposal today.
Reason 2: Rapid Development
Bootstrap comes complete with many reusable CSS and JavaScript components that can help achieve the functionality needed in almost any kind of website. You just have to use some HTML to plug them into your template, with no need to spend huge amounts of time writing complex CSS and JavaScript. Plus, all these components are responsive, too!
Reason 3: Browser Compatibility
Bootstrap is compatible with the latest, stable releases of all major browsers and platforms. With regard to the Windows platform, Bootstrap works in Internet Explorer versions 10–11 and Microsoft Edge. If Bootstrap’s instructions are followed properly, you can create a website design that works in all these browsers.
Of course, if your employer wants to make a website that looks exactly the same in IE7–8 as it does in modern, standards-compliant browsers, then it might be time to think about switching jobs!
Reason 4: Customization!
Bootstrap offers many ways to customize its default design. You can override all of its CSS and default JavaScript behavior. Bootstrap is even more interesting if you’re a Sass developer, as it includes Sass customization options. These options let you smoothly create a new template using Bootstrap.
Reason 5: Open Source
Bootstrap is an open-source project that’s hosted on GitHub and released under the MIT license. This is one of the biggest reasons I use Bootstrap. My clients won’t have to deal with purchasing and licensing issues, and Bootstrap’s license gives me the freedom to completely change and experiment with it.
Want to Learn Bootstrap?
SitePoint has published my book on Bootstrap called "Jump Start Bootstrap". It teaches you how to get started with Bootstrap. Apart from teaching you how to use Bootstrap’s components and plugins, it also covers how to customize them through options like Less and Sass. A major section has been dedicated to Bootstrap’s grid system, which is the most important aspect of creating a responsive website design. You’ll also learn to create many demo website designs throughout the book.
Hopefully you found this article interesting, and it has convinced you to try Bootstrap in your future projects.
Chapter 2: Understanding Bootstrap: How it Works, and What's New
by Syed Fazle Rahman
Version 4 of Bootstrap is a major change from all its past versions. It’s a mobile-first framework and can claim to be one of the best CSS frameworks for building responsive website designs.
Since Bootstrap is a mobile-first framework, by default whatever you design or create will be mobile compatible or responsive. Isn’t that cool?
Getting Started
Bootstrap has a new website design which is itself built using the latest version of the Bootstrap framework (version 4 at the time of writing). You can either include the precompiled version of Bootstrap using a CDN or download the archive file here.
Once you unzip the archive file, you’ll see lots of files and folders that aren’t required for our tutorial. Jump directly into the dist directory and copy all the folders to a new destination, which will be your project home.
In previous versions of the framework, the download included an additional fonts folder. Now, no fonts are included, but we can easily grab some nice ones from Font Awesome, for example, or from your favorite resource for fonts. In our case, we have two directories, so let's look at each of them. The css folder contains six CSS files:
bootstrap.css
bootstrap.min.css
bootstrap-grid.css
bootstrap-grid.min.css
bootstrap-reboot.css
bootstrap-reboot.min.css
The latest version of Bootstrap is a lot more modular than previous ones. If you just need a nice CSS reset, just use bootstrap-reboot.css (and its minified version for production). Similarly, if you just want to use the grid, include bootstrap-grid.css (or bootstrap-grid.min.css for production) in your project.
For this tutorial, our main CSS file will be bootstrap.css, and we must include that in all our HTML pages. bootstrap.min.css is just the minified version of bootstrap.css. It’s needed when we’re actually deploying our application online.
Moving on to the js folder, we have the following four files:
bootstrap.bundle.js
bootstrap.bundle.min.js
bootstrap.js
bootstrap.min.js
These files contain Bootstrap’s main JavaScript libraries for things like carousels, drop-down menus, search auto suggest and many other powerful JavaScript functionalities. We’ll use the minified version when the application is ready for deployment.
Since Bootstrap 4 beta 2, the js folder has included two new folders, bootstrap-bundle.js (along with its minified version for production), and also Popper.js, a smart JavaScript library for managing poppers in web applications.
So What Exactly Are We Going to Build?
Live Code
In this article, we’re going to build a static landing page using Bootstrap 4, which will be called Rental Vacations
. Have a look at the demo page first.
Resize your browser window and you'll see some amazing transformations in the layout of the web page. It adjusts to the size of the window. You’ll also