Bootstrap 4 Basic (Positive & Negative)

 What is Bootstrap?

  • Bootstrap is a free front-end framework for faster and easier web development.
  • It is includes HTML and CSS based design templates for typography, forms, buttons, tables, navigation, modals, image carousels and many other, as well as optional JavaScript plugins.
  • BS also gives you the ability to easily create responsive designs.

Why Use Bootstrap?

Advantages :

  • Easy to use: Anybody with just basic knowledge of HTML and CSS can start using Bootstrap
  • Responsive features: BS is responsive CSS adjusts to phones, tablets, and desktops
  • Mobile-first approach: In Bootstrap, mobile-first styles are part of the core framework
  • Browser compatibility: Bootstrap 4 is compatible with all modern browsers (Chrome, Firefox, Internet Explorer 10+, Safari, and Opera)

Did You Know?

W3.CSS, is an alternative to BS.

W3.CSS is smaller , faster, and easier to use.

If you want to learn W3.CSS, go to our W3.CSS Tutorial.

Bootstrap 3 vs. Bootstrap 4

BS 4 is the newest version of BS; with new components, faster stylesheet and more responsiveness.

BS 4 supports the latest, stable releases of all major browsers and platforms. However,  Internet Explorer 9 and down is not supported.

Where to Get BS 4?

There are two ways to start using BS 4 on your own web site.

You can:

Negative & Positive

Negative :

  • It will be difficult for those who are not so adaptable to accept that bs has changed the classes and media query breakpoint.
  • BS-four does not provide support to non responsive usage.
  • It also does not support IE8, IE9 and iOS 6.
  • Removed -xs infix. It mean that “col-xs-6” in version 3 becomes “col-6” in version 4.
  • Dropped the online customiser.

Positive :

  • BS 4 is using flexbox which will increase the flexibility to arrange the elements. It has been moved away from float.
  • It has been switched from using “px” to “rem”.
  • BS-4 has been switched from “less” to “sass”.
  • It has added dozens of new utility classes for common CSS property-value pairs.
  • BS-Four provides support for horizontal and vertical alignment.
  • Box-sizing value has been changed from “content-box” to “border-box”.

Two Basic BS 4 Pages

The following example shows the code for a basic BS-Four  page (with a responsive fixed width container):

Container Example:

<html >
<head>
<title>Bootstrap Example</title>
<meta charset=”utf-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1″>
<link rel=”stylesheet” href=”https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css”>
<script src=”https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js”></script>
<script src=”https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js”></script>
<script src=”https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js”></script>
</head>
<body>

<div class=”container”>
<h1>My First BS-4 Page</h1>
<p>This part is inside a .container class.</p>
<p>The .container class provides a responsive fixed width container.</p>
</div>

</body>
</html>

bootstrap
bootstrap

 

Container Fluid Example:

<html lang=”en”>
<head>
<title>Bootstrap Example</title>
<meta charset=”utf-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1″>
<link rel=”stylesheet” href=”https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css”>
<script src=”https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js”></script>
<script src=”https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js”></script>
<script src=”https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js”></script>
</head>
<body>

<div class=”container-fluid”>
<h1>My First BS-4 Page</h1>
<p>This part is inside a .container-fluid class.</p>
<p>The .container-fluid class provides a full width container, spanning the entire width of the viewport.</p>
</div>

</body>
</html>

bootstrap 4

 

For further information please Contact Us
Web Clinical Works
Office Address: C-112,Yash Plaza, Nr. Railway Station, Varachha, Surat.
Contact no: +91 8866698094
Email: webclinicalworks@gmail.com
Website: www.webclinicalworks.com

Related posts