How to Use Bootstrap in Weebly?

Bootstrap is a free open source framework to build responsive layouts using HTML, CSS and JavaScript. It was initially developed for Twitter and later released as an open source project o GitHub. Though it is easy to develop a complete layout with Bootstrap it is not easy to use the framework with Weebly since Weebly has its own set of framework to create page layouts. In this article we will discuss in detail how to use Bootstrap framework in Weebly and also how to use Bootstrap elements in Weebly easily.

Bootstrap Resources

The complete CSS and JavaScript for Bootstrap framework can be downloaded from getbootstrap.com  site. From the downloaded files you can use Bootstrap CSS and JavaScript files on Weebly site:

• Normal version with bootstrap.css / bootstrap.js extensions
• Minified version with bootstrap.min.css / bootstrap.min/js

We recommend to use the normal css / js versions for all testing purposes and the minified versions .min.css / .min.js on live site. You can also simply use CDN links from MaxCDN and the links are available on the same getbootstrap.com site. You can get the complete starter template with CDN links here.

How to Use Bootstrap in Weebly?

Well, it is difficult to use the whole Bootstrap resources as it is on a Weebly site. This will disturb the existing theme and result in breaking the site’s layout. What you can do is to use the CSS and JavaScript links at header and footer section of a particular page so that it is easy for you to check the page instead of the whole site for troubleshooting. We use Bootstrap resources from our own server for playing around with CSS / JavaScript and links for the files are to be used as below:

• https://webnots.com/resources/bootstrap.min.css
• https://webnots.com/resources/bootstrap.min.js

The JavaScript is to be linked in footer code section and the CSS is to be linked header code section of a Weebly page or at site level.

Since Weebly by default uses jQuery script, there is no need of separately linking it. In addition, Bootstrap 5 does not need any jQuery script. If you are using Bootstrap 4 or any older versions and the expected function is not working then add the below jQuery link in footer section:

<script src="https://www.webnots.com/resources/jquery-1.11.3.min.js"></script>

Using Bootstrap Elements

Using Bootstrap needs a basic CSS knowledge and it is very easy to get particular element’s style and apply it on your site. Let us take an example of notification boxes for info, warning, success and danger. Bootstrap offers lot of styling to create such boxes but you may just need to copy the following five classes:

<style>
.alert {
padding: 15px;
margin-bottom: 20px;
border: 1px solid transparent;
border-radius: 5px;
}

.alert-success {
background-color: #dff0d8;
border-color: #d6e9c6;
color: #3c763d;
}
.alert-info {
background-color: #d9edf7;
border-color: #bce8f1;
color: #31708f;
}
.alert-warning {
background-color: #fcf8e3;
border-color: #faebcc;
color: #8a6d3b;
}
.alert-danger {
background-color: #f2dede;
border-color: #ebccd1;
color: #a94442;
}
</style>

Paste the CSS code on the header section of your Weebly page or add it in the main stylesheet to be effective at site level. Drag and drop the “Embed Code” element and add the following HTML to create elegant notification boxes.

<div class="alert alert-success">
This is a success box to display any success message to your users!!!
</div>
<div class="alert alert-info">
This is an information box to display any information message to your users!!!
</div>
<div class="alert alert-warning">
This is a warning box to display any warning message to your users!!!
</div>
<div class="alert alert-danger">
This is a danger box to display any error message to your users!!!
</div>

It will look like below on your Weebly site:

You can add success, danger, info or warning messages anywhere on your Weebly site just by adding the corresponding CSS/HTML codes. This is just one example and Bootstrap has lot of user interface elements. You can add these elements independently in Weebly or any other platform for that matter.

Using Bootstrap with Font Awesome Icons

In our previous article, we had explained how to use font awesome icons in Weebly site. With little more effort you can easily use Bootstrap elements with font awesome icons. Again using the whole framework will create conflicts with your Weebly theme hence you can upload font awesome icons on your own Weebly site and use it with Bootstrap elements. For example, you can use Bootstrap button element with font awesome icon on your Weebly site.

Remember, the latest Bootstrap 5 version comes with free icons set. It containing 1300+ SVG icons which can also be used to add icons to Bootstrap elements.

Conclusion

The possibilities are limitless. You may need to spend time in analyzing the Bootstrap CSS file sometime to get hold of the basics. There are lot of tutorials and examples on the web which you can go through in a couple of days time. After that you can jump on to the work to make your Weebly site stands out of the crowd using Bootstrap elements.