CSS And Bootstrap

LETS GET STARTED WITH BOOTSTRAP BASICS

HTML5, Bootstrap and css

CSS along with Botstraap can work magic to your website design. Bootstrap is the world’s most popular framework for building responsive, mobile-first sites.

Lets get strated with Building an HTML Website using both Bootstrap And CSS to add life to our website. NB! HTML has a latest vesion that works well with Bootstrap – HTML5. lets prepare the code to work well with bootstrap and HTML5.

Include the following code at the beginning of all your projects.

 

   <!doctype html>
   <html lang="en">
    </html>
   

 

  BOOTSTRAP

Bootstrap is HTML, CSS, and JavaScript framework to create mobile-first, responsive websites.

WHAT IS BOOTSTRAP?

  • Bootstrap is a free front-end framework for faster and easier web development
  • 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
  • It also gives you the ability to easily create responsive designs

What is Responsive Web Design?

Responsive Design means Creating web sites which automatically adjust themselves to look good on all devices from small phones to large desktops.

          Why Use Bootstrap?

   Advantages of Bootstrap:

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

       Where to Get Bootstrap?

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

You can:

  • Download Bootstrap from getbootstrap.com (go to getbootstrap.com, and follow the instructions there.)
  • Include Bootstrap from a CDN

Bootstrap CDN

If you don’t want to download and host Bootstrap 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:

MAXCND

Content delivery networks (CDNs) are the
pipelines of the Internet. Working behind the scenes, they are reshaping how
information is consumed online, accelerating web traffic, enhancing user
experience and providing every website with the ability to truly go global.

<!– Latest compiled and
minified CSS –>
<link rel=”stylesheet” href=”https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css”>
<!–
jQuery library –>
<script src=”https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js”></script>
<!–
Latest compiled JavaScript –>
<script src=”https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js”></script>

 CDN’s will make sure that once a user requests a
file from it, it will be served from the server closest to them, which also
leads to faster loading time.

AFTERE INCLDING ALL THIS,  YOUR CODE SHOULD LOOK SOMETHING LIKE THIS:

We will start by putting it all together on the next Blog. 

Leave a Reply