What is Bootstrap ?
What is Bootstrap ?
- Bootstrap is a free front-end framework for faster and easier web development.
- Bootstrap also gives you the ability to easily create Responsive designs.
What is Responsive ?
- Responsive Web design is the approach that proposes that design and development should be respond to the user’s behavior and environment based on the screen size, platform and orientation.
- A Unique Site that can adapt to any screen size, today or in the future.
- Automatically to resize, hide, shrink, or enlarge, a website, while using HTML and type CSS in responsive web design. To make it look better on all devices (desktops, tablets, and phones).
What is Responsive
Responsive vs Adaptive:
- Responsive sites and adaptive sites are the same in that they both change presence based on the browser environment they are being viewed on (the most specific thing is the browser's width).
- Responsive websites respond to the size of the browser at any given point. Browser width shouldn’t be considering the site is adjusts to the layout an optimized to the screen.
- Adaptive websites at a specific point to be adapt width of the browser. In other words, the website is only concerned about the browser being a specific width, at which point it adapts the layout.
Responsive Vs Adaptive
Relative Units Vs Static Units:
- The unit’s length is measured can be either absolute or static such as such as pixels, points and so on, or relative such as percentages (%) and em units.
- The units are compulsory as non-zero values, because there is no default unit. Missing or ignoring a unit would be treated as an error. While if the value is 0, the unit could be omitted.
- Relative length units require a length relative to another length property. Use the relative units such as em or percentage (%) can more easily scale from one output environment to another.
- The absolute or static units are consisting of the physical units (in, cm, mm, pt, pc) and the px unit. It is highly dependent on the output medium.
Note: The length is a measurement containing a numeric value and a unit only such as 10px, 2em, 50% etc. The whitespace can't appear between the number and the unit.
Relative Vs Static Units
Read AlsoCss Relative Mesaurement Units.
Vector Vs Images:
- An image is generally such as jpg, gif, png, and are widely used on the web. An image has a specific number of pixels. When we increase the image file without changing the number of pixels, the image will blurry to see.
- Vector graphics are created by vector software. Vector images are mathematical calculations from one point to another that form lines and shapes. When we zoom into a vector graphic it will always look the same.
Vector Vs Images
- Using as glyphicons in text, buttons, toolbars, navigation, or forms:
History of Bootstrap:
- Bootstrap, initially named Twitter Blueprint, was developed by Mark Otto and Jacob Thornton at Twitter as a framework to inspire consistency across an internal tool.
- It was by Bootstrap, an open source project released on August 19, 2011. It has continued to be kept by Mark Otto, Jacob Thornton, and a small group of core developers, as well as a large community of contributors.
- Bootstrap 2 was released on January 31, 2012. Added the twelve-column grid layout and responsive design components, the existing components to be changes occurs.
- The Bootstrap 3 released on 19 August 2013, the first approach to mobile and using a flat design.
- The first alpha version of Bootstrap 4 was organized on August 19, 2015.
Histroy of Bootstrap
Where to Get Bootstrap:
Bootstrap Grid System:
- Bootstrap's grid system allows up to 12 columns across the page.
- Bootstrap’s grid system uses a series of containers, rows, and columns to layout and align content. It’s built by flexbox.
Bootstrap Grid System
- Bootstrap's grid system is responsive, and the columns will be re-arrange depending on the screen size.
- On a big screen good to see with the content organized in three columns, but on a small screen it would be better if the content items were stacked on top of each other.
Bootstrap Grid Size Screen:
- The classes can be combined to create more dynamic and flexible layouts.
- .col- (extra small devices - screen width less than 576px)
- .col-sm- (small devices - screen width equal to or greater than 576px)
- .col-md- (medium devices - screen width equal to or greater than 768px)
- .col-lg- (large devices - screen width equal to or greater than 992px)
- .col-xl- (xlarge devices - screen width equal to or greater than 1200px)
Note: The same widths for sm and md.
Grid Screen Size
Bootstrap Stacked-to-horizontal Grid Example
Bootstrap Grid System
Read AlsoIonic Grid.
Bootstrap Fluid container Example
Bootstrap Grid Example
- To achieve the button styles , Bootstrap have some following classes:
- Bootstrap classes define the different button sizes are:
Block Level Buttons
- A block level button spans the complete width of the parent element.
- .btn-block class is used to create a block level button.
Bootstrap Block Level Button
- A button can be set to an active or a disabled buttons.
- .active - It specifies that the button should be active or pressed.
- .disabled- It specifies that the button should be disabled or unclickable
- Pager is a form of pagination. It provides previous and next buttons.
- .pager - This class is used to create previous/next buttons.
Bootstrap Align Buttons
- .previous and .next classes is used to align each button to the sides of the page:
- The Tooltip plugin is pop-up box that looks when the user moves the mouse pointer over an element.
- Plugins can be involved separately (using Bootstrap's separate "tooltip.js" file), or all at once (using "bootstrap.js" or "bootstrap.min.js").
How to Create a Tooltip
- If you want to create a tooltip, add the data-toggle="tooltip" attribute to an element.
- title attribute is used to specify the text that must be displayed inside the tooltip.
- Tooltip will display on top of the element by default.
- data-placement attribute is used to set the position of the tooltip on top, bottom, left or the right side of the element.
Bootstrap Positioning Tooltip