Bootstrap CSS Overview

Bootstrap’s infrastructure, including Bootstrap’s approach to better, faster, stronger web development. HTML5 doctype
Bootstrap makes use of certain HTML elements and CSS properties that require the use of the HTML5 doctype. Hence include the below piece of code for HTML5 doctype at the beginning of all your projects using Bootstrap.

<!DOCTYPE html>
<html>
....
</html>

Mobile First
Since Bootstrap 3, Bootstrap has become mobile first. It means mobile first styles can be found throughout the entire library instead of in separate files. You need to add the viewport meta tag to the element, to ensure proper rendering and touch zooming on mobile devices.

 <meta name="viewport" content="width=device-width, initial-scale=1.0">
  • width property controls the width of the device. Setting it to device-width will make sure that it is rendered across various devices (mobiles,desktops,tablets…) properly.
  • initial-scale=1.0 ensures that when loaded, your web page will be rendered at a 1:1 scale, and no zooming will be applied out of the box

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 with this change, and results in your site feeling a bit more like a native application.

 <meta name="viewport" content="width=device-width, 
                                     initial-scale=1.0, 
                                     maximum-scale=1.0, 
                                     user-scalable=no">

Responsive images
Bootstrap 3 allows to make the images responsive by adding a class .img-responsive to the tag. This class applies 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">

Container

<div class="container">
  ...
</div>

Take a look at open in bootstrap.css file.container class

.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.
youjizz

Admin has written 171 articles