Getting Started with Bootstrap 4

in #utopian-io • 8 years ago (edited)

What Will I Learn?

  • How To install Bootstrap by downloading and from CDN
  • You will get to know the difference between Bootstrap 3 and Bootstrap 4
  • In this Tutorial you are going to learn the difference between .container and .container-fluid

Requirements

  • Basic Knowledge in HTML
  • Basic Knowledge in CSS
  • Basic Knowledge in JAVASCRIPT

Difficulty

  • Basic

Tutorial Contents

Bootstrap is a free and open-source framework for easier web development. It's the popular HTML, CSS, and JS framework for developing responsive, mobile first projects on the web.

What is Responsive Web Design?

RWD is creating a website for it to adjust itself on any device.

responsive_design.png

Bootstrap 3 vs. Bootstrap 4

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

Why Use Bootstrap 4?
Advantages of Bootstrap 4:

  • Easy to use
  • Responsive features
  • Mobile-first approach
  • Browser compatibility

Where to Get Bootstrap 4?
There are two ways to start using Bootstrap 4 on your own web site.

You can:

  • Include Bootstrap 4 from a CDN
  • Download Bootstrap 4 from getbootstrap.com

Bootstrap 4 CDN
If you don't want to download and host Bootstrap 4 yourself, you can include it from a CDN (Content Delivery Network).

MaxCDN provides CDN support for Bootstrap's CSS and JavaScript. You must also include jQuery:

MaxCDN:

(html comment removed:  CSS )
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">

(html comment removed:  jQuery library )
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

(html comment removed:  Popper JS )
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>

(html comment removed:  JavaScript )
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>

Create First Web Page With Bootstrap 4

  1. Add the HTML5 doctype

Bootstrap 4 uses HTML elements and CSS properties that require the HTML5 doctype.

Always include the HTML5 doctype at the beginning of the page, along with the lang attribute and the correct character set:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8"> 
  </head>
</html>
  1. Bootstrap 4 is mobile-first

Bootstrap 4 is designed to be responsive to all mobile devices. To ensure proper rendering and touch zooming, add the following tag inside the element:

<meta name="viewport" content="width=device-width, initial-scale=1">
  1. Containers

Conainers are elements use to wrap the site. There are two container classes to choose from:

  • The fixed container class provides a responsive fixed width container. As you resize your browser, its width remains intact.

  • fluid container class provides a full width container, spanning the entire width of the viewport. It will expand and contract fluidly as you resize the browser.

EXAMPLE:
`

Posted on Utopian.io - Rewarding Open Source Contributors

#tutorial #html #ghana
8 years ago in #utopian-io by
$0.00
    5 votes
    Reply 2
    Sort:  
  • Trending
    • [-]
     8 years ago  

    Hi! I am a robot. I just upvoted you! I found similar content that readers might be interested in:
    http://www.codescratcher.com/bootstrap/fixed-and-fluid-layout-in-bootstrap/

    $0.00
      Reply
      [-]
       8 years ago  

      Your contribution cannot be approved because it does not follow the Utopian Rules.

      Hi, these are the reasons your contribution was rejected

      • Tutorials must be technical instructions that teach non-trivial aspects of an open-source project. Your tutorial is very trivial and of little to no value.
      • The linked repository is for Material Design for Bootstrap, which is an open source toolkit based on Bootstrap for developing Material Design apps with HTML, CSS, and JS. Your tutorial is about Bootstrap, so you should use Bootstrap's repository.

      I recommend you read the rules before contributing again in the future.

      You can contact us on Discord.
      [utopian-moderator]

      $0.00
        Reply