CODEWITHSUNDEEP
twitter-bootstrap
DJBrandoK
DJBrandoK

Reputation: 45

bootstrap not working with chrome (firefox and ie work fine)

I have a basic website I'm building to learn Bootstrap. On firefox and ie 11, the website works as expected. The grid system works and the navigation collapses and toggles the hamburger icon as expected.

On chrome the navigation starts a little under 992px to go cover the right links and it doesn't collapse/toggle the hamburger icon.

Why is it not working on chrome?

So far I have this as my code, thank you in advance:

<!doctype html>

<head>
    <meta charset="utf-8">
    <title>Testing Bootstrp</title>
    <link rel="stylesheet" type="text/css" href="css/bootstrap.css">
    <link rel="stylesheet" type="text/css" href="css/main.css">
</head>

<body>
    <div class='navbar navbar-default navbar-fixed-top'>
        <div class='container'>
            <div class='navbar-header'>
                <a href='#' class='navbar-brand'>
                        WELCOME TO MY WORLD
                    </a>
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                    <span class="sr-only">Toggle Navigation</span>
                    <span class='icon-bar'></span>
                    <span class='icon-bar'></span>
                    <span class='icon-bar'></span>
                </button>
            </div>
            <ul class='nav navbar-nav navbar-right collapse navbar-collapse'>
                <li><a href="#">HOME</a></li>
                <li><a href="#">Testimonails</a></li>
                <li><a href="#">Insurance</a></li>
            </ul>
        </div>
    </div>

Here is main.css, not much going on.

.features .glyphicon {
    font-size: 32px;
    color: purple;
}

body {
    padding-top: 70px;
}

996px

It starts to break here, the grid stops adapting under the 991 mark

Upvotes: 0

Views: 4376

Answers (1)

Sagi
Sagi

Reputation: 191

Try adding this line of code to your head section:

<meta name="viewport" content="width=device-width, initial-scale=1">

Upvotes: 2

Related Questions