Getting Started

Basics
Selecting and Moving Components
Customizing your Design
The Bootstrap Grid
Preview and Export
Activating and Managing Devices
Reinstalling the App
CSS
Writing CSS
Writing SASS
Working with Locked Blocks
Duplicating and Moving Blocks
Writing Media Queries
Importing CSS
Linking External CSS
CSS Include Order
JavaScript
Writing JS
Importing JS files
Linking External JS
JS Include Order
HTML
Writing HTML
Converting Components to HTML
Adding Attributes to Elements
Importing HTML Pages
Sites
Publishing Your Site
Custom Domains
Password Protection
Custom 404 Pages
Advanced
Linked Components
Custom Components
Sharing and Installing Components
Animations
Meta Tags and Head Content
Minifying JS & CSS
Using a CDN
Export Scripts
Examples & Guides
Add Input Masks to Forms
Using Google Maps
Form Validation
Using Icon Fonts
Here you will find a number of guides and lessons
about Bootstrap Studio, our powerful desktop application for
creating beautiful, responsive websites and apps.
Navigate and search through our tutorial collection from the sidebar on the
right. For those of you who prefer watching to reading, we also have a few
comprehensive video tutorials.
 Selecting and Moving Components

Bootstrap Studio is a visual website editor. You do most things

by selecting components, editing their options and dragging
them to other parts of the page.
In the app, you select components by clicking them. Selecting a component
shows a blue outline around it, and a bar with quick actions:

This is what a selected paragraph

looks like.
With these actions you can quickly move the item, edit its text and duplicate
it. Keep in mind that not all actions are available on every component. For
example text editing isn't shown on images.
Tip: You can select multiple components at once by holding Shift or Cmd/Ctrl
while clicking.

The Options Panel

When a component is selected, the Options panel on the right is updated. This
is the place where you can modify the styling of the component, control
various properties and even create animations.
 The Options panel displaying settings for
the paragraph.
There are three tabs in the Options panel - Look and
Feel, Options and Animations. The settings that are available in these three
tabs give you a great deal of control over the design and behavior of
components. But if you need even more control, then writing CSS is for you
(see the Writing CSS tutorial for more).
One thing to keep in mind, is that some of Bootstrap's components are
actually made out of others, like this dropdown:
Dropdown

If you attempt to select it, you will actually select the Button inside it. If you
wish to see the options of the Dropdown, you need to go one component up.
This is easy to do by clicking the "Up" button ( ) on the selected
component, or the entry in the breadcrumbs bar, displayed at at the top of
the Options panel:
When an element is selected, you can grab it by the move handle ( ) to
drag and drop it into other components.
Tip: You can drag from the Stage and drop components on
the Overview panel for greater precision.

Locked Components

Some elements like the HTML and Body are locked and can't be moved (you
can recognize them by the small padlock in the Overview panel). This is done
so that you don't break the page by mistake. This shouldn't limit you in any
way - when a component is locked, this means that you can find many options
for controlling it in the Options panel.

Bootstrap Studio knows where components can be dropped and automatically

adds CSS classes and other attributes that the Bootstrap Framework expects.
You don't even have to think about it.
Many people find the default bootstrap look a bit dull and
dated. For that reason, Bootstrap Studio offers variety of
customization options.
There are three main ways to customize your design. By changing the theme
to one of the built-ins, importing an entirely custom theme, and by
customizing the CSS of your page on an ad-hoc basis.

Bootstrap Themes

Open the Design Settings dialog by clicking the 'Settings' button, located in
the main menu. Then choose the theme you like from the dropdown menu
and click 'SAVE'. This will automatically change your project's theme.

Custom Themes

In case you want to use your own theme, you can import custom Bootstrap
themes. Open the Design Settings dialog and click on the 'MANAGE THEMES'
button. There, you can import your theme CSS file, and it will be available to
use in all your designs.
Note: Only CSS files are supported as custom themes. Each theme file must
contain the full Bootstrap framework. You can see some examples
at bootswatch.

Look and Feel

Another easy way to customize the design of your sites, is to use the Look and
Feel tab in the Options panel (located on the right side of the app). From
there, you can modify various CSS properties for the selected component.

By default, all styles are applied to the style attribute of the element. This is a
quick and dirty way to apply css styling, but it is generally considered a bad
practice. We recommend that you create a class name or id, and select it in
the dropdown.
 Working with the Grid

The grid is the most important Bootstrap feature and the most misunderstood
part of the framework by beginners. It is crucial for building responsive web
pages and defining how they scale depending on the screen size of the device.
Bootstrap Studio embraces the responsive grid and makes you more productive
with a number of time-savers.

Quick Stage Resize

You can press the buttons on the main toolbar to quickly resize the stage so that
it matches the sizes of the grid. This way you can test and iterate on your
designs faster.

Row and Column Visualization

Bootstrap Studio shows you the outlines of rows and columns, which helps you
when you are editing your layout.
You can toggle this visualization on or off from the toolbar:

Column Toolbar

When you select a column in Bootstrap Studio, the Column Toolbar pops up.
This is a powerful tool which controls the width and offset of columns for the
currently active screen size.

Powerful Options
When a column is selected, the Options panel reveals a large number of options
that control the width, offset , alignment and order of columns.

Click on the labels to expand the group and reveal all screen sizes. If no value
is set for a specific size, the one above it will affect it:

This column will take half the width

(6 out of 12) only on MD devices and larger.
 Responsive Display

Bootstrap gives us a number of classes for showing or hiding elements

depending on screen size. You can see them under the Responsive
Display group in the Options panel.

Breaking Columns to New Rows (Clearfix)

For some layouts, you need to clear columns to a separate row. This is why
Bootstrap Studio gives you the Column Helper component. You only need to
drag and drop it between two columns and to give it the correct Responsive
Display class to limit when it is active.
Previewing and Exporting your Designs

Bootstrap Studio has two powerful features - Preview and Export, with which
you can test your design in real time across multiple browsers, and export your
work as a beautiful stand-alone website.

Preview

Bootstrap Studio has a powerful feature called Preview. With it, you can open
your design in multiple web browsers and devices, and every change you make
within the app will be shown instantaneously everywhere. Here is how to start
it:

1. Hit the Preview button from the Main toolbar.

2. In the dialog that is shown, hit Enable Preview and copy one of the
URLs.
3. Open this URL on the devices/browsers that you wish to test. This URL
is only available in your local network and can't be seen from outside.
Now you can experiment with a design and test it at the same time. No need to
switch to a web browser and hit the refresh button, which is a great productivity
increase. In a team setting, Preview is a great tool for collecting feedback from
colleagues.

Exporting

Once you are happy with a design, you can export it into regular HTML+CSS.
Just hit the Exportbutton and choose a folder on your computer. Bootstrap
Studio will generate a number of files which are a perfect representation of
your design.
You can also choose to minify your JS and CSS, or to use CDN versions of
jQuery, Bootstrap and the icon fonts for extra performance. For the technically
minded folks, there is also the option for configuring an Export Script.
After you hit the Export button, Bootstrap Studio exports your design as clean
and well-structured HTML. It looks as if a professional front end developer had
written it by hand!
 Activating and Managing Devices

When you purchase Bootstrap Studio, you will receive an email with your
license key. This key can be used on up to three computers. When you remove
a computer, you make a slot for another one. You can activate and deactivate as
many computers as you want.

Activation
The first time you start up Bootstrap Studio after installing it, you need to
activate it by entering your license key, and give your computer a distinctive
name (it will be shown in the Manage Devices dialog later).
Important: You need to have an active internet connection so that your key
can be validated. Internet connectivity is not required after this step.

Deactivation

You can deactivate copies of Bootstrap Studio at any time. You can do this
from the Help > Delete License Key. This will deactivate your current
computer, and free up a slot for a new one.
Note: If you are using a Mac, 'Delete License Key' is located in the Bootstrap
Studio menu option.

Managing Devices

If your computer breaks, is formatted or lost, you naturally won't have access to
the "Delete License Key" option. In this case, you can use the Manage
Devices dialog from another copy of the app, activated with your key. You can
find this dialog in the Help menu (the Bootstrap Studiomenu on macOS).
It shows all the computers that are currently activated, and you can remove
devices which you don't use or you don't have access to.
 Reinstalling Bootstrap Studio

If you run into problems, or if you wish to reinstall and fully reset Bootstrap
Studio, there are a few steps that you need to take:

1. Close Bootstrap Studio.

2. Find the configuration directory:
o For Windows: C:/Users/<yourname>/Application
Data/Roaming/bstudio
o For macOS: ~/Library/Application Support/bstudio
o For Linux: ~/.config/bstudio
3. Rename it from bstudio to bstudio_backup
4. Start Bootstrap Studio again and enter your license key. Go here if you
can't remember it.
5. (Optional) If you wish to preserve your custom components, stop
Bootstrap Studio, and copy bstudio_backup/userPackages to
the bstudio folder. This will transfer your components to the new
instance.
At this point, you will have a brand new copy of Bootstrap Studio. In most
cases this is enough to reset the app to a fresh state. But things like Windows
updates can sometimes lead to breakage of the program files themselves, so if
things still don't work correctly after the above steps, you will need to also
uninstall the app from Add/Remove programs, and install it again.
 Writing CSS in Bootstrap Studio

There are two ways to edit CSS in Bootstrap Studio. The first is to use
the Styles tab and edit the styles of the selected component. The other is to
create separate CSS files in the Design paneland edit them.

The Styles Tab

The bottom part of the window holds two areas

- HTML and Styles. HTML gives you a real-time preview of the generated
HTML for the page with the ability to select elements, define attributes, IDs
and css classes.
The Styles area shows you the applied CSS styles for the HTML elements that
you select. This is a quick way to check what styles are active at any given
moment, and to easily override default Bootstrap styling.
The Styles tab pulls CSS definitions from Bootstrap's CSS file, as well as all
other CSS files that you create. Note that Bootstrap's styles are locked - you
can't edit them directly. To change them, you need to Copy them to your own
stylesheets.

Creating CSS Files

To do any real CSS editing, you need to create a stylesheet in the Design panel.
By default, every new design comes with a styles.css file, but you can create as
many files as you wish. Just right click the "Styles" label and choose the create
option.

Editing CSS

Now that you have a stylesheet file, we can start editing CSS! Double click the
file and our CSS editor will pop up.
Click on a selector, css property or a value to edit them. Hit Enter or Tab to
move to the next rule, and Shift+Tab to the previous. You can click in between
rules to create new ones and in between css blocks to create new blocks with
css code (this is not available in the Styles tab).
Images and fonts that you've added to the Assets panel will be automatically
picked up and shown as suggestions when appropriate.
There is a full undo/redo history, so feel free to experiment!

When you click the three dots on the top right of each CSS block, you will see
the menu that is shown above. You can duplicate, toggle media
queries and delete entire blocks of CSS from the menu.
Tip: There is a quick way to delete CSS styles. When you focus a css selector,
hit the Delete/Backspace key to empty it, and Enter to confirm changes. This
will delete the entire block and move on to the next.

Adding classes, ids and Attributes

Adding your own classes and ids is very important when writing and reusing
CSS styles. To do it, click the Attributes panel on the bottom of the HTML
tab.
In this panel you can change id and class names, or add additional attributes to
elements by clicking the + button at the bottom right.
Note: You can add any CSS class that you wish, but some, like /strong> in this
picture, are locked. To change locked classes in Bootstrap Studio, you need to
modify the component's settings in the Options panel.
Congrats! You can now create any kind of design imaginable with Bootstrap
Studio. Our application makes writing CSS both easy and fun and you will
soon dread having to go back to a text editor again.
 Writing SASS in Bootstrap Studio

SASS is a popular CSS extension language. It gives you

variables, nesting, mixins, partials and more, which help you
reuse code and be more productive.
Bootstrap Studio has full support for creating and editing SCSS files. SCSS
code is edited inside our code editor, giving you Sublime Text-like keyboard
shortcuts and full control over code organization.

Note: Bootstrap Studio supports only the SCSS syntax (the one shown above),
not the SASS one. The difference between the two is minimal. You can learn
more here.

Setting up SASS editing

To keep file size low, we don't bundle a SASS compiler with Bootstrap Studio.
Instead, we provide an easy to install utility that works together with the app to
compile your SASS code. It is called bstudio-sass and supports Windows,
macOS and Linux.

To install SASS support:

1. Install a recent version of Node.js for your os. Version 8.0 or later is
recommended.
2. Open a terminal/console window, and run this command: npm install
bstudio-sass -g. In some cases, the command might fail if you are
installing the sass module as root. To fix this, add the --unsafe-perm flag
at the end.
3. After the above is done, run this command: bstudio-sass. You should see
a message that everything is installed correctly, and a path that you
should use.
4. Open the File > Design Settings dialog, switch to the SASS tab and
paste the path to bstudio-sass that you got in the above step.
From that moment on, when you write SASS code, it will be compiled and you
will see the result in the app when previewing and exporting, just like you do
with regular CSS.

Creating and Editing SCSS Files

SCSS files are created by right clicking the "Styles" group in the Design panel
and choosing the "Create SCSS File" option.
To edit a .scss file, double click it. This will open it in our code editor. When
you save your code, SASS will be automatically compiled using the bstudio-
sass helper utility.

All SASS features are supported, including variables, mixins and partials. Refer
to the official SASS documentation for examples and lessons.

How SCSS Files are Compiled

If you've written SASS before, you already know how things work. Bootstrap
Studio compiles every SCSS file that isn't a partial into a xxx.compiled.css file
that is included in the <head> of your pages.
SASS partials (.scss files that start with an underscore e.g. _xxx.scss) are
supposed to hold reusable mixins, variables and other code, so no
xxx.compiled.css files are created for them. Instead, you are expected
to @import these into other SASS files.
You can control the order in which SASS files are included in the page, using
the Include Orderdialog. And of course, you can choose to minify everything
when exporting using the Minify option. This will bundle all your CSS and
compiled SASS into a single file.
 Working with Locked Blocks

In Bootstrap Studio, some of the CSS blocks may be locked. The reason for
that is they are styles of the Bootstrap Framework and changing them is not
allowed. If you want to modify it, you need to copy the block to your stylesheet
and override the styles.
Click the Three Dots then select the copy to option and then select the style
sheet where you want to copy the block.
For more information about copying blocks visit our Duplicating and Moving
Blocks tutorial. If you still need to change the Bootstrap CSS file, we
recommend that you import a Custom Them
 Duplicating and Moving Blocks

Bootstrap Studio has a powerful CSS editing interface, which auto-completes

your rules and properties. It also allows you to move and duplicate css blocks.

Duplicating Blocks

If you want to duplicate your CSS block, you need to click the three dots on
the top right of the block and select the 'Duplicate' option. This will make the
exact same copy of the block in the same file.

Copying Blocks

You can copy CSS blocks from one file to another. You need to click the 'Copy
To' option from the three dots on the top right corner. This will show you a list
of the existing css files or you can create an empty new one, where you can
move your block to. This will make the exact same copy of the block in the
selected file.
In order to edit any of the locked files, first you need to copy them to a new
file and then you can make any changes you like.
In case you want to move a block from one file to another, click on the Move
to option. This is the same as the Copy to option, but the block is removed
from the original file.

Rearranging Blocks
Rearranging Blocks functionality makes changing the order of the blocks in the
css files very easy.It's useful for organizing your code.
 Writing Media Queries

Media Queries are an important tool for creating responsive layouts. In

Bootstrap Studio it is straightforward to add them to your css. Just choose
the Add Media Query option from the CSS block's menu.
You can customize the media rule by clicking and editing it. By default it is
prefilled with the size of the canvas as max-width. And if you wish to remove
the query entirely, select the Remove Media Query option.
 Importing CSS Files

If you have a stylesheet that you wish to quickly import in the program, without
having to write the CSS by hand, you can do it in one of two ways. The first is
to right click on the Styles group in the Design panel and select Import CSS
File. The second - just drag and drop your CSS file in the app.

Import Errors

Bootstrap Studio requires the CSS files you import to be valid. If one of the
CSS files you are importing contains invalid or incomplete code, you will see
an error message like the following:

To work around this, you will need to fix your stylesheet. Try running it
through this css validator. It will point you to places in your file that you need
to fix in a text editor. After these checks pass, you will be able to import your
stylesheets in the app without issues.
 Linking External CSS

Bootstrap Studio allows you to link external CSS files without importing them.
This can be useful if you want to include things like css libraries, themes and
fonts. They are not stored as files in your project, instead they're included
in <link> tags in the page's <head>.
You can do this by right clicking on the Styles group in the Design panel and
selecting "Link External CSS".

Then you need to enter the url of the file you want to link in your project and
click the "Import" button.
Keep in mind that Bootstrap Studio caches external stylesheets for some time.
If you want to get the latest version of the linked file, you need to right click it,
and choose the "Refresh" option.
 Changing the CSS Include Order

When using multiple CSS files, you often need control over the order in which
your stylesheets are included in the page, so that styles are not overriden. In
Bootstrap Studio, this is straightforward to do. You just need to right click on
the Styles group in the Design panel and select 'Include Order'.

You can drag and drop the files in the order you like and then click the 'SAVE'
button. These changes will be applied to all pages in your design.
Note that although it isn't shown here, the bootstrap.css file is always included
first in the page, before your stylesheets.
 Writing JavaScript in Bootstrap Studio

Bootstrap is a powerful frontend framework. With it, you can quickly design a
good looking web application. But as a next step, you will often need to make
it interactive. You can do this by writing JavaScript in our powerful JS editor,
that is built into Bootstrap Studio.

JavaScript Editing

With our JavaScript editor you can turn your pretty design into a fully
functional website. You get access to powerful Sublime Text-like editing with
multiple cursors and keyboard shortcuts.
To start, you need to create a JavaScript file in the Design panel. You can do
this by right clicking on the "JavaScript" group.

Note: If you are using OS X and right clicking the "JavaScript" label doesn't do
anything, try the Ctrl+Click method, or check whether right clicking is enabled
in your computer's settings.
In the picture above, you can see that there are two locked JavaScript files.
They are always available, so you can use jQuery and Bootstrap's JS in any
design.
To edit your JavaScript file, just double click it. This will open our powerful
code editor.

When you click the "Apply" button (or hit Ctrl/Cmd + S) the Preview is
automatically reloaded so you can try out your changes immediately (see our
tutorial about Preview and Export for more).
 Importing JavaScript files in Bootstrap
Studio

If you have a JavaScript file or library that you wish to quickly import in the
program, you can do it in one of two ways. The first is to right click on
the JavaScript group in the Design panel and select Import JS File. The
second - just drag and drop your JS file in the app.

You can also create an empty js file, where you can paste your js code.
Note: When importing js files, you make a copy of them in your project. Any
changes made in the original file will not be displayed in your project. If this is
not what you want, you can link JS files instead.
Keep in mind that jQuery and the Bootstrap JS files are imported in Bootstrap
Studio by default, there is no need to included them again.
 Linking external JS files

Bootstrap Studio allows you to link external JS files without importing them.
This can be useful if you want to include things like JS libraries. They are not
stored as files in your project, instead they're included in <script> tags before
the page's closing <body> tag.

Then you need to enter the url of the file you want to link in your project and
click the "Import" button.

Keep in mind that Bootstrap Studio caches external JS files for some time. If
you want to get the latest version of the linked file, you need to right click it,
and choose the "Refresh" option.
The Link External feature is a great way to include libraries hosted on a CDN
like cdnjs.
 Changing the JS Include Order

When your JavaScript code spans multiple files, you need control over the
order in which they are included in the page. This is easy to do in Bootstrap
Studio. You just need to right click on the JavaScript group in the Design
panel and select Include Order.

You can drag and drop the files in the order you like and then click the 'SAVE'
button. These changes will apply to all pages in your design.
 Writing HTML in Bootstrap Studio

Bootstrap Studio shines as a drag and drop editor. But sometimes you need
extra control over your layout and markup. In those cases, you can use
Bootstrap Studio's powerful HTML editing functionality.
There are two ways to edit HTML in Bootstrap Studio. The first is by adding
the Custom Codecomponent to your page. The second is by converting a part
of your page to HTML.

Writing HTML with "Custom Code"

"Custom Code" is a powerful component which gives you full control over its
content. You can use it to quickly add HTML snippets to your pages.
To add the component to your design, find it in the Components panel and drag
and drop it into your page.

When you double click a custom code component (or when you right click it
and choose Edit Code), it will open up a code editor in the bottom of the
application window.
Here you have full control over the code. This editor supports most of
the keyboard shortcuts you know and love from Sublime Text and other
popular editors. When you hit Apply the changes you've made will be added to
the page.
Note: HTML is sanitized and JS is disabled when Custom Code is displayed in
Bootstrap Studio for security purposes. In Preview and when exporting,
Custom Code is included in the page unmodified, exactly the way you've
written it.
You can also check out our lesson about quickly converting Bootstrap Studio
components to HTML.
 Converting Components to HTML

There are two ways to edit HTML in Bootstrap Studio. The first is by adding
the Custom Code component to your page, which we covered in the previous
article. The second way to author HTML in Bootstrap Studio is to convert
portions of your pages to HTML as you need it.

Converting to HTML

In Bootstrap Studio you can convert portions of your pages to HTML as you
need it. This is a great way to quickly start a project - drag and drop
components to build your layout, and then convert it to HTML if you need
greater control.
To convert a component to HTML, right click it and choose the Convert to
HTML option from the menu.

This will take the HTML of the selected component and place it inside a new
Custom Code component. The original will be deleted. You can double click
and edit the Custom Code component like we discussed in the previous article.
 Adding Attributes to Elements

Adding your own classes and ids is very important when writing and reusing
CSS styles. The benefit of this is that you can have the same HTML element,
but present it differently depending on its class or ID. Bootstrap Studio offers a
nice and easy way to add attributes to HTML elements.
To do it, click the Attributes panel on the bottom of the HTML tab.

Note: You can add any CSS class that you wish, but some, like in the picture
above, are locked. To change locked classes in Bootstrap Studio, you need to
modify the component's settings in the Options panel.
You can add id and class of the selected element. If you want to add your own

attributes click on the plus button ( ).

Note: We have disabled the 'on' event attributes for security reasons. You can
attach event listeners by writing JS code with jQuery instead.
 Importing HTML Pages

In addition to the two ways that HTML can be edited in Bootstrap Studio (by
adding a custom code component, and converting parts to HTML), the app
allows you to import entire HTML pages.
To do this, from the Design Panel, right click on Pages and select 'Import
HTML File'. Then navigate to the file you want to import.

The imported file will be added as a regular page in the Pages group. The only
limitation is that the contents of your HTML file will be placed inside a Custom
Code block, in which Drag & Drop functionality is not available, but you can
edit it in our HTML editor by double clicking it.
 Publishing Your Website Online with
Bootstrap Studio Sites

Bootstrap Studio Sites is our powerful hosting platform for

publishing sites online. It is super fast, gives you
HTTPS, password protection, the ability to host custom domains,
and best of all, it's free for all users of the app!
Publishing your design is very easy - just create and configure a new site, and
hit the Publish button in the app. In this article we will guide you through the
process.
Note: Bootstrap Studio Sites is not the only way to upload your sites online.
You can simply export your design as a static website and upload it to a
standard web hosting account via FTP. However our platform is much more
convenient and we invite you to give it a try.
 Creating a Website

The first step is to create a free website on our platform. You do this from
the Cloud > Manage Websites menu in Bootstrap Studio. This will open
the Manage Websites dialog.

We don't have any websites configured, so we press the Add Website button.
This opens up the Create Website dialog.
You have two types of domain names to choose from:

• A xxx.bss.design subdomain. This is straightforward and is the option

we are going with for this tutorial.
• A custom domain name. This way you can point your
own example.com domain name to our hosting service. This is a bit
more involved, and we've covered it in our custom domain tutorial.
As you can see in the image above, you have a few other options to choose
from:

• Subdomain. The xxx.bss.design subdomain you wish your site to

show under.
 • Auto deletion. This is an optional setting that you can enable. With it
you can set a site to be deleted automatically, if for example you wish
to create a temporary site to show off your design to a client, but you
don't want it to stick around for long. You can set this to never.
• Passkey protection. If you wish to limit your website so that it can only
be viewed after a passkey is entered. Learn more about this option in
our password protection tutorial. You can change the key or
enable/disable the option later, by editing your site.
To create your site, just hit the Create button and it will show up in your list of
sites. You can edit and delete the site from a menu that is triggered by clicking
the 3 dots on the right. Deleting the site will free up a slot for a new one.

You can go ahead and close this dialog. Now, let's publish our design!

Publishing a Website
If you've followed the above steps, you now have a fully working website that
you can publish to. Publishing itself is straightforward. Just open the design
you wish to publish online, and hit the Publish button on the top-right.

Note: Additionally, the shortcut Ctrl+P (Cmd+P on macOS) is avaialble to

speed up your workflow. See all keyboard shortcust that the app supports.
If this is the first time you publish your design, the app will prompt you to
choose a website you wish to publish to.
Just select the site you wish to publish to and hit the Publish button. The app
uses an efficient data transfer protocol and uploads only the changes you've
made since your last publish. This makes the process lightning fast.
And just like that, your site is online and hosted on our powerful hosting
plaftorm. There is no need to manually upload files via FTP ever again. And
the best part? Bootstrap Studio Sites comes for free with your Bootstrap Studio
purchase!
Hosting Custom Domains on Bootstrap
Studio Sites

Bootstrap Studio Sites is our powerful hosting platform for

publishing sites online. It is super fast, gives you
HTTPS, password protection, the ability to host custom domains,
and best of all, it's free for all users of the app!
Publishing your design to one of our free xxx.bss.design subdomains is
straightforward. To host a custom domain like example.com on our platform
takes a few more steps, which we'll cover in this guide.

1. Getting a Custom Domain

First and foremost, you need to have a domain name that you wish to host on
our platform. You can host the bare domain (example.com) or a subdomain
(www.example.com, site.example.com etc). If you don't have one already, you can
register your domain with a number of reputable domain registrars like
Namecheap.

2. Setting up CloudFlare

Set up CloudFlare for your domain. They offer a generous free tier and
have guides for every domain name registrar. It may take a few hours for the
DNS changes to propagate, but your site will remain online the entire time.
Note: CloudFlare isn't strictly required (you can point your domain to our
service without them) but they are the only provider that can issue an HTTPS
certificate for your domain, and they support CNAME flattening, which allows
you to point your bare domain to us.

3. Creating a Site with a Custom Domain

As you saw in our previous tutorial, creating a new site is done from the Cloud
> Manage Websites menu in Bootstrap Studio, and then pressing the Add
Website button.
This opens the Create Website dialog, where you need to choose Custom
Domain in the dropdown, enter your domain, and click Check. You can see the
result below.
If your migration to CloudFlare is complete, you can continue with the next
step.
 4. Creating a DNS Record

This is the most crucial step in the entire process. In the CloudFlare dashboard,
select your domain name and in the DNS tab, fill in the settings you were given
in step 3. Make sure that the cloud icon is orange, so that CloudFlare can serve
your website with HTTPS.

Then, just click the Add Record button. If you already have an A/CNAME
record for this exact host name (example.com here), you may see an error
message. Removing the record with the same host name will allow you to
create the CNAME without issues. Be careful what you delete. Write in our
forums if you have questions regarding this.

5. Verify your Domain

Wait for a couple of minutes after you've done the above DNS change, so that
it can come into effect. Then click the Verify Domain button in the Create
Website dialog (step 3). Your domain will be validated, and your site will be
added to our platform.

6. You're done!

From that moment on, you will be able to publish with a single click from
Bootstrap Studio and host your site on our powerful hosting platform.
 Password Protecting Your Bootstrap
Studio Website

Bootstrap Studio Sites is our powerful hosting platform for

publishing sites online. It is super fast, gives you HTTPS,
password protection, the ability to host custom domains, and best
of all, it's free for all users of the app!

Creating a Password-protected Website

As you saw in our previous tutorial, creating a new site is done from the Cloud
> Manage Websites menu in Bootstrap Studio, and then pressing the Add
Website button.
This opens the Create Website dialog, where you need to choose the Require
Passkey option. This will reveal a password field where you can enter the
passkey.

Just click Create and your new password-protected site will be added to your
account. You can remove the password protection later by Editing the website
(example below).

Password Protecting an Existing Site

If you already have a website that you wish to add password protection to, you
can do it by Editing the website. This is dome from the Cloud > Manage
Websites menu in the app, and then clicking Edit in the website's menu.

You can change the pass key or enabe/disable it at any time. This makes it very
easy to restrict access to a website, so that only the people you share the pass
key can view it.
 Custom 404 Pages for Your Bootstrap
Studio Website

Bootstrap Studio Sites is our powerful hosting platform for

publishing sites online. It is super fast, gives you
HTTPS, password protection, the ability to host custom domains,
and best of all, it's free for all users of the app!
Something that is frequently overlooked when designing a website is the page
people see when they run into an error. The most common type of error on the
web is 404 (File Not Found). This occurs when users follow a broken or a non-
existing URL to your website. In such a case, you want to give them a friendly
page that will help them find their way.
 Custom 404 Page in your Design

Bootstrap Studio Sites makes it very easy to define custom 404 pages for your
designs. Just create a file in the top folder of your design named 404.html, and
whenever a non-existing URL is requested, the page you provided will be
returned in its place.

Note: This is only supported on our Bootstrap Studio Sites hosting platform. If
you use another hosting provider, things are likely done in a different way.
 Linked Components

One very powerful feature in Booststrap Studio is the ability for syncronize
components so they are updated together. We call it Linked Components. It can
be used when you want to create the same elements in multiple pages e.g
headers and footers.
To create linked components:

1. Select an item.
2. Right click and copy it.
3. Then select a parent component and choose Paste Linked.
This will create a linked copy, which is syncronized to the original.

This way, when you change an element, all the linked components will change
at once. You can also Paste Linked elements to other pages from the same
design.
If you want to copy a component to multiple pages, you can right click on it
and select Copy To >Multiple.
Check the pages, where you want to copy your component to, and select
the Link Copies option. This will create linked copies of the component to the
pages you have chosen.
 Custom Components in Bootstrap
Studio

Bootstrap Studio gives you the ability to save and reuse pieces of HTML and
CSS in the form of Custom Components.
You can use this feature to extract parts of your designs which you use often -
like headers, footers, logos, and add them to the User group of
the Components panel, so that they can be included in a page by dragging and
dropping.
Keep reading to learn how this works!

Creating a Custom Component

Creating such a component is straightforward:

1. Right click it a component and choose the Add to Library option.

2. In the dialog window that is shown, enter a name and choose the styles,
images and fonts (if any) you would like to include together with the
component.
3. The component is now saved locally in the Component panel's User
group and can be dragged and dropped into any design.
Later, when you drag and drop this component into a design, the styles and
assets you've chosen will be added automatically.
By right clicking your custom component and choosing "Share online..", you
can publish it to our online library. This way you can help out other Bootstrap
Studio users who can install it with a single click. Shared components are also
synced across your Bootstrap Studio installs, so when you share a component
on one computer, it will be copied to the rest of your computers automatically.

Exporting and Importing

Components can be exported as files with the .bscomp extension, by right

clicking them and selecting 'Export'. You can send them to colleagues, share
them through dropbox and upload them to your portfolio. This is a great tool
for you or your team to extract common "design snippets" that you can use in
different projects.
 Sharing and Installing Components

In the previous article, we showed you how to save pieces of your designs
as custom components, making them highly reusable. What is even better, is
that these components can be shared to the Bootstrap Studio online library.
This way you can help out other users who can install them with a single click.

Sharing Components

This is done by right clicking your custom component and choosing "Share
online..". Shared components are synced across your Bootstrap Studio installs,
so when you share a component on one computer, it will be copied to the rest
of your computers automatically.

To stop sharing a component, open the Share dialog again, and click
the Unshare button on the bottom right. This will remove it from our online
library immediately. However, people that have installed it will continue
having it in their copies of the app.

Installing Components

After a component has been shared, it will show up in the app's Online tab.
There, you can search for all user contributed components. To install them, just
click the Install button, and drag and drop it in visual editor.
If you decide to remove your component at a later time, find it in
the Download group in the Studio tab, and delete it.
 Animations

When it comes to eye-catching designs, smooth CSS animations are a popular

choice. A testeful scroll or hover animation can make your design more
interactive and fun. Bootstrap Studio offers a wide variety of animations that
can be easily implemented in your project.

Adding Animations

Select any component on your page, and from the Option Panel click on the
animations tab ( ). There are two types of
animations: Scroll and Hover.

Scroll Animations

Scroll animations are triggered when you scroll down/up on your page. You
choose a few configuration options like the animation effect and duration, and
Bootstrap Studio will take care of including all required libraries and CSS to
make it work. Internally, our scroll animations are implemented using the AOS
Library.
From the Animations Tab you can change the following settings:

• Type - Set the animation type (e.g. fade-up, fade-down, zoom-in, zoom-
out and more)
• Duration - Duration of animation (ms)
• Offset - Trigger the animation some distance away from the element (in
px)
• Delay - Delay the animation (ms)
• Play Once - Choose whether the animation should fire once, or every
time you scroll up/down to element
Note: Scroll animations are disabled on mobile devices, as they can degrade
scroll performance and are considered a poor experience there.

Hover Animations

Hover animations are run when you move your mouse over an element. To
make them work, Bootstrap Studio uses the Animate CSS library internally.
A large number of animation effects are available, like bounce, pulse, wobble
etc. If you want to test your animations directly in Bootstrap Studio, just click
the Play button.
When a component has an animation defined, a brightly colored star is shown
next to it in the Overview panel, so you can see which components are
animated at a glance.

Removing Animations

To remove an animation from a component, select it, and in the Animations tab
set the trigger to Never.
This will remove the animation assigned to that element.
 Meta Tags and Head Content

Meta tags are a way to declare pieces of information related to your website.
These tags are placed in the <head> section of HTML pages, and can declare
properties like description, keywords, author of the document, date of last
modification, twitter/fb social sharing options and more.

Adding Meta Tags

Bootstrap Studio gives you a powerful interface for defining meta tags. Click
on the Settingsbutton in the main menu, and choose the 'META TAGS' tab.
Then click the 'ADD META' button.
When you add meta tags from this dialog, they will be included in all pages. If
you want to add a tag only to a single page, you can use the Page
Settings dialog, accessible by right clicking the page in the Design panel.

Adding Custom Head Content

Sometimes you need to place specific code in the <head> of your pages. This
can be useful for including analytics tracking codes, scripts, styles or fonts. In
Bootstrap Studio, you can do this from the Head Content tab in the Design
Settings dialog.
As with meta tags, you can also define head content that is specific to your
pages from the Page Properties dialog.
Here you have the options to replace the design-level head content, add the
page content after or before it. This gives you full control for every single page.
 Minifying JS & CSS

Minification is the process of removing unnecessary or redundant data like

spacing, indentation, newlines, and comments from your JS and CSS files,
without changing their content. Bootstrap Studio can handle all of this for you
with a simple checkbox in the Export tab of the Design Settings dialog.

After you switch the option on, your files will be automatically minified and
their file size will be reduced. This will make your site lighter and quicker to
load.
 Using a CDN

CDN is a system of distributed servers that delivers pages and other Web
content to a user, based on the geographic locations of the user, the origin of
the webpage and the content delivery server.
Bootstrap Studio offers an easy way to switch to CDN versions of the libraries
and fonts that you use. Just switch on the CDN checkbox in the Design
Settings Dialog.

From that moment on, jQuery, Bootstrap and the icon fonts you use will be
hosted on the fast cdnjs network, which will have a positive effect on the
performance of your site.
 Export Scripts

Export scripts are a powerful Bootstrap Studio feature. They are executable
scripts or programs, that the app runs every time you export your design. You
can use them to rename files, move images, run things like eslint or even
upload your site automatically to your server.
To do any of this, though, you need to be comfortable with writing code. This
is why the feature is hidden in the Advanced area in Export Settings:

You point it to an executable file (can be a bash script, an exe program or

anything else that can be run from a terminal). For Mac and Linux, making a
file execute requires setting the +x flag. For Windows, regular batch files or
compiled programs would work.
The export destination path is passed as arg 1, so you can cd $1 to navigate to
the folder in your script.
Here is an example, written in bash, which changes the extension of your index
file to php:

#!/bin/bash

cd $1

mv index.html index.php

For more complex tasks, you can write your scripts in Node, Python, Ruby,
PHP or anything else that you feel comfortable in. Just be sure that the script is
marked as executable, and that the #!row is added, so that the interpreter can be
located by the os.
If your script throws any errors, they will be written to an error.log file in the
destination folder.
How to Add Input Masks to Form Fields
in Bootstrap Studio

Input masks are a way to constrain data that users enter into form
fields and enforce specific formatting. This is suitable for things
like phone and credit card numbers, dates and more.
In this tutorial we will show you how to create input masks in Bootstrap Studio.
We will use the jQuery Mask Plugin, and write a bit of JS to make it work.
You can download the complete example as a bsdesign file. Download Example
First, you need to create a form with some input fields by dragging and
dropping a form, form groups and inputs from the component panel. For this
tutorial we made a simple registration form with 4 input fields and a button.
We've added IDs to the form fields using the attributes panel.
Here is what the relevant code looks like:

<!-- Our form fields -->

<div class="form-group">

<input type="text" class="form-control item" id="email"

placeholder="Email">

</div>

<div class="form-group">

<input type="text" class="form-control item" id="phone-number"

placeholder="Phone Number">

</div>

<div class="form-group">

<input type="text" class="form-control item" id="birth-date"

placeholder="Birth Date">

</div>

<!-- The rest of the form code -->

After this, you need to import the library in your design. Go to the Design
Panel and right-click on the JavaScript group and select Link External JS.
Paste the CDN URL of the library (in this
case https://cdnjs.cloudflare.com/ajax/libs/jquery.mask/1.14.15/jquery.mask.mi
n.js).
Then create a new JavaScript file, and add the following code that will initialize
the input masks:

$(document).ready(function(){

$('#birth-date').mask('00/00/0000');

$('#phone-number').mask('0000-0000');

});

The mask method is defined by the plugin that you included. It supports a great
variety of mask formats. For more information and examples you can check
the documentation.
You can test these input masks when turning on the browser preview or when
exporting your design.
Note: JS files are included in every page of your design. Make sure that you're
using unique IDs for your inputs, so that masks are added only to the intended
elements.
 How to Use Google Maps in Bootstrap
Studio

When building a website, it can be helpful to include a map to

give people a better sense of direction. Thanks to it's popularity
and accuracy, Google Maps is the natural choice for this.
In this tutorial, we will show you how to easily add a map in your Bootstrap
Studio design and customize it. This is very easy to do, thanks to the built-
in Maps component.
You can download the complete example as a bsdesign file. Download Example

First, go to the Component panel and search for the Map component. Then
drag and drop it into your page.
There is one complication though - Google requires that all maps use an API
key. Don't worry though — they have a generous free tier, and generating a key
is straightforward.

Generating a Key

Click the map to select it. In the sidebar, under the Options tab, you will see a
number of settings. Google Maps requires an API key in order to use it, so if
you already have one, go ahead and paste it inside the API Key field and skip
this section.
If you don't have a key, you will need to create one. We've made this as easy as
possible, just click the Create API Key button in the options.

This will take you to the Google API Console. You need to create a new
project, or choose an existing one and click Continue to enable the API and
any related services.
The next step requires you to apply restrictions for the key. Leave this option
as None if you are not sure what the other choices do. Then click Create.

This will create your API key which you need to copy and paste into the API
Key field in Bootstrap Studio.
Now your Google Map is ready to use. You don't need to create a new key
every time you add a map, you can reuse it for all maps in your project.

Customizing Your Map

Bootstrap Studio offers a number of quick settings to customize your Google

Maps component. When you have the component selected, you will see a
number of settings in the Options Panel.
You can change the following:

• Mode - Sets the mode of the map (Place, Directions, Search, View,
Streetview).
• Location - Depends on the map mode. It is either the address or
coordinates of the point you want to center the map on.
• Zoom - The initial scale at which the map is displayed. The lower the
number, the more "zoomed in" the map is.
• Type - Roadmap( displays the default road map view) and Satellite(
displays Google Earth satellite images).
• Dimensions - Sets the width and height of the map.
You now have a working Google Map in your site! To save yourself time in the
future, you can even add this map to the library as a custom component, so that
you don't have to go through the set up again.
 Form Validation in Bootstrap Studio

Form validation is a way to guarantee that user submitted data

meets specific criteria. It is similar to input masks, with the
distinction that form validation is done when forms are
submitted.
In the past, adding validation to forms required using plugins. But today
modern browsers have native support for it, and it is straightforward to use in
Bootstrap Studio. In this tutorial we will show you how to do it.
You can download the complete example as a bsdesign file. Download Example

First, let's build the form. It needs to have 3 input fields and a submit button:
 1. Go to the Components panel and search for 'Form', then drag and drop
it into the working area.
2. Search for 'Form Group' in the Components panel and place it in your
form. You need a 'Form Group' element for each component in your
form.
3. Go back to the Components panel and type 'Input'. You will find a wide
variety of input fields that you can choose from. For our example we
have used a text input, a password input and an email input. All of these
are placed in a Form Group.
4. Finally we need a button. Search for 'Button' in the Components panel
and place it in your form. Go to the Options menu and select 'Submit'
from the 'Button Type' option.
Note: The button needs to be set to the submit type, because validation takes
place when forms are submitted. This is only possible when such a button is
present.
Here is what our page structure looks like in the Overview panel:

And this is the HTML that Bootstrap Studio generates for you (only the
contents of the form is shown for brevity):

<div class="form-group">
 <input id="username" class="form-control item" name="username" type="text"
placeholder="Username" >

</div>

<div class="form-group">

<input id="password" class="form-control item" name="password"

type="password" placeholder="Password">

</div>

<div class="form-group">

<input id="email" class="form-control item" name="email" type="email"

placeholder="Email">

</div>

<div class="form-group">

<button class="btn btn-primary btn-block create-account"

type="submit">Create Account</button>

</div>

Validation Types

In order to add a validation rule to any of your input fields, select the
component, go to the Options panel and expand the Validation group.
Here you will find 4 validation controls:

• Required - This option specifies that the input field can not be empty. It
requires the user to enter something before submitting the form.
• Max Length - specifies the maximum number of symbols that the user
can enter in the input field.
• Min Length - specifies the minimum number of symbols that the user
must enter in the input field.
• Validation Pattern - specifies a regular expression that validates the
entered data. We'll use this for the Username field in our form.
You can see these in action in the examples below.

Validation Examples

Email Validation

For the email field all you need to do is to toggle the 'Required' switch. As this
control is an Email Input, browsers will validate the contents of the field as an
email address automatically.
Password Validation

For the password field we want the user to enter a password at least 6 symbols
long. That's why we have placed a minimum length restriction.

Username Validation

For the username field we have a more complex validation rule. We want the
user to enter only numbers, latin letters (both lower and upper case), dots and
underscores. That's why we use a regular expression ^[a-zA-Z0-9_.-]*$,
alongside min and max lengths.
Now you know how easy it is to add validation rules for your input fields in
Bootstrap Studio. You can test them when turning on the browser preview or
when exporting your design.
 Using Icon Fonts in Bootstrap Studio

Icon fonts are like normal web fonts, but instead of letters and
numbers they contain vector shapes. This makes them very easy
to embed and they look great on high resolution screens.
In this tutorial, we will show you how to add and customize icons in Bootstrap
Studio. The app supports a number of popular icon font packs which you can
just drag and drop into your design.
You can download the complete example as a bsdesign file. Download Example

It is very easy to add icons to your design in Bootstrap Studio. First, you need
to go the Components panel and search for the 'Icon' component. Then drag it
over the element where you want to place the icon and drop it.
In order to change the icon, you need to double click it. You will see a window
with all available icon packs. When you decide which one you want to use, just
select it and click 'OK.'
 Customizing Icons

One of the greatest advantages of icon fonts is that you can style them with
CSS. You can change their size, color and alignment the same way you style
regular text.
Icon size

You can set the size of your icons with the font-size property.

.font-icon-example .item i {

font-size:30px;

Color

You can customize your icons' color with the color property.

.font-icon-example .item.home i {

color:#f87912;

.font-icon-example .item.profile i {

color:#ffcc00;

Alignment

You can align your icons left, right and center with the text-align property.

.font-icon-example .item {

text-align:center;
}

Animations and Transitions

You can also make your icons more eye-catching by adding different types of
animations or transitions using the transition property.

.font-icon-example .item {

transition:0.2s;

In this example, we add a transition to the color property of the icon, to make a
smooth color change effect with a 0.2 second duration. Once it's defined, every
color change triggers the animation:

.font-icon-example .item.profile:hover {

color:#ffcc00;

You can see the entire example in action and test the animations by grabbing
the demo from the Download button above. To see the animations, start the
browser Preview in the app.
With this our example is ready! With a few icons and a little bit of work you
can make your website look more polished and professional.