Bootstrap Basics
Bootstrap is a CSS framework that will make your web application look good, fast, and responsive. You won't have to worry about having a decent user interface when you use it.
I love Bootstrap because it solves a problem that I have. I'm not good at designing web app user interfaces. That is why I made this Bootstrap tutorial for beginners.
As proof, you will see that we are using Bootstrap in most of our tutorials. Here are some good looking websites or web apps built with the help of Bootstrap: http://expo.getbootstrap.com
Just a little history, Bootstrap was created on Twitter. It was called Twitter Bootstrap to streamline their development. Thanks to these people, the library is still in active development.
This Bootstrap tutorial for beginners will cover the following: 1.0 Include Bootstrap via CDN 2.0 Write HTML5 boilerplate 3.0 Include Bootstrap CSS 4.0 Include Bootstrap JavaScript 5.0 Add a navigation bar 6.0 Add navigation links 7.0 Add a dropdown 8.0 Add a search form 9.0 Add a content container 10.0 Add a heading 11.0 Add a table 12.0 Add form elements to a table 13.0 Add an alert message 14.0 Bootstrap online resources 15.0 What's next? 16.0 Related tutorials 17.0 Some notes
The following sections will be your step by step guide to your first web development with Bootstrap.
1.0 INCLUDE BOOTSTRAP VIA CDN We will use a CDN or Content delivery network to enable Bootstrap on our page.
Using Bootstrap CDN means that we will not download and store the bootstrap files in our server or local machine. We will just include the Bootstrap CSS and JavaScript links on our web page.
2.0 WRITE HTML5 BOILERPLATE Create new index.html file. Open the file, place the following code and save it.
BOOTSTRAP ONLINE RESOURCES
- The Bootstrap official website.
- Live websites built with bootstrap.
- Choose your Bootstrap themes.