56. Bootstrap 4 Project Setup - Full stack web development Tutorial Course

After downloading and installing Bootstrap, we can now move further. This Full Stack Web Development tutorial course series video will help us to learn how to setup #bootstrap and use it in #html file of our #project.

You can use any editor. Here, we have used Brackets.

Create two files with the extensions .html and .css respectively.
For the starter template, we can use the template that bootstrap provides.
- Open up your browser search for bootstrap.
- Click on the documentation and scroll down towards the starter template.
- Copy the code and make sure you paste it in your HTML file.

Description of the code:
In the code, you have to set the doctype to HTML i.e.,!DOCTYPE HTML within angle brackets and you have got to set a language i.e., lang=”en”.If you do not do so then it will pose a threat to browser compatibility and the use of older versions of HTML. So, consequently, browsers will use quirk mode.

There are some meta tags which are required.
A) Charset attribute specifies the character encoding for the HTML document.
Syntax: meta charset=”character_set”
Here, we have set character_set it to UTF-8 which is a character encoding for Unicode.

B) The next meta tag in the code is a reference to the viewport.
Syntax: meta name=”viewport” content=”width=device-width, initial-scale=1.0”, shrink-to-fit=no”
Now, this will set the viewport of the page which will give instructions on how to control the page’s dimension and scaling

We do not need to re-include bootstrap CDN as we have already downloaded bootstrap.

Then link the stylesheet that we have created. And we can write it as follows: link rel=”stylesheet” href=”style.css”. The browser will pick the CSS file because it has the ability to overwrite any of the classes we modify or add any custom classes to our page.

Now, we have the scripts which must be kept at the bottom of the page.

- First is the jQuery one, some of the components used by the bootstrap use jQuery behind the scenes.

- Second is the Popper.js which helps position elements with accurate positionings like navbars and drop-downs.

- The third is the bootstrap js which has a CDN that grabs bootstrap js but we can remove it because we have downloaded it already.


----------------------------

Week 2: Day 3
Section 7: Introduction to Bootstrap 4
Tutorial 56: Bootstrap 4 Project Setup

----------------------------
Do subscribe and hit Bell Icon
----------------------------

Follow us in social media handles for opportunities and code related support.

Instagram: https://www.instagram.com/wb.web/
Facebook: https://www.facebook.com/wbweb/
Twitter: https://twitter.com/wbweb_in/
LinkedIn: https://www.linkedin.com/company/wbweb/

----------------------------

Got a question on the topic? Please share it in the comment section below and our experts will answer it for you.

For more information, please write back to us at [email protected] or call us at IND: 7077568998

After completing the course, write to [email protected] for internship or freelancing opportunities.

For consultation or partnership, related queries drop a mail to [email protected].