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: / wb.web
Facebook: / wbweb
Twitter: / wbweb_in
LinkedIn: / 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 hi@wbweb.co.in or call us at IND: 7077568998
After completing the course, write to biswabijaya@wbweb.co.in for internship or freelancing opportunities.
For consultation or partnership, related queries drop a mail to hi@wbweb.co.in.
Nesta página do site você pode assistir ao vídeo on-line 56. Bootstrap 4 Project Setup - Full stack web development Tutorial Course duração hora minuto segundo em boa qualidade , que foi baixado pelo usuário WB Web Development Solutions 29 Maio 2018, compartilhe o link com seus amigos e conhecidos, no youtube este vídeo já foi visto 16,896 vezes e gostou 138 espectadores. Boa visualização!
