Bootstrap 4 Modal Demos

See the Pen Modal Demos by SitePoint (@SitePoint) on CodePen.dark

Sidebar Template

See the Pen Sidebar template by Mohamed Azouaoui (@azouaoui-med) on CodePen.dark

Thank You Page Template

See the Pen Thank You Page Template by Jacob Lett (@JacobLett) on CodePen.dark

Custom Drag & Drop

See the Pen Custom drag file upload by Aaron Vanston (@aaronvanston) on CodePen.dark

Float Label

See the Pen Float Label by Anton Staroverov (@tonycorp) on CodePen.dark

Responsive Menu

See the Pen Responsive Bootstrap 4 menu – light/dark by Ivan Grozdic (@ig_design) on CodePen.dark

Play YouTube or Vimeo Videos in Modal

See the Pen Play YouTube or Vimeo Video in Modal – Bootstrap 4 by Jacob Lett (@JacobLett) on CodePen.dark

Auto Custom Buttons

See the Pen Auto Custom Bootstrap Buttons by Chris Johnson (@thecssguru) on CodePen.dark

Wizard

See the Pen Wizard by Nily F. Vicent (@missvicent) on CodePen.dark

Pricing Table

See the Pen Pricing Table by Daniel Zawadzki (@danzawadzki) on CodePen.dark

Here, we offer up some side-by-side comparisons as well as suggestions for starter themes to use for both Zurb Foundation and Bootstrap. With all the info on the table, you can plan your site’s launch ASAP.

Comparison articles

Take a look at these comparison articles to get a sense of how these two platforms stack up.

Should You Use Bootstrap or Foundation?

Bootstrap vs Foundation Compared: Who Has an Upper Hand?

Foundation 6 vs Bootstrap 4

Bootstrap vs Foundation: Which One is Better?

Foundation WP Starter Themes

If you’re thinking of getting started with Foundation, you should definitely consider using a WordPress starter theme. The following are all solid options:

JointsWP

JointsWP is a nice starter theme for Foundation that’s blank and ready to be molded into whatever you’d like it to be.

Rich Modern Foundation 6 WordPress Theme

Rich Modern is another Foundation starter theme that offers a basic template on which to build your WordPress website.

TotalPress

TotalPress is another starter theme that’s actually based on the Underscores theme. With it, you can create any type of layout you want.

WP-Forge

WP-Forge is a basic starter theme for Foundation but it’s so flexible you can use it to build any kind of site you want, with the latest features, too.

Reverie

Lastly, there’s Reverie, a stylish starter theme for Foundation that’s mobile friendly and includes custom menus, captions, and pagination.

Bootstrap WP Starter Themes

If Bootstrap is more what you prefer, then we have some Bootstrap starter themes for you as well. These are all well reviewed and nice to look at, too:

UnderStrap

UnderStrap is a Bootstrap starter theme that’s responsive and includes theme options for heavy customization.

Sage

Sage is a WordPress starter theme based on Bootstrap 4 that makes it easy to write stylesheets and Sass for your site without complicated backed customization.

Bootstrap WordPress Starter Theme

The Bootstrap WordPress Starter Theme is actually a tutorial for creating a Bootstrap theme from scratch.

Silencio

Lastly, Silencio is described as a “content-first” starter theme for WordPress. A solid choice if you want to create an online publication or blog.

So Which is It? Foundation or Bootstrap?

Whether you choose Foundation or Bootstrap will ultimately be up to you and the needs of your website. But hopefully this collection of comparison articles will help you first figure out which platform you want to you and second, which starter theme you want to use as the base of your site.

Whichever you choose, it’s certain to be great!

And where there’s a framework, there will always be free templates built by developers for anyone to use. Here are some of the best general-purpose Bootstrap themes online, totally free to download and edit for your own websites.

Creative

This simple yet beautiful one-page theme is made for small businesses. With a full-screen header, clean design, and working lightbox gallery, it makes a perfect mini-portfolio for any creative startups.

Grayscale

Grayscale is an elegant multipurpose theme with a minimal dark palette. The template would work well to show off a project or introduce your brand. A beautiful header with a call to action button scrolls you right down into a small portfolio, followed by a newsletter subscription box and social media links.

Freelancer

If you’re a freelancer, you’ll like this portfolio template. The flat, cartoony design is very appealing and will certainly make you stand out. And the portfolio section includes popup lightbox windows with room to describe all your projects, plus a contact form you can get working with a few PHP tweaks.

Resume

Professional and elegant, this template is perfect for an online resume. The clean theme features fixed side navigation and sections to list experiences and skills, with a design that gets to the point while still being aesthetically pleasing. A great way to impress future bosses and clients.

New Age

Need a template with a pop of color? New Age is filled with bright and vivid designs, including a beautiful header gradient that’s sure to capture attention. The modern one-page design was made to showcase your app, product, or anything else.

Tabler

Looking for a build-your-own Bootstrap admin panel with a clean dashboard interface? There are plenty of interface pieces and useful components already made for you. Just put them all together to create a unique template.

Coming Soon

Got a big project but aren’t quite ready to reveal it? Coming Soon is a great landing page, with room for a short blurb, newsletter sign-up, social icons, and a huge video background. The video includes a fallback image for mobile users so you don’t need to worry about performance.

NewBiz

This professional business template comes with everything a startup will need. Eye-catching scroll and hover animations keep users interested, while each section has something unique like a lightbox portfolio or a scrolling slider. This is definitely a more feature-packed theme.

Regna

Regna is a business-oriented template that opens with a beautiful header and transitions to a clean, professional look. There are plenty of animated effects, useful sections, and even a sortable portfolio gallery. The pro version comes with a working contact form and removed attribution.

CoreUI

Every business needs a good admin panel, and CoreUI lets you build your own. Use their customizable components to put together a dashboard that has everything you want. Widgets, charts, cards and popups – and the pro version comes with even more elements.

Rapid

Rapid offers a light and sophisticated template made for businesses of any kind. Elegant animations are found on every scroll, and the theme includes all the sections you’ll need to present your brand. There’s a filterable portfolio, pricing section, contact form, and plenty more.

Beautiful Bootstrap Templates

Thanks to Bootstrap template designers, you don’t need to build a website from scratch. Just install one of these themes and tweak the images and text, or build on them to add your own elements. It’s a real timesaver. Try one of these beautiful, functional Bootstrap themes and make them work for you.

On the downside, it seems like many sites using Bootstrap tend to have a similar look and layout. But that is more of a product of taking design shortcuts rather than an indictment on the framework itself. Going beyond the default styles is quite possible and much easier than you may think.

With that in mind, we went on a search for free Bootstrap templates that lean toward the barebones end of the spectrum. They offer a virtual clean slate and give you the power to customize both the look and layout as much as you’d like. So, instead of ripping apart an existing design, you can get straight to making your own mark.

Bare

Bare is designed to help you get started without any fuss. There are no fancy styles applied and it comes with predefined paths. The template works with Bootstrap 4 and sports a fixed top navigation.

Simplex

Touted as both “Mini and Minimalist”, Simplex contains some basic styles that will provide you with a great starting point. You’ll find minimal navigation, buttons, typography, forms, containers and more goodies within this lightweight package.

Understrap

Understrap is a clever mix of Automattic’s Underscores barebones WordPress theme and Bootstrap. Thus, your next WordPress project can utilize Bootstrap without the excess bloat of a prebuilt theme. Understrap features Bootstrap 4, is compatible with the WordPress Customizer and supports WooCommerce.

Initializr

Initializr will generate a simple HTML template based on your requirements. Bootstrap 3.3.1 can be bundled right in with your template.

Bootply

Use Bootply to build your own custom Boostrap starter template. Using their online builder, you can make things as simple (or complex) as you’d like. There are options for different layouts, various sidebars (including off-canvas) and more.

WP Bootstrap Starter

WP Bootstrap Starter is aimed at developers who want to build upon basic features to make their own custom theme. Like Understrap above, it’s based on Underscores. That means it’s lightweight and ready for full-on customization.

LayoutIt!

LayoutIt! is a tool featuring a drag-and-drop interface for quickly building Bootstrap-based templates. There are three base templates to choose from (Starter, Basic Marketing Site and Article). Once you’ve selected a template, you’ll be able to add elements such as grids, components and even JavaScript. You can have a basic, yet functional template set up within minutes.

Sage

A competitor to Undesrcores, Sage is a WordPress starter theme that comes with Bootstrap baked right in. The theme features task automation via gulp, and the ability to easily add front-end packages via Bower. Template markup is based on HTML5 Boilerplate.

Bootstrap 4 Starter Template

If you’re looking for dead simple way to start off a new site, WebNots has put together their own Bootstrap 4 Starter Template. Not only can you grab a copy of their template, there is also a handy guide for building your own.

BS Starter

BS Starter provides the basics you’ll need to get up and running with your design project. The template features a full-width slider and is minimally styled. It gives you just enough to help you create your own look and layout.

Give Complex Templates the Boot

When embarking on a new project, you’re better off using a starter Bootstrap UI kit that lets you make all of the important design decisions. That’s where these minimal and barebones options really shine. Instead of having a Bootstrap-based theme that simply looks like everyone else, you’ll have the flexibility to use the framework to create something unique.

You might also like these Free Bootstrap Dashboard Admin Templates.

But the default Bootstrap design is dull and overused. Why not add a custom UI kit into the mix?

You’ll be running on Bootstrap while also re-styling your site with a unique look. This collection should get you started with some kick-ass open source Bootstrap UI kits for that custom aesthetic you always wanted.

1. Material Design for Bootstrap

If you’ve been keeping up with design news then you’ll know material design is huge. And what a better way to use material design than by combining it with Bootstrap?

Thankfully other designers had the exact same thought and built Material Design for Bootstrap.

This open-source toolkit lets you quickly prototype material web apps using HTML, CSS, and JavaScript all running on top of the Bootstrap foundation.

You have full access to BS3 Sass mixins, custom code libraries, and components, all of which are restyled for a material design slant. Pretty cool if you’re into Google’s design patterns.

2. Bootflat

Here’s a UI kit similar to material design but without all the material-y UX stuff.

Bootflat is quite possibly the cleanest CSS kit you’ll find. It works on top of the latest version of Bootstrap 3.x and may be updated for the newer BS4.

With Bootflat you have full access to all page elements & components, plus this works in all major browsers with legacy support dating back to IE8.

Also this comes with a free PSD of all the Bootflat elements. You can use this to mockup a design in Photoshop before ever touching a line of code.

3. Drunken Parrot Lite

With a name like Drunken Parrot you may not know what to expect. But this free Bootstrap theme is actually pretty cool with loads of incredible components at your disposal.

This also comes with a free PSD kit along with the HTML/CSS code so you can mockup your layout first. I definitely like the aesthetics because they feel so natural. I’d say they can work on basically any website.

Only downside? Drunken Parrot is a freemium kit meaning it offers a free version with fewer features, and a pro version with everything. But don’t let this stop you from testing the free version. It’s got a beautiful design that’s hard to find elsewhere.

4. Flat UI

Designmodo’s Flat UI kit offers a unique take on flat design with Bootstrap. This comes as part of Designmodo’s library of resources, many of which cost money. But Flat UI is their freebie release.

You’ll find custom design styles for everything: on/off switches, tabbed widgets, dropdowns, checkboxes, form fields, you name it.

The demo page has everything in the kit so you can see how it looks. To grab a copy for yourself just visit the GitHub repo.

5. Metro UI

Along with Google’s material style is the Microsoft metro style. It’s another newer design language that works on the typical “windows” design with flat panes for interface elements.

With the Metro UI library you’ll have full access to a customizable set of components for your Bootstrap layouts. These can work for practically any page, and they’re super easy to use.

Take a peek at the examples page to see how this looks. You’ll also notice the project’s navigation mimics the traditional Bootstrap nav with pages for components and base CSS styles.

6. Design Blocks

The Froala Design Blocks kit works a little differently than most. This works on little block elements for pages that use Bootstrap, so it’s like an open source library of BS3/BS4 code components.

These “blocks” are really just custom page elements with different styles. Footers, headers, navigation menus, forms, plus a bunch of other categories.

This works well for building a widgetized Bootstrap layout, but it’s not a cohesive theme.

Still an awesome project and 100% free for life.

7. Get Shit Done

The team at Creative Tim often release crazy freebies for the design community. One of the best is the Get Shit Done UI kit designed for Bootstrap.

It currently sits at over 40,000 downloads and gets infrequent updates to go along with changes to the Bootstrap library.

Take a peek at the live examples page to see how all the components look together. It’s a beautiful design that feels so far away from Bootstrap it’s almost like a completely custom UI kit!

8. Now UI Kit

Here’s another gorgeous UI kit designed by the folks at Creative Tim. With the Now UI Kit you get a bunch of awesome features and a stellar aesthetic, but this one’s designed specifically for BS4.

I haven’t found a BS3 version of this kit, so it’s pretty much solely for the newest version of Bootstrap. You can tell it’s already got quite a following with 20k total downloads in less than a year.

Again this has a live preview page showcasing all the custom elements like on/off switches, checkboxes, radios, tabs, nav menus, everything.

Note Creative Tim does run this as a freemium kit, so it has a pro version with hundreds of extra components. But if you don’t need all that extra stuff you can totally get by with the free version.

9. Flatto UI Kit

I rarely find UI kits for the web that support mobile interfaces. But the Flatto UI Kit is one such example that’s absolutely phenomenal.

If you take a look at the preview page you’ll find a bunch of custom mobile UI elements like title bars, back buttons, and sliding hamburger menus.

The flat design style is really cool and feels unique compared to the other flat UI kits. Check it out if you’re looking for a mix of mobile and web styles all running on Bootstrap.

10. Availity

Currently the Availity UI kit is made for all BS3 layouts. But with the beta release of Bootstrap it’s likely that Availity will be updated to support BS4 too.

It’s a pretty small framework, and it comes with a unique design. It mimics a lot of Bootstrap traits like gradients and semi-3D styles on buttons, while also restyling them for a refreshing twist.

You can see more on the components page inside the Availity documentation. This even comes with extra icon webfonts and custom JS scripts all packaged together.

Availity isn’t the prettiest UI kit for Bootstrap, but it is one of the most comprehensive with support for every page element you can imagine.

Prominent examples include WordPress, Stripe, and Shopify. They typically include a significant amount of options and editable content. As such, the designer of an admin dashboard is tasked with incorporating these options while maintaining usability, design consistency, and simplicity.

When executed to a high level, the results can be stunning and present some of the very best examples of user interface and user experience design.

You might also like: 10 Free Bootstrap Dashboard Admin Templates.

V – Role Editor

This role editor dashboard uses an abundance of white space alongside a beautifully selected color palette to use across default avatars, icons and buttons.

Pehia Dashboard

A highly visual example, Pehia’s dashboard utilises subtle pink and orange gradients throughout as well as overlapping shapes, simple icons, and large user imagery.

Project Management Dashboard

This project management dashboard utilises a card-based user interface with a bold use of color for project status and tracking. The sidebar and cards contrast perfectly with the grey background color.

Zeta Hr Dashboard

This simple but effective dashboard design by Zeta offers tremendous contrast and a beautifully spacious layout. The colors are on-point and highlight the different dashboard sections particularly well.

Sweetapp

Sweetapp’s user interface focuses on white with a primary green color. Depth is provided via subtle shadows and border outlines. The design is spacious and the iconography is excellent.

Tenory Practice Activity

This dashboard design by TenorySync uses plenty of white space and bold card background colors. The timeline has been executed beautifully with great depth and visual effect.

SpendStore

SpendStore has kept their use interface design very simple. It’s highlighted with beautiful gradient buttons and a satisfying off-pink highlight color. The details have been executed with precision in this admin dashboard.

Tapcore

Tapcore’s dashboard is exceedingly clean and uses many aspects of the Material design movement. The content sections use a subtle drop shadow for contrast and the iconography is cohesive throughout.

Metronic

The Metronic admin dashboard template is a standout amongst competition. The navigation is unique but has a high degree of usability. The colors work beautifully throughout the graphs, charts, and typography.

Papanda

Papanda uses a two-tone color scheme of blue and orange. It also integrates custom illustrations which are a delight to experience and offer extra brand continuity throughout the design.

Here are 10 free Bootstrap-based themes that will help to turn your custom admin area into a user-friendly powerhouse.

AdminLTE

AdminLTE is a lightweight theme that prides itself on being both beautiful and useful. It’s fully responsive, includes a selection of six skins and is even optimized for printing.

Material Dashboard

Built with Google’s Material Design in mind, Material Dashboard is clean and colorful. The UI is inspired a bit by layered sheets of paper and uses light, surface and movement to create an easy-to-use dashboard.

AdminBSB – Material Design

Those looking for a very Google-like interface will love AdminBSB – Material Design. It follows the principles of Material Design while providing users with a familiar-looking GUI.

BootFlat Admin

BootFlat Admin features an attractive and easy-to-navigate dashboard area. As its name indicates, it uses the BootFlat flat UI kit.

Klorofil

Klorofil features lots of useful elements such as charts, timelines, notifications and ready-to-use page templates. It provides you with all the basics you’ll need to build a perfect backend to your site or web-based app.

Shoppy E commerce Admin Panel

Using vibrant colors and a flat UI, Shoppy is a great choice for a custom eCommerce dashboard. It’s fully responsive and includes lots of goodies like buttons, icons and animated charts.

Paper Dashboard

Unlike a lot of admin themes out there, Paper Dashboard is quite subtle in its use of color. That leads to a beautiful UI that may have a bit more of a calming effect than other, more cluttered choices.

Bluebox

There’s something to be said for simplicity in color scheme. Bluebox does it to near perfection in that the consistent use of blue makes it easy to find what you’re looking for. It comes with lots of UI elements while supporting Google Fonts and Fontawesome Icons.

Blocks – Single Page Admin

Blocks takes a different approach to the admin screen by utilizing a fully-widgetized UI. Also gone is the ubiquitous left-side navigation in favor of a much more subtle menu across the top. This just goes to show that there is more than one way to create an appealing admin layout.

Free Responsive Horizontal Admin

Free Responsive Horizontal Admin also eschews the standard left menu. The theme also makes nice use of white space and sports a muted color scheme. This could be a solid choice for those who need a more simple and minimal type of dashboard.

Admin Themes That Help You Take Control

Admin areas have, to some degree, gotten a bit stale – especially when you look at what some popular CMS are doing. Part of their problem is that you don’t necessarily want to make radical changes to a UI that millions are comfortable with.

So the real innovations are coming in the form of the roll-your-own dashboards, like the ones featured above. Building your own admin can free you up to take a few more chances than the bigger players out there. Bootstrap admin themes are proof that there is still a lot of room for both improvement and different ideas.