Creating a Website with Bootstrap 3 Using Free, Open-Source Tools

Bootstrap in it’s most recent version, Bootstrap 3, is a great way to create good looking, responsive websites in a short amount of time. Today we wanted to show how you can take the Bootstrap 3 framework and combine it with a few free to use, open source tools to create a decent website in record time.

The tools we will be using are:

So, to begin you will want to have a good understanding of the Bootstrap framework itself. If you’re not familiar with Bootstrap, or if you aren’t up to date with the changes to Bootstrap 3, we recommend that you take a look at the documentation over at http://getbootstrap.com/ just to make sure you’re ready to work with the framework. If you’re already comfortable using Bootstrap, then you can skip this step.

Start Bootstrap - Free HTML Templates for Twitter Bootstrap

Browse Start Bootstrap’s library of Free HTML templates and pick one that works best for your site!

Next, we will choose a template from Start Bootstrap’s library of free, open source HTML templates. All of the templates featured on Start Bootstrap are up to date for Bootstrap 3. You can either start with a home page template, you can grab another type of page template, or you can download an entire website template. No matter what you choose, the process will be the same, so don’t worry! Browse around and pick a template, and then we’ll move on to the next step.

After choosing your template from Start Boostrap, we will choose a  free Bootstrap theme from Bootswatch. Bootswatch has a nice collection of attractive Bootstrap themes to choose from, so pick what will suit your website best! Each theme over at Bootswatch has a full preview that you can look at, so take your time and choose the one that you like best. When you’ve decided on a theme, download the bootstrap.css file associated with that theme. After you’ve downloaded your bootstrap.css file from Bootswatch, we’ll be ready to combine these two tools.

At this point you should have downloaded two things: a HTML template from Start Bootstrap, and a bootstrap.css file from Bootswatch. First, you will want to unzip the Start Bootstrap template. After you’ve unzipped it, open the folder and go to the template’s directory. You should see a folder called ‘css’. Open that folder, and replace the existing bootstrap.css file with the one you downloaded from Bootswatch. Once you’ve replaced this file, you’re ready to add content to your site!

Bootswatch - Free Themes for Bootstrap

Choose one of Bootswatch’s attractive, and free, Bootstrap themes!

Depending on what template you chose, your content will vary. If you just started with a single page, you might need to add a few more pages on your own to make the site complete. If you started with a full website template, then you may need to edit/add/or remove some of the existing pages. You can even mix and match some of the templates from Start Bootstrap, but make sure you have a fundamental understanding of HTML and CSS when you are doing so. Each template has it’s own custom CSS file that you will need to combine with one another.

No matter what you choose, you will have a great looking, easy, and quick start to a brand new website! For those who are skilled in HTML and CSS, this whole process might only take you a few minutes. For others who are just learning the ropes, it may take longer, but you will have the power to create a great looking website with these free, open source tools! Start Bootstrap also has some design recommendations on each of their pages, which are definitely worth checking out, they might help you to start moving in the right direction.

Thanks for reading, and we hope you enjoy these tools!