Hello folks! welcome back to a new edition of our tutorial on Bootstrap. In this tutorial, we will be providing you an overview of the key pieces of Bootstrap's infrastructure. We will also look into Bootstrap's approach to a better, faster, stronger web development.
HTML5 Doctype
Bootstrap uses certain HTML elements and CSS properties that need the use of HTML5 doctype. Hence include the below piece of code for HTML5 doctype at the starting of all your projects using Bootstrap -
<!DOCTYPE html> <html> .... </html>
Mobile First
Since Bootstrap 3 was released, Bootstrap has become mobile first. It means "mobile first" styles can be found all over the entire library instead of them in separate files.
You need to add the viewport meta tag to the <head> element, to ensure appropriate rendering and touch zooming on mobile.
You need to add the viewport meta tag to the <head> element, to ensure appropriate rendering and touch zooming on mobile.
<meta name = "viewport" content = "width = device-width, initial-scale = 1.0">
Parameter Details
- width property controls the device width. Setting it to device-width will make sure that it is rendered across various devices (mobiles, tablets, desktops) properly.
- initial-scale = 1.0 ensures that when loaded, the web page will be rendered at a 1:1 scale, and no zooming will be applied out of the box.
Now add user-scalable = no to the content attribute to disable zooming capabilities on mobile devices as shown below. Users are only able to scroll and not zoom (in or out) with this change, and it results to your site feeling more like a native application.
<meta name = "viewport" content = "width = device-width, initial-scale = 1.0, maximum-scale = 1.0, user-scalable = no">
Usually maximum-scale = 1.0 is used along with user-scalable= no. As mentioned above user-scalable = no may give your site users an experience more like a native app. Thus Bootstrap doesn't recommend this attribute being used.
Responsive Image
Bootstrap 3 allows you to make your image responsive and you can do that by adding a class .img-responsive to the <img> tag. This tag applies a max-width: 100%; and height: auto; to the image so that it scales nicely to the parent element.
<img src = "..." class = "img-responsive" alt = "Responsive image">
Links and Typography
Bootstrap sets a basic global display (background), typography, and link styles -
- Basic Glabal Display - Used to set the background-color: fff; on the <body> element.
- Typography - This makes use of the @font-family-base, @font-size-base, and the @line-height-base attributes as a typographic base.
- Link Styles - Sets the global link color via the @link-color attribute and apply link underlines only on :hover.
READ: Bootstrap | Introduction
Normalize
Bootstrap uses what is called Normalize to establish a cross browser consistency.
Normalize.css is a HTML5-ready alternative to CSS resets. Its a small CSS file that gives better cross-browser consistency in default styling of HTML elements.
Normalize.css is a HTML5-ready alternative to CSS resets. Its a small CSS file that gives better cross-browser consistency in default styling of HTML elements.
Containers
Use the .container class to wrap a page's content and easily center the content as it is shown below.
<div class = "container"> ... </div>
Take a look at the .container class in the bootstrap.css file -
.container { padding-right: 15px; padding-left: 15px; margin-right: auto; margin-left: auto; }
Note that, due to padding and fixed widths, containers are not nestable by default.
Take a look at bootstrap.css file -
Take a look at bootstrap.css file -
@media (min-width: 768px) { .container { width: 750px; } }
From the above bootstrap.css file, CSS has media-queries for the containers with width. This helps for applying responsiveness and within those the container class is modified accordingly to render the grid system in an appropriate manner.
READ: Bootstrap | Grid System
Alright guys! This is where we are going to be rounding up for this tutorial. In our next tutorial guide, we are going to be studying about the Bootstrap Typography.
Feel free to ask your questions where necessary and we will attend to them as soon as possible. If this tutorial was helpful to you, you can use the share button to share this tutorial.
Follow us on our various social media platforms to stay updated with our latest tutorials. You can also subscribe to our newsletter in order to get our tutorials delivered directly to your emails.
Thanks for reading and bye for now.
Feel free to ask your questions where necessary and we will attend to them as soon as possible. If this tutorial was helpful to you, you can use the share button to share this tutorial.
Follow us on our various social media platforms to stay updated with our latest tutorials. You can also subscribe to our newsletter in order to get our tutorials delivered directly to your emails.
Thanks for reading and bye for now.