CODEWITHSUNDEEP
jqueryhtmlcsstwitter-bootstrap
Kevin N.
Kevin N.

Reputation: 71

How do I implement a bootstrap file to html correctly?

so I want to learn bootstrap and therefore want to try it out myself.

    <!DOCTYPE html>
<html lang="en">
<head>
    <title></title>

    <link rel="stylesheet" type="text/css" href="style.css">
    <link rel="stylesheet" type="text/css" href="bootstrap-responsive.css">
</head>

<body>
    <div class="row">
        <div class="span4"><h1>Test1</h1></div>
        <div class="span4"><h1>Test2</h1></div>
        <div class="span4"><h1>Test3</h1></div>
    </div>

    <p> Hi </p>


<script src="jquery-2.1.3.webarchive"></script>
<script src="bootstrap.js"></script>

</body>

</html>

All the linked files are in the same folder as the index.html file. When I open the index.html it's not how I expected it to be. It's just simple html without any bootstrap.

EDIT:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" text="text/css" href="css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="css/custom.css">

</head>
<body>

<script src="http://code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="js/bootstrap.min.js"></script> 

</body>
</html>

Console doesn't say anything and it's still not working.

EDIT2:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" text="text/css" href="css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="css/custom.css">

    <style>
    .container {
        text-align: center;
    }

    .borders {
        border: 1px solid black;
    }
    </style>
    <script> console.log("Hi")</script>
</head>
<body>

    <div class="container">

        <div class="row">           
            <div class="borders col-xs-6"></div>
                <h1>EXTRA SMALL GRID 1</h1>
            </div>

            <div class="borders col-xs-6"></div>
                <h1>EXTRA SMALL GRID 2</h1>
            </div>
        </div><!--ROW-->

        <div class="row">           
            <div class="borders col-sm-6"></div>
                <h1>SMALL GRID 3</h1>
            </div>

            <div class="borders col-sm-6"></div>
                <h1>SMALL GRID 4</h1>
            </div>
        </div><!--ROW-->

        <div class="row">           
            <div class="borders col-md-6"></div>
                <h1>MEDIUM GRID 5</h1>
            </div>

            <div class="borders col-md-6"></div>
                <h1>MEDIUM GRID 6</h1>
            </div>
        </div><!--ROW-->

        <div class="row">           
            <div class="borders col-lg-6"></div>
                <h1>LARGE GRID 7</h1>
            </div>

            <div class="borders col-lg-6"></div>
                <h1>LARGE GRID 8</h1>
            </div>
        </div><!--ROW-->

    </div>

<script src="http://code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="js/bootstrap.min.js"></script> 

</body>
</html>

Upvotes: 1

Views: 4805

Answers (3)

sanoj lawrence
sanoj lawrence

Reputation: 993

As you mentioned in question All the linked files are in the same folder as the index.html file. When I open the index.html it's not how I expected it to be. It's just simple html without any bootstrap


To do that you have to remove external files

bellow is link this is how you linl CSS Cascading Style Sheets

<link rel="stylesheet" type="text/css" href="style.css">

bellow is script tag linking JavaScript, jQuery etc..

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>

Following is pure html file no CSS, SCRIPT

<!DOCTYPE html>
<html lang="en">
<head>
    <title>no external files</title>
</head>
<body>
    <div class="row">
        <div class="span4"><h1>Test1</h1></div>
        <div class="span4"><h1>Test2</h1></div>
        <div class="span4"><h1>Test3</h1></div>
    </div>
    <p> Hi </p>
</body>
</html>

Upvotes: 1

neoLok
neoLok

Reputation: 79

Did you download files from http://getbootstrap.com/getting-started/#download ? You need to add bootstap.css OR the min css file version.

I Replaced css, jquery and js files with CDN links, since I am not sure what files you are using.

<!DOCTYPE html>
<html lang="en">
<head>
<title></title>

<link rel="stylesheet" type="text/css" href="style.css">

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">

</head>

<body>

<div class="container">

<div class="row">
<div class="jumbotron">
    <h1>Hello, world!</h1>          
    <p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a></p>
</div>

    <div class="span4"><h1>Test1</h1></div>
    <div class="span4"><h1>Test2</h1></div>
    <div class="span4"><h1>Test3</h1></div>
</div>


<div class="row">
    <div class="col-md-4 col-lg-3 col-sm-4 col-xs-4"><h1>Test1</h1></div>
    <div class="col-md-4 col-lg-3 col-sm-4 col-xs-4"><h1>Test2</h1></div>
    <div class="col-md-4 col-lg-3 col-sm-4 col-xs-4"><h1>Test3</h1></div>
</div>

<p> Hi </p>

</div>

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>

</body>

</html>

You may try to replace each cdn link one by one with your files and see where there problem is. Good Luck !

Upvotes: 0

charlietfl
charlietfl

Reputation: 171679

You have a script resource URL jquery-2.1.3.webarchive that has no file extension, presumably it should be .js

If that resource is not the jQuery library you would also need to include jQuery.js also, and before the other 2 scripts.

Use your browser console (F12) to look for files not loaded and for javascript errors thrown.

As a quick check you could load jQuery library from CDN using the following in place of jquery-2.1.3.webarchive

<script src="//code.jquery.com/jquery-1.11.2.min.js"></script>

Upvotes: 0

Related Questions