A brief history, description and guide to integrating the Bootstrap design framework into your app.
Bootstrap is an open-source CSS (cascading style sheets), HTML (Hyper Text Markup Language) and JavaScript compatible framework used to design, primarily mobile, front end user interface components for applications. “CSS framework” describes a library of code used for web design, streamlined and standard-compliant for easy use and implementation.
The History of Bootstrap
Bootstrap first entered the world as “Twitter Blueprint,” designed by Mark Otto and Jacob Thornton at (you guessed it) Twitter, in hopes that the framework would help to standardize practices in front end web development among app developers. Before it existed, there were many different libraries with inconsistent standards for use, which in turn led to inconsistencies in app interaction and compatibility.
After many developers at Twitter began collaborating on and contributing to the project, it was released by the two as a free and open source program in 2011. It is still maintained by its two creators, and contributed to by many via GitHub, with Bootstraps 2, 3, and 4 coming out in the next three years respectively, and Bootstrap 5 in 2021.
What It Does For Your App
Bootstrap standardizes a project’s design by using code to adhere the app’s styling elements (font, color, button design, drop down menu elements, etc) to the framework’s own pre-determined styling. For this reason, working with Bootstrap can be a relatively simple and seamless means of making your app look more professional and sleek, not to mention easier to navigate for the user. Bootstrap also inherently makes these design elements render identically across platforms and browsers. Implementing the framework also builds specific CSS style classes that you can then use to make components unique to your project with the same over-arching Bootstrap theme.
All Bootstrap code is accompanied by HTML, CSS and sometimes JavaScript code for more complex design elements. The building blocks of Bootstrap design features, Bootstrap components, are “containers” which, once set by a developer, can be manipulated as a CSS Flexbox layout.
Snippets
Once integrated into your app and environment, you can literally take chunks of Bootstrap code and apply them to your web project. There are a multitude of free online sources that offer pre-built and functional design feature templates, or “snippets”:
Just to name a few. These sites often include functioning demonstrations of the feature as well as any CSS, HTML and JS code that a given feature requires to work in your app.
Implementation
- Download Bootstrap here and click the “Download Bootstrap” button. Then extract the contents from the zip file.
- Install Bootstrap with one of the following commands that suits your app:
- Node.js with the npm package
npm install bootstrap- Node.js with yarn
yarn add bootstrap- Ruby apps with Bundler or gem install
gem 'bootstrap', '~> 5.0.1' //ORgem install bootstrap -v 5.0.1
3. Create an HTML file within your project file and title it “index.html” and copy the previously zipped file’s contents into the index.html file.
4. Load Bootstrap into your project using the following code:
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">Ultimately, your html file should look something like this:
<!DOCTYPE html> <html lang="en"> <head>
<title>Bootstrap Tutorial Sample Page</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial- scale=1"> <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css"> </head> <body> <script src="jquery-3.5.1.min.js"></script> <script src="bootstrap/js/bootstrap.min.js"></script> </body> </html>
Now you can start fiddling with various snippets and elements and design your web project using Bootstrap!
