How To Import Templates To Bootstrap

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

So you've downloaded your theme's .nil file, unpacked it, and you're ready to outset building! To view your theme, you'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, merely you'll even so want to run your theme's build tool to serve the compiled files and avoid your local filesystem'south limitations.

Setting upwards local development

We allow each theme creator to select their own tooling and commands since each theme has different needs, so e'er to refer to your theme's documentation for the actual 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 control line via npm. (i.e. npm install)
Run a "scout" or "build" command powered past Gulp, Grunt, or Webpack build tools. (i.eastward. npm kickoff or gulp)
Open up your browser to your local server's address (i.e. open Chrome to localhost:3000)
Edit source files and preview changes instantly with live reload

If the listing to a higher place sounds similar a strange language to y'all, that's okay! Let's break it downwards:

npm stands for node package director. Npm is a tool to automate the procedure of installing and upgrading packages of code required to properly run your theme locally – that'due south why they're called dependencies! If y'all don't have Node installed (which now contains npm), you'll need to download and install information technology.
Gulp, Grunt, and Webpack (build tools) are JavaScript libraries used to compile a theme'due south source files and create a local server. Each library has dissimilar syntax and capabilities and it's up to each author which library they prefer to use. They all reach the same result end result: allow us to compile source files and view those changes immediately in a browser.
A local server is a temporary server environment on your estimator generated by your theme's build tool. This avoids browser limitations of serving files direct from your figurer's filesystem (i.east. CORS limitations).
Live reload is a convenience functionality that many themes will include as part of their build tooling. Information technology simply means that when you edit source files, later on they are recompiled, your browser will magically refresh and display the changes without a transmission refresh.

What are source, compiled and static files?

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

Source files are files that are meant to be processed past a theme's build tools.
Compiled files are generated as a outcome of running a compiling process (besides called a "build process") on the source files.
Static files are ones that aren't processed or generated.

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

SCSS files are always source files because they must exist compiled by your theme's build tool to generate a CSS file that a browser can empathise.
HTML files with whatsoever non-standard syntax are source files. Some themes make use of libraries to create "includes" for elements shared beyond multiple pages. These includes must exist compiled by your theme's 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 be 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 so exist source files. Become it?

The build process visualized

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

Static HTML
Compiled HTML

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

Since each theme is organized slightly differently, there's no unmarried answer, but information technology's usually non too tough to sort it out.

Get-go, the documentation of your theme may have a breakdown of the theme's directories with clear explanations of each.

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

If neither of the above are helpful, you can always pop open your theme's build tooling code and review the functions/tasks where source files are processed. Even if you're not familiar with Gulp, Grunt, or Webpack syntax, yous can normally tell what's happening at a loftier level. Just look for the file paths of what's being processed and where it's outputting. The inputs are source files and the outputs are compiled files.

Equally ever, if things aren't clear to you, nosotros encourage you to reach out to the theme creator for clarification!

Customize your theme

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

Strategy 1: Working with source files

Working with source files showcases how powerful Bootstrap themes tin can be and the underlying design systems. Information technology allows you to utilise powerful features like SCSS variables to change a theme'due south entire color scheme or type arrangement by swapping a few variable values. If you're comfortable with using build tools and are familiar with SCSS syntax, this is probably the way to get 😉

While you lot tin edit a theme's source files directly, we suggest adding additional SCSS or JS files to extend and override the theme's source files with your ain custom ones. The major benefit of keeping a theme'south 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 section of this guide.

Using SCSS source files as an example, a simplified "top level" SCSS file might await something similar this:

          // Import your custom SCSS variables            // (Can comprise 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 cadre variables)            @import            'theme/variables.scss';            // Import the Bootstrap cadre                        // (This file imports all Bootstrap core's variables and components from the Bootstrap core bundle installed via npm)            @import            '../../../node_modules/bootstrap/scss/bootstrap.scss';            // Import your theme's 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 carve up files or be a unmarried SCSS file)            @import            'custom.scss';

Wondering why custom variables come before theme variables, which are earlier Bootstrap core variables? Bootstrap core and most themes makes employ of SCSS's !default flag when setting variable values, which basically says "only ready 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, simply it's beyond the scope of this guide.

Each theme will have its own setup for SCSS imports, and then you'll have to follow the documentation and review the organization, but the in a higher place illustrates the correct overall arroyo to customizing your theme by working with source files.

Note: 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 like.

Strategy 2: Working with compiled files

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

If you've e'er worked with Bootstrap by just "attaching the CSS and JS", this is the same idea.

For similar reasons outlined above in "Strategy i: Working with source files", you'll want to add boosted CSS/JS files instead of editing your theme'south CSS/JS files to make updating your theme easier in the future. Simply create a new CSS/JS file and link it later the theme'south compiled CSS/JS in your HTML pages.

Recompiling will overwrite your changes! If you ignore the suggestion above and do edit your theme'southward compiled CSS/JS/HTML files directly, be careful to not ever run your theme'due south build tool once again. Information technology will unforgivingly overwrite edits you made in the compiled files.

Deciding on a strategy

Now that we've outlined the two strategies of editing a theme, allow's discuss when it makes sense to apply each. It comes down to customization and control .

If you want to securely customize a theme's design with large, systemic mode changes, you'll want to edit source files and compile them. You tin can achieve the aforementioned degree of customization with boosted CSS and JS to supplement the compiled files, but for large changes, the source files will provide greater power, flexibility, consistency, and efficiency.

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

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

"I need to ship a site for my company/app and only want it to look groovy and work well". Use the compiled CSS and JS. Information technology's easier to get started, easy to deploy, and if you lot need to customize a handful of things, yous can add some extra CSS after the compiled CSS to overwrite or extend information technology. Piece of cake peasy. Should yous e'er need to make more pregnant changes, y'all can reevaluate and showtime using the source files without much overhead.
"I desire to heavily customize the theme'southward pattern to match my production's brand and use information technology as a design system for my new company". Use the source files. Themes were congenital for this! Richer customization like systemically irresolute color schemes or changing type styles benefit greatly from using a theme's SCSS variables. Instead of overriding colors and blazon settings across dozens of components and pages, you can replace a single variable's value and watch that propagate throughout the entire theme instantly.
"I need to customize simply a few things to offset and maybe a little in the hereafter. " This ane could go either style. We'd encourage you to ask yourself if the "few things" experience like systemic design changes, meaning practise they event a multitude of components and pages. For example, changing a color scheme effects virtually components, so y'all'll want to use the SCSS colour variables in the theme's source, compile, and so use the resulting CSS to get started. If the changes are less pervasive, like irresolute the height of the nav or the spacing between elements, you should be but fine using the compiled files and including some additional CSS/JS overrides to make adjustments.

Update your theme

When a theme is updated, you will exist notified by the Bootstrap Themes platform with a link to download the latest version. Depending on how you decided to customize your theme and how all-encompassing your customization is, there are different strategies for updating.

Updating compiled vs. source

It's e'er smart to start by reviewing the changelog for the update. This is the best way to get a high level snapshot of the changes to inform your update strategy.

If you're working with the compiled files, your update should begin with replacing the old compiled CSS and JS with the newer versions. Continue past reviewing to see if there are whatsoever changes to HTML structure or the classes used in the CSS or JS that you need to account for. If you meet problems, using a diff tool to review changes betwixt the previous and latest versions of a file can assist pinpoint the change causing problems.

If you're working with source files, your update process really depends on how you customized your theme. If you added additional SCSS and JS files to override the source ones, then your update is similar to updating with compiled files. More or less you 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 directly edited the theme's source files, you're in a scrap of a tougher situation and will have to "cherry pick" the changes y'all made to reintegrate them with the updated files. A diffing tool is your best friend here. If you lot come across this debacle, we suggest also investing in extracting all your custom SCSS and JS into their own files to avoid this in the futurity.

We're working to make upgrades easier by starting to enforce more detailed changelogs and encouraging "migration guides" for larger scale updates. For now, if y'all're really struggling with an update, don't hesitate to reach out to the theme'due south creator for back up or questions almost the process.

Integrate with frameworks

I of the well-nigh common questions our support and sellers receive is "does your theme work with Rail? React? Laravel? Angular? Django? Vue? WordPress?"

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

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

Integrating compiled vs. source

As discussed above, in that location are two principal ways of customizing a Bootstrap Theme. Integrating a theme into your preferred framework poses the aforementioned choice between working with compiled or source files, and substantially the same tradeoffs of customization and command described above. That said, there is an additional consideration when working in the context of a framework:

If yous want to work with source files, do you want to use a framework-specific solution to compile instead of the provided tooling? Some frameworks include tools intended to accomplish the aforementioned tasks as your theme's provided build tools, including compiling source files. For instance, Runway 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'southward solution for these tasks, simply besides consider that there tin also be unexpected complexities by taking over the build process (i.due east. requiring transpiling of ES6 JS to ES5 for maximum browser support). If you're well versed in your framework's preferred tooling and can match the necessary steps of your theme's build tools, go for it! If yous're uncertain, we suggest starting with compiled files so you can ignore the added complexity of source files and build files (Gulp, Grunt, Webpack).

Compatibility problems with JS frameworks

Frameworks like React, Angular, and Vue have 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 party plugins, likely won't work out of the box. You accept a few techniques to resolve this:

Supersede vanilla JS or jQuery plugins with framework specific alternatives
Hand-translate modest bits of custom JS to your framework'southward preferred methods
Remove any JS or plugins you don't intend on using anyway to minimize the workload

Do you lot provide integration back up?

Bootstrap Themes doesn't officially back up integrating themes into 3rd political party frameworks. There are quite a few reasons for this, only the main one is that expecting every Bootstrap Theme creator to be an experienced professional in upwards of a ten+ pop frameworks across a host of different languages isn't reasonable. Theme creators should be focused on designing and building flexible and beautiful component-centric themes.

That said, nearly theme creators take been asked "how to integrate their theme into framework Ten" 100's of times, then it doesn't injure to ask since they may accept helpful advice in addition to this guide and their documentation.

What about Bootstrap Themes with the [React] tag?

While the vast majority of Bootstrap Themes are primarily unproblematic HTML/CSS/JS, some themes take been adapted into full-fledged React themes. They are congenital from custom React components. Most React themes make apply of the unaffiliated React Bootstrap library for Bootstrap'south cadre components.

More and more themes are being translated to truthful React themes over fourth dimension, and then if you lot find a theme you love that doesn't accept a React version notwithstanding, it could be worth contracting the seller to see if they're planning on releasing one.

Framework integration guides

We're working on drafting detailed integration guides for each framework, just none are prepare quite all the same. If you're experienced with the framework you plan on using, we believe the wide direction provided in this guide tin go y'all most of the fashion. Guides for the following frameworks are in the works:

Rails
React
Laravel
Athwart
Django
Vue

Note: Wondering why WordPress isn't on this listing? Integrating a Bootstrap Theme into WordPress theme is a massive undertaking, no unlike than building any new WordPress theme. If you're a WordPress theme programmer, then you'll be just fine since a Bootstrap Theme is a collection files you're already familiar with. If not, nosotros'd advise you lot to enquiry the complexities of edifice a WordPress theme earlier attempting to arrange a Bootstrap Theme into one.