Elegant themes are giving away thousands of free prizes from the Divi and WordPress communities. I don't want to miss it! Ad

Bootstrap templates

Bootstrap 3 & 4 Templates

We usually release one or two Free Bootstrap templates per month. At the moment there are 37 Free and Premium Bootstrap themes and templates carefully prepared for your personal or commercial use.

At the moment, many templates are in Bootstrap 3 and more and more templates are already in Bootstrap 4 supporting all its great new features.

All of the templates are coded with care, fully responsive and cross-browser compatible. Many of them come also with 5+ colour variants to choose from. Enjoy and have fun!

Info on how to modify the templates

Italiano - Restaurant or Café Template

Italiano is my free Bootstrap 4 HTML responsive template. You can use it to build an elegant website for a restaurant, café or bistro. This template comes with a lot of useful elements that you might need. Features of this template: - Intro carousel with extraordinary CSS animation, - Well-chosen icon fonts, - Lightbox gallery, - Fancy About section, - Our menu section, - A section for upcoming events or courses, - Signature dishes and Special offers sections, …

View template

Foliou - Bootstrap Portfolio
B3 & B4
Premium

Foliou - Bootstrap Portfolio

Foliou is a responsive one-page Bootstrap 4 portfolio template. It presents your work in a clean and elegant manner and can be used by freelancers and agencies alike. As usual, it comes with 6 prepared colour variants. SASS source files are also included in the download so you can easily and quickly generate your own unique colour combination or make design changes effectively. (Bootstrap 3 version of this template is also included and comes with LESS files) Sections of this HTML portfolio…

View template

Ad

Ad

Bootstrap Blog
Bootstrap 4

Bootstrap Blog

Bootstrap Blog is a free Bootstrap 4 blog template. Its design is minimalistic, almost all elements are in black and white, only few have a touch of the primary colour. No rounded corners this time :) It contains 3 HTML page templates, all of them in 7 colour variants. Default colour variant is gray this time. As usually, you can switch the stylesheet's main colour to pink, red, blue, green, blue, violet or sea blue. Pages included in this template: - Homepage with hero image, intro…

View template

Places - Bootstrap 4 Directory Template
Bootstrap 4
Premium

Places - Bootstrap 4 Directory Template

Places is a clean and fresh Bootstrap 4 directory template. This template comes with 8 complete page templates, each of them in 6 colour variants - red, pink, violet, blue, sea blue and green. Check out the live demo. You can use this template for: - Restaurants directory, - Hotels directory, - Real estate directory or comparison site, - Gyms, Pharmacies, Holiday rental directories and other local business directories, online business directories, For even smoother…

View template

University - Education template
Bootstrap 4
Premium

University - Education template

University is a modern Bootstrap 4 education template. It will be your great starting point when building a website for a college, high school or online course directory. This template comes with 6 colour variants and 10 useful HTML template pages. All templates are valid and contain well-commented HTML code. SASS files are included in the download too. Pages included: - Homepage, - Courses listing, - Courses listing - table, - Course detail, - Staff, - Staff detail, -…

View template

ShowTracker - Landing page
Bootstrap 4

ShowTracker - Landing page

ShowTrackr is a Bootstrap 4 landing page template designed to introduce your app and collect leads. It contains 3 demo pages: - Homepage - hero section with a device mockup and a signup form, sections introducing your app/product, testimonials section and more, - What's on - demo page with tabs and a list view , - Text page, The design and concept of this landing page are by Daniel Korpai, originally published in his great article on Medium. Other credits go to -…

View template

Ad

Ad

Bubbly - Admin template
Bootstrap 4

Bubbly - Admin template

Bubbly is the newest member in Bootstrapious admin templates family. Its design language follows the current design trends - pastel colours, subtle shadows, rounded corners. This Bootstrap dashboard contains 5 responsive HTML pages, all of them in 6 colour variants. Pages included in this template: - Main dashboard with 10 different widget types, - Demo tables - 4 demo table styles, - Charts - Custom styled line charts, bar charts, doughnut, pie chart and more, - Forms screen -…

View template

Universal - Business & E-commerce Template

Universal is a clean and stylish universal website template, now updated to Bootstrap 4. It stands out with its clean design and elegant typography. It is one of the most complex free Bootstrap templates and with almost 70k downloads (as of Feb 2018), it is also my most popular Bootstrap freebie. This template includes 45 HTML pages so you should have everything you need to start developing new business, portfolio or e-commerce website. Along with the 45 pages, you will get also 11 pages…

View template

Creative portfolio
Bootstrap 4

Creative portfolio

Creative portfolio is a clean and elegant template mainly made for designers and creatives but can be easily transformed into a generic website. It is fully responsive, based on the latest Bootstrap 4.1.1. This Bootstrap template is easy to modify and customise and is being shipped with 6 colour variants: blue, pink, red, violet, green and sea blue. Although being shipped for free, this template comes with many cool features including: - 6 colour variants, - 4 pages - home, about,…

View template

Hub - Bootstrap 4 E-Commerce Template
Bootstrap 4
Premium

Hub - Bootstrap 4 E-Commerce Template

Hub is a clean and fresh Bootstrap 4 e-commerce template. This template comes with 27 complete page templates, each of them in 6 colour variants - red, pink, violet, blue, sea blue and green. Your own colour variant of this template can be easily created by modifying template's SASS files that are included in the template package. Pages included - Homepage (3 variants - classic, parallax sections, video background), - Category listing (3 variants), - Product detail, -…

View template

Ad

Ad

Bootstrap 4 Dashboard Premium
Bootstrap 4
Premium

Bootstrap 4 Dashboard Premium

Bootstrap 4 Dashboard Premium is a premium version of my Bootstrap Dashboard template. This template contains all the UI elements that come with the free version and many premium components and plugins. SASS files are also included in the download. There are 23 HTML page templates, all of them in 6 colour variants. Pages included in this template: - Main dashboard with 14 different widget types, - Basic demo tables - 4 demo table styles, - Data Table - advanced data table with…

View template

Townville - Real estate template
Bootstrap 4
Premium

Townville - Real estate template

Townville is a professional Bootstrap 4 template for real estate businesses. You can use it to build a professional website to offer houses and apartments in the online space, provide rental services, or create property listings. Either way, Townville template is the right choice for you. It comes with a rich user interface kit that contains a wide variety of website elements carefully designed and coded. You can use this template for: - Real estate agency, - Rental agency, …

View template

Appton - Landing page
Bootstrap 4

Appton - Landing page

Appton is a versatile Bootstrap 4 template designed to serve as a presentation/landing page for your company or application. This template includes 6 colour variants, great SVG illustrations that can be easily modified to match your brand colours and a custom icon font. It is built with the latest version of Bootstrap 4. Pages included in the template: - Sectioned homepage with a subscribe form, advantages section, clients section, portfolio/photo gallery and more., - Text page, -…

View template

Designer - Bootstrap 3 Portfolio Template
Bootstrap 3

Designer - Bootstrap 3 Portfolio Template

Designer is clean and elegant portfolio theme for web designers, programmers, creatives, etc. It is fully responsive, based on the latest Bootstrap 3.3.6. This portfolio template is easy to modify and customize and is being shipped with 6 colour versions: blue, pink, red, violet, green and sea blue. Although for free, this template comes with many cool features including: - Styled google map , - 6 colour variants, - Valid Html5, CSS3 markup, - Fully responsive, -…

View template

Multi - Multipurpose template
Bootstrap 3

Multi - Multipurpose template

Multi is clean and stylish multipurpose website template built with Bootstrap 3.3.7. You can use it to kickstart development of a business website, blog or portfolio. This theme includes 6 colour variants - blue, pink, green, red, sea blue, violet. Multi comes with many cool features including: - Homepage jumbotron, - Great icon fonts, - Gallery/portfolio section with lightbox, - Styled Google Map, - Section with features / services, - Prestyled signup form (no…

View template

Photo - Bootstrap 4 E-commerce Template
Bootstrap 4
Premium

Photo - Bootstrap 4 E-commerce Template

Photo is a fully responsive Bootstrap 4 E-commerce template. It is built with the Bootstrap 4.1.1 and contains 11 HTML pages that cover all the major needs when building a new e-commerce website. Out of the box, there are 6 colour variants prepared for you and more can be easily created by modifying template's SASS files. Pages included: - Homepage - version 1, - Homepage - version 2, - Category listing (3 variants), - Product detail, - Shopping cart, - Blog listing, …

View template

How to modify a Bootstrap Template

Almost everyone will be able to modify Bootstrapious templates but you will need a basic knowledge and understanding of HTML and CSS. My templates are coded with care and their code is easy to read. Many of Bootstrapious fans use my themes as a way to learn Bootstrap, so there is really nothing to worry about.

In the next few paragraphs, I will try to describe how to do the most basic edits and start using my templates quickly.

1. Download a text editor

You can use a basic text editor like Notepad but I would like to recommend one of these three: Sublime Text, Atom or VS Code. All of them are very fast, they will highlight your HTML and CSS syntax and can be extended with many additional plugins. I personally use VS Code on Windows 10.

2. Extract the template files

All Bootstrapious downloads come as .zip files. To start working with the template files, extract them to your hard drive. Now you are ready to start with the modifications to the template.

3. Content changes

3.1. Basic HTML editing

To change a homepage of your new website, open an index.html file in your text editor and edit it there. 

3.2. Navigation

Do not forget to change links in your navbar appropriately. If you are not creating a one-page website, an active page needs to have a .active class in the navbar to be properly highlighted. Unfortunately, there is no easy way to do this automatically in HTML, so you have to do it manually. 

4. Appearance changes

4.1. A file to save the CSS changes

To add new CSS declarations or to update the current stylesheets, you can a) edit the original source file (e.g. style.default.css) or store your changes in a custom.css file (recommended).

The reason I encourage overriding the CSS in a separate file is because of the template's future updates. When a new update for the template is released, you can just overwrite the original files but your changes will remain intact in a separate custom.css file. Bootstrapious templates also use this approach in relation to Bootstrap framework - everything is kept in a separate file.

4.2. Change template colour

Almost every Bootstrapious template, both free and premium, come with 5 or 6 colour variants out of the box. To change to a different colour variant find <link href="css/style.default.css"> in your template's <head> and replace it with e.g. <link href="css/style.green.css">. This simple change will not only style all template's elements but also all standard Bootstrap features like pagination, blockquote, buttons, tabs and more.  

4.3. {LESS} files compilation

Premium templates contain also {LESS} source files. These are great to make bigger changes to the CSS stylesheets or to create your own colour variants super easily. You will need a compiler to compile {LESS} files to CSS after your changes. I use WinLess (Windows only), another good choice is Koala (multiplatform).

5. JavaScript settings and changes

Each template uses a different set of plugins and you can have a look at the complete list of the JS plugins in the readme.txt in your download file. Plugins are initialised and set in the front.js file located in a js folder. If you would like to tweak the settings of some particular plugin, consult again the readme file and check out plugin's project URL.

6. Additional components

6.1. Contact forms

Some templates contain also a skeleton for a contact form but usually, no backend code is included.

If you would like to choose PHP for your form's backend, I created a step-by-step tutorial on this topic. Before implementing this solution, make sure that your hosting supports PHP 5.3+.

6.2. Google maps

Some templates also come with Google maps sections or pages. From 2017, the Google maps need an API key to work correctly on your website. In some templates, an API key is provided but it is limited to local development and Bootstrapious.com domain, so you will have to generate it for your production usage anyway. To get your Google maps API head here. When you have your API key ready, just paste it to your Google maps JS call as in the following example. 

<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBu5nZKbeK-WHQ70oqOWo-_4VmwOwKP9YQ"></script>

You can find more info about Google maps and their integration to my templates in my Google maps tutorial.

6.3. Social icons

Would like to have Social icons on your page? Many of my Bootstrap templates have the icons already prepared, you just need to give them life.

There are two easy solutions. The first is to add links to social network sharing scripts, find out more about Social icons and share URLs in my tutorial. I recommend this solution as it will not add any additional data load to your website and everything will be nice and swift.

The second solutions are SumoMe's share buttons. Find out more about SumoMe Share installation.

6.4. Collecting emails

Many of my free Bootstrap themes also contain a form to collect email addresses. The form is not set for any email provider but its setup is very easy and straightforward. One of the most common emailing providers is MailChimp. More info on Bootstrap and MailChimp integration in my tutorial. 

6.5. Icon fonts

Almost every Bootstrap template you will find here uses Font Awesome icon font. This icon set contains almost 700 useful icons. To find out what these are, check out Font Awesome cheat sheet. I also use icon sets from Pixeden or Flat Icons. If you would want to add some more icons or change an icon style a bit, have a look at my curated list of free icon fonts.

Share on Facebook Share on G+ Share on Twitter Share on LinkedIn