This tutorial explains how to use Bootstrap in Weebly. Bootstrap is a free open source framework to build responsive layouts using HTML, CSS and JavaScript. Learn more about Bootstrap via its documentation.
The complete CSS and JavaScript for Bootstrap framework can be downloaded from getbootstrap.com website.
How to Use Bootstrap in Weebly
It is quite difficult to use the whole Bootstrap resources as it is with Weebly. It may disturb the existing Weebly theme and results in breaking the website. What it is possible 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 website for troubleshooting. 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 website level.
Now, using Bootstrap needs a some CSS knowledge and it is very easy to get particular element’s style and apply it on your website. Let us take an example of notification boxes. Bootstrap does offer lot of styling to create such boxes but you may just need to copy the following 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 website level. Drag and drop the “Embed Code” element and add the following HTML.
<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 a 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 website
This is a success box to display any success message to your users!!!
This is a information box to display any information message to your users!!!
This is a warning box to display any warning message to your users!!!
This is a danger box to display any error message to your users!!!
Leave A Comment