Top Concepts Of Bootstrap
Posted By : Rudhishthir Prakash | 29-Apr-2018
What is Bootstrap?
At its core, Bootstrap is an open source, Javascript framework that was developed by some folks at Twitter. It is essentially a combined HTML, CSS, and Javascript in order to create this framework that makes building of user interfaces easier. It is often called the front-end framework because it deals almost exclusively with UI and UX elements of your design. It's free and you can download it or use it whenever to create your website. One of the most important things about Bootstrap is how easy it is to get started. Essentially, all you have to do is download a package, include the CSS in your HTML file, and then you are good to go. Another reason that a lot of people use it is that it includes a really good list of plugins or components. So, if you want to add a navigation bar to the top of your website, or if you want to easily create a grid layout that organizes all the information in your page in a clear and concise way, these all are very easy things to do in Bootstrap. The last thing that it includes is base styling for HTML elements. So essentially, buttons, tables, forms, images, all sort of these things are sort of homogenized in their design to create something that is cohesive and easy to read.
How to center an element vertically and horizontally?
Centering elements have always been a bit of rough point for web developers, especially vertical centering. But bootstrap makes it pretty easy.
Example:
<head>
<link ref="stylesheet" type="text/css" href="css\bootstrap.css">
<style>
.center-block{
float:none !important;
display: block;
margin: 0 auto;
}
</style>
</head>
<body class="container">
<div class="row">
<div class="center-block"> Horizontal Center </div>
</div>
<div class="container d-flex h-100">
<div class="row justify-content-center align-self-center">
vertical center
</div>
</div>
<div class="container d-flex h-100">
<div class="row center-block justify-content-center align-self-center">
true center
</div>
</div>
</body>
How to maintain a consistent height between all the different columns in bootstrap rows?
Bootstrap implements something called the grid, which makes it very easy to create a grid of content and organize all that content in a very nice, grid-like environment. But sometimes, it does not look as great as we would like it to. That can be done using some styles in our CSS file which are:
.row{
overflow: hidden;
}
[class *= "col-"]{
margin-bottom : -99999px;
margin-bottom : 99999px;
}
What is sr-only?
This tag stands for screen reader only. And this means that that particular piece of content will only display for users that have a screen reader. A screen reader is a technology used to access websites without the use of their vision.
Request for Proposal
Cookies are important to the proper functioning of a site. To improve your experience, we use cookies to remember log-in details and provide secure log-in, collect statistics to optimize site functionality, and deliver content tailored to your interests. Click Agree and Proceed to accept cookies and go directly to the site or click on View Cookie Settings to see detailed descriptions of the types of cookies and choose whether to accept certain cookies while on the site.
About Author
Rudhishthir Prakash
Rudhishthir is a technical enthusiast having experience in C#.NET, NodeJS & various front-end technologies. He has great experience in building quality applications with innovative ideas. He also has proven expertise in handling clients.