- 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?
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:
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;
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 class="alert alert-info">
This is an 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!!!
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.
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.