Downloading and Installing Bootstrap

This short tutorial will show you how to use Bootstrap on your website. When you are finished with this tutorial you should have a bare bones Bootstrap page to start working with.


 

Where to Find Bootstrap

The first step to installing the Bootstrap framework is downloading the source code. These files can be found at the Bootstrap website: http://getbootstrap.com/. Selecting the most current version is recommended since this is the only version that is supported. Make sure to download these files to the directory where your HTML files are stored or else it will not work. Save everything with the same structure they had when downloaded, folders and all.

Creating a Basic Bootstrap Page

The following represents a basic HTML page:

basic_page

In order to add Bootstrap functionality to this page, you simply need to link to the Bootstrap CSS file:

bootstrap_link.PNG

If you placed your source files in a location different than your HTML files, be sure to update the href attribute to point to the correct location.

This is all it takes to create a basic Bootstrap page, but if we include jQuery and the Bootstrap JavScript to our page, we can introduce new interactivity that we will talk about in future blog posts. To add JavaScript functionality add the following lines of code to the very bottom of the HTML page, just before the closing </body> tag:

javascript_link

After this has been added to you HTML, Bootstrap is strapped and ready to go. Keep in mind, this is the simplest of Bootstrap pages, with just enough code to utilize the framework. The official Bootstrap Basic Template looks a little more complicated than what we just configured, but rest assured there is nothing special you need to do with this template, as you can start building your HTML right away with the same functionality as our barebones page. Here is what the Basic Template looks like:

basic_page_pic.PNG


Finished!

basic_template_screenshot.PNG

 

 

 

 

 

 

Congratulations! You have built your first Bootstrap enabled website. While it might not look like much yet, you are well on your way to creating professionally designed and polished websites that everyone will enjoy. Be sure to check back for more Bootstrap tutorials.

 

-Happy coding,

Michal Patriak

 

 

Advertisements

Author:

I am a software development student eagerly exploring the software industry.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s