Bootstrap is an open-source CSS framework created to help style web pages with mobile-first considerations in mind. It was created internally at Twitter in 2011 as a way to solve issues with design consistency across their engineering team. Since its creation, Bootstrap has become one of the most commonly used tools on web pages today.
There are several ways to install Bootstrap and its source files.
## npmnpm install bootstrap## yarnyarn add bootstrap
gem 'bootstrap', '~> 5.0.2'
Another way to install Bootstrap for Ruby, but without a tool like Bundler, is with the following command:
gem install bootstrap -v 5.0.2
Instead of being downloaded, Bootstrap’s source files can be linked directly into an HTML file via CDN:
<linkhref="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"rel="stylesheet"integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"crossorigin="anonymous"/><scriptsrc="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"crossorigin="anonymous"></script>
As its popularity grew, people started creating templates based on Bootstrap in order to accelerate the web development process even further. There are many websites out there dedicated to sharing and buying custom templates based on Bootstrap.
Here are the official themes built or reviewed by Bootstrap’s creators: https://themes.getbootstrap.com
Example: Normal Button vs Bootstrap Button
In the example below, Bootstrap is linked into an HTML document via CDN and used with jQuery to provide a button for positive actions.
<!DOCTYPE html><html><head><meta name="viewport" content="width=device-width, initial-scale=1" /><linkrel="stylesheet"href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"/><script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script><script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script></head><body><div class="container"><h2>Button</h2><p>The .btn-success class indicates a successful or positive action:</p><button type="button" class="btn btn-success">Bootstrap Styled Button</button><button type="button">Normal Button</button></div></body></html>