What is Bootstrap?
Bootstrap is is a toolkit comprised of HTML, CSS, and Javascript tools. Twitter created Bootstrap to allow developers to design their apps with minimal effort so that they can focus on building features, instead of spending a lot of time trying to style the app. Bootstrap comes out of the box with designs and styles that you can easily implement but boostrap is also flexiable so you can modify anything in Bootstrap if you wish to alter the styles and add some of your own creativity. So, whether you don't want to deal with styling at all or you love to take charge of all styling aspects but want to save time on the basics, Bootstrap is for you!
Bootstrap comes with two versions, a precompiled version and a source code version. The sourse code version is a little bit more flexible but requires a little more work. If you are looking for something simple and quick to implement, then using the precompiled version is the ideal version to go with. If it is your first time using Bootstrap, I recommend the precompiled version. One you've gotten your feet wet and feel comfortable with Bootstrap, try out the source code version and try experimenting with the various ways to alter your styles. The sourse code version uses Less (there is also a version that uses Sass). Less and Sass are special stylesheet extensions that has built-in javascript like functionality built into them. This adds an extra level of learning on top of learning the basics of Bootstrap. Once you get the basics of Boostrap down, you can make your code a lot more effecient and faster to write once you start using the sourse code version with Less. But for today we will stick to the precompiled version.
Let's get started
You will need to download Bootstrap. There are two ways to get Bootstrap. The easiest way to download Boostrap is with npm.
npm install bootstrap@3
(if you use Bower you can run: bower install bootstrap)
If you want to use Less with Bootstrap, after installing Bootstrap run:
composer require twbs/bootstrap
Also, in order for the browser to be able to read Bootstrap it will need to be compiled and Boostrap used Grunt to to compile so you will need to install Grunt.
npm install -g grunt-cli
Another way to install Bootstrap is to download it directly to your computer from Bootstraps website. To download it that way or to get more info you can go to: https://getbootstrap.com/docs/3.4/getting-started/
Ok, now that we've got BootStrap installed let's get started!
Here is a basic html templated provided by the Bootstrap docs.:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>Bootstrap 101 Template</title>
<!-- Bootstrap -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
</head>
<body>
<h1>Hello, world!</h1>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" crossorigin="anonymous"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script>
</body>
</html>
Boostrap uses JQuery so you will need to include the script tag for jQuery. This should go above any Javascript.
Bootstrap has a lot of built in templates. Some of them are grid, buttons, tables, dropdowns, accordians, tabs and much more. Below I will show some examples of a few of these.
Buttons are a very common item that most applications utilize. Bootstrap includes templates for many different styled buttons.
If you wish to have a clear button but with coloring specific to a type of function you can use the code below:
<button type="button" class="btn btn-outline-primary">Primary</button>
<button type="button" class="btn btn-outline-secondary">Secondary</button>
<button type="button" class="btn btn-outline-success">Success</button>
<button type="button" class="btn btn-outline-danger">Danger</button>
<button type="button" class="btn btn-outline-warning">Warning</button>
<button type="button" class="btn btn-outline-info">Info</button>
<button type="button" class="btn btn-outline-light">Light</button>
<button type="button" class="btn btn-outline-dark">Dark</button>
this is a basic button:
<button class="btn btn-primary" type="submit">Button</button>
Another item that most developers will need to implement is a nav bar. Bootstrap has several templates for nav bars and all of them can be styled to a developer's liking. Here are 3 versions of one of Bootstraps out of the box nav bar template:
<nav class="navbar navbar-dark bg-dark">
</nav>
<nav class="navbar navbar-dark bg-primary">
</nav>
<nav class="navbar navbar-light" style="background-color: #e3f2fd;">
</nav>
In this article we went over how to download bootstrap and had some examples of some basic boostrap templates. Be on the loop out for more on Bootstrap templates and how to implement them.
Top comments (0)