How To Use Full Website Templates Bootstrap

This guide will assistance you get started with a Bootstrap Theme, including how to run, customize, update, and integrate your theme!

And so you've downloaded your theme's .zip file, unpacked it, and you're ready to beginning building! To view your theme, you lot'll need to run your theme's "build process" to compile source files and create a local server to preview pages.

Note: Some themes come with a directory of already compiled files for your convenience, simply yous'll however desire to run your theme'due south build tool to serve the compiled files and avoid your local filesystem's limitations.

Setting up local development

We allow each theme creator to select their own tooling and commands since each theme has different needs, so always to refer to your theme's documentation for the bodily commands and installation instructions. That said, the basic process of setting up local development is roughly the same in every theme:

Install a theme's dependencies from your command line via npm. (i.e. npm install)
Run a "watch" or "build" command powered past Gulp, Grunt, or Webpack build tools. (i.e. npm get-go or gulp)
Open up your browser to your local server'southward accost (i.east. open up Chrome to localhost:3000)
Edit source files and preview changes instantly with live reload

If the list above sounds like a foreign language to yous, that's okay! Allow's intermission it down:

npm stands for node packet managing director. Npm is a tool to automate the process of installing and upgrading packages of code required to properly run your theme locally – that'south why they're called dependencies! If y'all don't accept Node installed (which at present contains npm), you'll need to download and install it.
Gulp, Grunt, and Webpack (build tools) are JavaScript libraries used to compile a theme'south source files and create a local server. Each library has dissimilar syntax and capabilities and it'south upward to each writer which library they adopt to apply. They all accomplish the aforementioned result cease result: let us to compile source files and view those changes immediately in a browser.
A local server is a temporary server environs on your figurer generated past your theme'southward build tool. This avoids browser limitations of serving files directly from your computer's filesystem (i.due east. CORS limitations).
Alive reload is a convenience functionality that many themes volition include as part of their build tooling. It simply means that when yous edit source files, after they are recompiled, your browser volition magically refresh and display the changes without a manual refresh.

What are source, compiled and static files?

These terms are can mean different things in different contexts, merely for the purposes of a Bootstrap Theme:

Source files are files that are meant to be processed by a theme'south build tools.
Compiled files are generated as a result of running a compiling procedure (also called a "build process") on the source files.
Static files are ones that aren't candy or generated.

Here are a few real globe examples of each type of file:

SCSS files are always source files because they must be compiled by your theme'due south build tool to generate a CSS file that a browser can empathise.
HTML files with any non-standard syntax are source files. Some themes make use of libraries to create "includes" for elements shared across multiple pages. These includes must be compiled by your theme'due south build tool to generate standard HTML.
The output of both the above examples are compiled files. The CSS files are generated by processing the source SCSS. The HTML files are generated by processing the pseudo-HTML source. Both were generated from source files and volition be overwritten if source is compiled again.
Fonts, images, and standard HTML are static files. These don't require any processing to exist used and aren't generated from whatever other source. That said, some themes may process images to optimize their size, in which instance they would then be source files. Become it?

The build process visualized

Hither's what the whole build process looks like at a high level starting from source files and ending with a rendered theme page in your browser!

Static HTML
Compiled HTML

How do I know which files are source, compiled or static?

Since each theme is organized slightly differently, in that location's no single answer, but it's usually not too tough to sort information technology out.

First, the documentation of your theme may accept a breakup of the theme'due south directories with articulate explanations of each.

Second, source files are normally in folders named src/ or app/, while compiled files are often found in /dist, public/, or build/ folders.

If neither of the higher up are helpful, you lot tin can always popular open your theme's build tooling lawmaking and review the functions/tasks where source files are candy. Even if you lot're not familiar with Gulp, Grunt, or Webpack syntax, you can unremarkably tell what's happening at a loftier level. Just look for the file paths of what'due south being processed and where information technology's outputting. The inputs are source files and the outputs are compiled files.

As always, if things aren't clear to you, we encourage you lot to reach out to the theme creator for clarification!

Customize your theme

Now that you lot've got your theme running and understand the compiling process, let's discuss the proper ways to edit and customize your theme. There are two primary strategies for working with your theme.

Strategy 1: Working with source files

Working with source files showcases how powerful Bootstrap themes can exist and the underlying pattern systems. It allows you to use powerful features like SCSS variables to change a theme's entire color scheme or blazon system by swapping a few variable values. If you're comfortable with using build tools and are familiar with SCSS syntax, this is probably the style to go 😉

While y'all tin can edit a theme's source files directly, we suggest adding additional SCSS or JS files to extend and override the theme'due south source files with your own custom ones. The major benefit of keeping a theme's source files separate from your own additions is a simpler upgrade path when your theme is updated. This is discussed farther in the Updating your theme department of this guide.

Using SCSS source files as an instance, a simplified "height level" SCSS file might await something like this:

          // Import your custom SCSS variables            // (Tin can contain custom variables, theme variable overrides, and Bootstrap core variable overrides)            @import            'custom-variables.scss';            // Import your theme's SCSS variables            // (Typically both custom variables and ones that override Bootstrap core variables)            @import            'theme/variables.scss';            // Import the Bootstrap core                        // (This file imports all Bootstrap core's variables and components from the Bootstrap core package installed via npm)            @import            '../../../node_modules/bootstrap/scss/bootstrap.scss';            // Import your theme'south core SCSS            // (This file would import a bunch of component SCSS files)            @import            'theme/theme.scss';            // Import your custom components/styles            // (This file could import separate files or be a single SCSS file)            @import            'custom.scss';

Wondering why custom variables come earlier theme variables, which are before Bootstrap cadre variables? Bootstrap core and most themes makes use of SCSS's !default flag when setting variable values, which basically says "merely set this variable value if it isn't already defined". When used on all variables in these files, it means custom-variables actually has the highest priority in defining variables. There are benefits to this strategy, but it'southward beyond the scope of this guide.

Each theme will accept its own setup for SCSS imports, and then y'all'll have to follow the documentation and review the organization, simply the in a higher place illustrates the right overall arroyo to customizing your theme past working with source files.

Notation: Some themes will fifty-fifty provide a placeholder SCSS files for custom styles that are already imported into the main SCSS file and compiled automatically. They're typically named custom.scss & custom-vars.scss...user.scss & user-vars.scss...or something similar.

Strategy 2: Working with compiled files

Working with the compiled files generated from running your theme's build tools is the simplest, fastest manner to get started with a theme. Just attach the compiled CSS and JS files to an HTML page, or utilise an HTML folio already provided in your theme. No build tools or local servers necessary.

If you've ever worked with Bootstrap by simply "attaching the CSS and JS", this is the aforementioned idea.

For similar reasons outlined to a higher place in "Strategy 1: Working with source files", yous'll desire to add additional CSS/JS files instead of editing your theme'southward CSS/JS files to make updating your theme easier in the time to come. Just create a new CSS/JS file and link it after the theme's compiled CSS/JS in your HTML pages.

Recompiling volition overwrite your changes! If y'all ignore the proposition above and do edit your theme's compiled CSS/JS/HTML files directly, exist careful to not ever run your theme's build tool once more. It volition unforgivingly overwrite edits you lot made in the compiled files.

Deciding on a strategy

Now that we've outlined the two strategies of editing a theme, let's discuss when it makes sense to use each. Information technology comes downward to customization and control .

If you want to securely customize a theme's blueprint with large, systemic style changes, you'll want to edit source files and compile them. You tin accomplish the same degree of customization with additional CSS and JS to supplement the compiled files, but for large changes, the source files will provide greater ability, flexibility, consistency, and efficiency.

If y'all want to control how files are being candy, which source files are existence included, or want to apply a framework's build process (Rail Asset Pipeline, Laravel Mix, etc.), yous'll need to use source files and compile them.

Let'due south consider a few examples and our suggested strategy for each:

"I need to ship a site for my visitor/app and just want it to look nifty and work well". Use the compiled CSS and JS. It'due south easier to get started, like shooting fish in a barrel to deploy, and if yous need to customize a handful of things, you tin can add some extra CSS afterward the compiled CSS to overwrite or extend it. Easy peasy. Should yous ever demand to make more meaning changes, you can reevaluate and start using the source files without much overhead.
"I desire to heavily customize the theme's design to match my product's brand and use it as a design organisation for my new company". Utilize the source files. Themes were built for this! Richer customization like systemically changing color schemes or irresolute type styles benefit greatly from using a theme'due south SCSS variables. Instead of overriding colors and type settings across dozens of components and pages, you can replace a single variable'due south value and watch that propagate throughout the entire theme instantly.
"I demand to customize just a few things to start and maybe a petty in the future. " This one could go either style. Nosotros'd encourage you to ask yourself if the "few things" feel similar systemic pattern changes, meaning practice they effect a multitude of components and pages. For example, changing a colour scheme effects most components, and so yous'll desire to utilise the SCSS color variables in the theme'due south source, compile, then use the resulting CSS to go started. If the changes are less pervasive, similar changing the height of the nav or the spacing betwixt elements, you should be simply fine using the compiled files and including some boosted CSS/JS overrides to make adjustments.

Update your theme

When a theme is updated, you volition be notified past the Bootstrap Themes platform with a link to download the latest version. Depending on how you decided to customize your theme and how extensive your customization is, there are different strategies for updating.

Updating compiled vs. source

It'due south always smart to start past reviewing the changelog for the update. This is the best fashion to get a loftier level snapshot of the changes to inform your update strategy.

If y'all're working with the compiled files, your update should begin with replacing the one-time compiled CSS and JS with the newer versions. Continue by reviewing to see if in that location are whatever changes to HTML structure or the classes used in the CSS or JS that yous need to account for. If you see issues, using a unequal tool to review changes betwixt the previous and latest versions of a file can assistance pinpoint the alter causing issues.

If you lot're working with source files, your update process really depends on how yous customized your theme. If you added additional SCSS and JS files to override the source ones, and then your update is similar to updating with compiled files. More or less yous can "replace the old source with the new" followed by spot checks in components and pages that are explicitly noted as updated in the changelog. If you direct edited the theme's source files, you're in a fleck of a tougher situation and will accept to "cherry choice" the changes y'all fabricated to reintegrate them with the updated files. A diffing tool is your best friend hither. If yous run into this debacle, we suggest too investing in extracting all your custom SCSS and JS into their own files to avoid this in the futurity.

Nosotros're working to make upgrades easier by starting to enforce more than detailed changelogs and encouraging "migration guides" for larger calibration updates. For at present, if yous're really struggling with an update, don't hesitate to reach out to the theme's creator for support or questions about the procedure.

Integrate with frameworks

One of the about common questions our back up and sellers receive is "does your theme work with Track? React? Laravel? Athwart? Django? Vue? WordPress?"

The short answer to all of these is ✨YES!✨

The longer answer is yes, but there are varying degrees of work depending on how you want to integrate a theme (compiled vs. source) and which framework you're integrating with.

Integrating compiled vs. source

Equally discussed in a higher place, there are 2 principal ways of customizing a Bootstrap Theme. Integrating a theme into your preferred framework poses the aforementioned choice betwixt working with compiled or source files, and essentially the same tradeoffs of customization and command described to a higher place. That said, in that location is an additional consideration when working in the context of a framework:

If you want to work with source files, do y'all want to use a framework-specific solution to compile instead of the provided tooling? Some frameworks include tools intended to achieve the same tasks every bit your theme's provided build tools, including compiling source files. For example, Rails has the Asset Pipeline and Laravel has Mix. Both these can handle compiling SCSS → CSS and concatenating JS files. There can be added features and benefits of using a framework'south solution for these tasks, merely too consider that there tin can also be unexpected complexities by taking over the build process (i.e. requiring transpiling of ES6 JS to ES5 for maximum browser support). If you're well versed in your framework'south preferred tooling and can match the necessary steps of your theme's build tools, become for information technology! If you're uncertain, we advise starting with compiled files so you can ignore the added complexity of source files and build files (Gulp, Grunt, Webpack).

Compatibility issues with JS frameworks

Frameworks like React, Angular, and Vue accept a preferred way of handling JS, especially with regards to manipulating the DOM and handling events. This means a theme's JS, custom components and 3rd political party plugins, probable won't piece of work out of the box. You have a few techniques to resolve this:

Supercede vanilla JS or jQuery plugins with framework specific alternatives
Hand-interpret pocket-size $.25 of custom JS to your framework's preferred methods
Remove any JS or plugins y'all don't intend on using anyhow to minimize the workload

Do you provide integration back up?

Bootstrap Themes doesn't officially back up integrating themes into 3rd party frameworks. In that location are quite a few reasons for this, but the primary 1 is that expecting every Bootstrap Theme creator to be an experienced professional person in upwards of a 10+ pop frameworks across a host of dissimilar languages isn't reasonable. Theme creators should be focused on designing and building flexible and beautiful component-centric themes.

That said, almost theme creators take been asked "how to integrate their theme into framework X" 100'south of times, then it doesn't hurt to inquire since they may have helpful advice in addition to this guide and their documentation.

What nearly Bootstrap Themes with the [React] tag?

While the vast majority of Bootstrap Themes are primarily elementary HTML/CSS/JS, some themes have been adapted into total-fledged React themes. They are built from custom React components. Most React themes brand utilise of the unaffiliated React Bootstrap library for Bootstrap'south core components.

More and more themes are being translated to true React themes over time, so if you find a theme you love that doesn't have a React version yet, it could exist worth contracting the seller to run into if they're planning on releasing one.

Framework integration guides

We're working on drafting detailed integration guides for each framework, but none are fix quite nonetheless. If you lot're experienced with the framework you lot program on using, nosotros believe the wide direction provided in this guide can get you most of the manner. Guides for the following frameworks are in the works:

Rail
React
Laravel
Angular
Django
Vue

Annotation: Wondering why WordPress isn't on this list? Integrating a Bootstrap Theme into WordPress theme is a massive undertaking, no dissimilar than building any new WordPress theme. If you lot're a WordPress theme developer, so you'll be just fine since a Bootstrap Theme is a drove files you're already familiar with. If non, we'd advise you to research the complexities of edifice a WordPress theme before attempting to adapt a Bootstrap Theme into one.