How to Use Bootstrap in Weebly?
- 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.
How to Use it on Weebly?
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:
border: 1px solid transparent;
<div class="alert alert-success">This is a success box to display any success message to your users!!!
<div class="alert alert-info">This is a information box to display any information message to your users!!!
<div class="alert alert-warning">This is a warning box to display any warning message to your users!!!
<div class="alert alert-danger">This is a danger box to display any error message to your users!!!
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 which can be independently used on 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 on Weebly site and 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.
Below is an example how a Bootstrap button element can be used with font awesome icon:
The possibilities are limitless and 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 and jump on to the work to make your Weebly site stands out of the crowd using Bootstrap elements.