11
OctAn Introduction to Bootstrap | Bootstrapping
Bootstrap is the most popular front-end framework for building responsive websites. Bootstrap is an open source framework based on HTML, CSS, and JavaScript. In this article, you will learn about the Bootstrap version history and features and advantages.
What is Bootstrap?
Bootstrap is a mobile first front-end framework for easier web development with supporting all virtual devices. It uses HTML, CSS, JavaScript. Every browser can support bootstrap features. With the knowledge of HTML, CSS, and JavaScript anyone can start working with Bootstrap. Bootstrap responsive CSS adjusts to Desktops, Mobiles, and Tablets. It provides web-based customization. Bootstrap is open source. It can be used for mobile first design styles using the entire library instead of separate and different files.
There are 3 sub-folders. These are CSS, JS, and Fonts. Let’s check how does it look in Visual Studio.
You can get Bootstrap files in 2 ways.
First, download the above files from the below link and then upload in your project and use it.
By using Bootstrap CDN links. No need to download these above files manually.
For Bootstrap website code will be shown like this. Here I have added Bootstrap CSS and JS to make it responsive.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Bootstrap Article</title> <meta name="viewport"content="width=device-width,initial-scale=1"> <link rel="stylesheet"type="text/css"href="~/Bootstrap-Files/css/bootstrap.min.css"> </head> <body> <h1>Welcome to Bootstrap Article</h1> <script src="~/Bootstrap-Files/js/bootstrap.min.js"></script> </body> </html>
Bootstrap Version History
The initial release of Bootstrap was on August 19, 2011. Bootstrap was developed by two employees Mark Otto and Jacob Thornton at Twitter.
History Of Bootstrap 1.x
The initial release of bootstrap v1.x was 1.0.0 and final release was 1.4.0 ;
- It provided support for IE7 and IE8
- It updated grid without .column or columns
- It updates CSS selectors by removing unwanted tags
- It updated grid by adding .one-third and .two-thirds columns
- It provided support for HTML5 form selectors that is input
- It updated grid column styles by removing the static .span1-16 classes
- It has added Javascript plugins for modals, alerts, dropdowns, scrollspy, tabs, tooltips.
- It has added Inline labels control for creating inline content
- It supports media thumbnails and Breadcrumbs
- It has added active states to all buttons, links, and inputs
- It has added updates of javascript plugin for button states
History Of Bootstrap 2.x
The initial release of bootstrap v2.x was 2.0.0 and final release was 2.3.2 ;
- The Progress bars are added in this version with striped and animated variation
- New plugins are added like Collapse, Carousel, Typeahead
- The new class .alert, .alert-block are used by replacing the old version
- The new .thumbnail class is required for each thumbnail
- The class .navbar is added for the navbar
- The .form- prefix used in form classes standardization
- The .btn- prefix used in classes for colors and sizes
- The .table- prefix used in table classes standardization
- The colspan and rowspan are updated with new support
- The bootstrap-responsive.css is added as the compiled version
- The data-attrs for tooltip are updated
- The event type in dropdown is updated
- The dropdown for firefox and mobile are updated
- The .table-bordered and .table-striped are updated in tables
- The utility classes like .text-center, and .text-right are used for typographic alignment.
- The utility classes are used to display and hide content called print utility classes
History Of Bootstrap 3.x
The initial release of bootstrap v3.x was 3.3 and the final release was 3.4 ;
- The positioning of checkboxes and radio buttons are improved by using position: relative
- The duplication of tip() method in popover.js is erased
- The isVertical parameter is updated in Tooltip.replaceArrow()
- The memory leaking in tooltip plugins is solved
- The <button> is updated to work with .list-group-items
- In the modals, aria-hidden usage is removed
- The carousel controls are updated to work in IE9
- The padding on jumbotrons are adjusted inside containers
- The hover border around active links is fixed in case of pagination
- The .embed-responsive-* classes are updated with new features
- The .row-no-gutters class is updated
History Of Bootstrap 4.x
The initial release of bootstrap v4.x was 4.0 and the final release in 2018-2019 is 4.2 ;
- The spinner component is added for loading
- The toast component is added for showing notifications
- The utility class .text-decoration-none is added
- The bootstrap-grid.css file updates the margin and padding of grid system
- The .modal-xl class is used for modals
- The .font-weight-lighter and .font-weight-bolder are added as utility classes
- The validation styles for file inputs is added with new features
- The print feature of dark tables is updated with new quality
- The new utility class .dropdown-item-text is added for dropdown items
- The Tooltips supports Shadow DOM
- The double transitions issue on carousels is improved now
Bootstrap 3 vs Bootstrap 4
Bootstrap 4 is the latest version of Bootstrap. It is the most popular framework including HTML, CSS, and JavaScript. New components are added in Bootstrap 4. The final release in 2018-2019 is 4.2 ;
Bootstrap Advantages
- Bootstrap supports the new release of all browsers.
- It plays a vital role in case of responsiveness and cross-browser capabilities.
- Bootstrap is very easy and quite simple to use for designing and development. It can be used with CSS, LESS or SaaS etc.
- It can be customized as per the project requirements in an easy way.
- Bootstrap supports Javascript Components like, tooltips, modal windows, alerts etc. to add functionalities easily.
- Bootstrap is a framework which contains HTML elements like, tables, typography, buttons, forms, images, lists, and icons etc.
- Bootstrap supports integration with ASP.NET MVC, ASP.NET Core, PHP, HTML, Angular, React.
Bootstrap Features
- Bootstrap uses LESS files but also the old CSS files.
- Using the responsive utility classes, the content can be shown only on devices depending on the size of the screen being used.
- It provides pre-styled components like Button, Navigation, Progress Bar, Dropdowns etc
- Bootstrap supports responsive 12-column grids, layouts, and components.
- Every component, layouts are also very easy to customize.
- The components are working with the JavaScript plugins bundled in the bootstrap package.
- It provides documentation with examples that can make more easier to understand.
Summary
In this write-up, we have learned:
- Introduction to Bootstrap
- What is Bootstrap
- Bootstrap version history
- Bootstrap 3 vs Bootstrap 4
- Bootstrap Advantages
- Bootstrap Features