Adding bootstrap to html , css

HTML-CSS
1

Hello everyone .
I want to use bootstrap properties in my html file .How shall i add it to my file .When i went to bootstrap documentation i found that there is option for download .I am in confusion as this is not being taught in front end curriculum .Any way i need advise on it .

2

It is actually explicitly stated in the first Bootstrap challenge that:

You can add Bootstrap to any app by adding the following code to the top of your HTML:

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css"/>

Once you have added to a project you can simply use what is described in the Bootstrap documentation by adding the correct classes to an element to get the desired styling. For example, adding the Bootstrap text-center class to an element will center its content.

<div class="container-fluid">
    <div class="row>
        <div class="col text-center">
            <!-- Text entered here will be centered with respect to this column -->
        </div>
    </div>
</div>

Please note that there are major differences between Bootstrap 3 and Bootstrap 4, if you are using CodePen the default version added is 4.0.0 alpha.

I highly recommend reading the Grid System section of the documentation (3.3.7, 4.0.0 alpha) before you dive into it—that will save you a lot of trouble later on.

I hope that helps! :slight_smile:

EDIT: Added code example.

3

I follow this page.

4

Hello.
You need to :

  • add a **link** to the **bootstrap.min.css** in the `` section of your HTML file
  • add a **link** to the **bootstrap.min.js** in the end of the ``, just before the closing tag (``)
Please visit Bootstrap CDN for more details.
5

Thanks for your good explanation.

6

Hi M-Areeb,

Sorry my other message did not show up properly. This is my first post :grin:

You can add Bootstrap in your html file by linking the CSS in your html file in two ways:

1) Link the Bootstrap in your html using CDN or Content Delivery Network:

  • You can do this method by adding the following inside your <head> </head> element:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

2) Link the Bootstrap in your html using the CSS file you downloaded from Bootstrap.

  • You can do this method by adding the following inside the <head> </head> element:

<link rel="stylesheet" href="Path">

  • where Path is the location you put all your CSS files or the bootstrap CSS file you downloaded from Bootstrap site.

  • For example, if you put the “bootstrap.css” in the same folder as your html, you add this in the <head> </head> element of your html:

<link rel="stylesheet" href="bootstrap.css">

I hope that helps.

7

so tell me if am correct or wrong . so if i want to do the bootstrap then will there be two separate files . one html file and one bootstrap file and then after finishing
the file link the bootstrap to html file like how you do in CSS file . am i correct ? if not please explain .