Getting Started with Your New Bootstrap Theme

By on May 2, 2016 in Tutorials
Getting Started with Your New Bootstrap Theme

So, you've chosen an exciting Bootstrap theme that you want to use to make your website look amazing and modern. Now what? If you're new to creating websites or Bootstrap itself, we've made a simple guide to walk you through the steps.

In this guide we will cover:

What You Will Need

To get started with a customized Bootstrap Theme, you will need to download a Bootstrap theme from Creative Market, some basic knowledge of HTML and CSS, and a code editor so that you can customize your template.

So, What Is Bootstrap Anyway?

Simply put, Bootstrap is a template. It’s an HTML5 & CSS3 framework that was developed by Twitter. Bootstrap is a toolkit to help you create awesome and responsive websites and web applications. It comes with HTML, CSS, and Javascript already built in, which you can customize to your heart’s content.

Creative Market offers a variety of themes that will help make your project look amazing. Simply browse our collection of Bootstrap themes and find what works best for you.

How To Download and Install a Theme

Step 1 - Getting your files

You can browse all of the awesome Bootstrap themes at Creative Market.

Save

Once you have found one that you are in love with, Click Buy Now, then Download your new Bootstrap theme.

Save  Save

After your purchase has been downloaded, unzip the file. In most cases, you will find a documentation folder and a theme folder.

Save

The documentation folder will consist of your assets, css, js files. The theme folder will contain the HTML page(s) you can edit to add your own content. In some cases, there will be multiple HTML pages of various styles to choose the style you wish to use.

Save Save

Step 2 - Customizing Your Theme

Now you’re ready to customize your pages. I would personally start by making sure you have a copy of all of the files before you begin customizing them. You can now open up the working copy of the files that you want to begin customizing in your code editor of choice. From this point on, you will need a basic knowledge of HTML and CSS if you want to make changes. If you are happy with the interactivity that has come with your theme, there is no reason to touch the Javascript (.js) files, so don't worry if you don't know it.

For beginners, I will try to break down the difference between all three in the simplest terms possible.

  • HTML is the content of your page.
  • CSS is the style of your page (i.e. colors, columns, width, font size, etc).
  • Javascript is the interactivity of your page (i.e. how the user interacts with the page. This could include things like hover effects or animations).

For the most part, you will only need to be concerned with changing the content of the page. Check out our Other Resources section to find some beginner’s guides to HTML and CSS.

Step 3 - Your Website Is Ready To Go Live

What you will need to do once your website is ready to go live is beyond the scope of this tutorial. However, simply put, you will need a way to host your site.

If you don’t already have a web host for your site, check out the Top 10 Web Hosting Companies and choose one that suites your needs. Once you get set up, the hosting company of your choice will have additional instructions.

Step 4 - Pat Yourself on the Back

Congratulations! You have made an awesome looking website and it was so easy, wasn't it? You are officially a master of the web!

Other Resources

Note: You can always contact the seller of the theme if you have a more specific question with the theme itself.

Still need help? We are always here to help. Contact us!

Find Bootstrap Themes On Creative Market

Hopefully you have found this guide helpful. If you still haven’t found the theme that you’re looking for, check out Creative Market‘s section of Bootstrap themes now.

Save  Save

Save  Save

Save  Save

Free lettering worksheets


Download now!

img

Download now!

Getting started with hand lettering?

Download these worksheets and start practicing with simple instructions and tracing exercises.

7 Comments

  1. creativenauts

    Lovely article, I'd like to point out that Bootstrap was developed with LESS which can be found here:

    http://lesscss.org/

    If you're looking to edit the framework, I have found it much easier to do that by editing the less files and then recompiling everything. There are many great benefits of using less to save time and also functions and variables are nice addition to stylesheets :D

  2. Rossi007

    No information on how to install the theme even though it is in the contents. No a very helpful article at all

You must be signed in to post a comment.

Made with Creative Market

Browse a gallery of inspiration made with design assets from Creative Market.

Explore the Gallery →

Meet the Creative Market Authors

Learn more about the talented writers behind the articles.

Meet the Authors →

Download Our FREE Branding eBook

Get a FREE, fun, and friendly guide to design your own brand.

Get your eBook →