CODEWITHSUNDEEP
htmltwitter-bootstrapgoogle-chrome
masterqp
masterqp

Reputation: 59

Bootstrap on Chrome Not working

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet"href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
</head>
    <body>

<div class="container-fluid">
    <div class="row">
        <div class="col-12 col-sm-2 col-lg-4 col-sm-push-4" style="background-color: blue">
            Content C
        </div>
        <div class="col-12 col-sm-2 col-lg-4 col-sm-push-4" style="background-color: pink">
            Content D
        </div>
        <div class="col-12 col-sm-2 col-lg-2 col-sm-pull-8" style="background-color: purple" >
            Content A
        </div>
        <div class="col-12 col-sm-2 col-lg-2 col-sm-pull-8" style="background-color: purple">
            Content B
        </div>
    </div>
</div>

</body>

So I am trying to achieve the following display on chrome. It works perfectly on safari.

Desktop:
[ 1st col ][ 2nd col ][ 3rd col ][ 4th col ]

Mobile:
    [ 3rd col ]
    [ 4th col ]
    [ 1st col ]
    [ 2nd col ]

Is my syntax wrong or am I supposed to include some extra steps. I have tried adding col-xs-4 col-sm-4 col-md-4 to every line but that didn't seem to help or hurt.

So I think the real question is that bootstrap is not rendering for me on chrome. On safari it shows up as link. On chrome it shows up as link. Thanks for the Help!

Upvotes: 0

Views: 8779

Answers (1)

Enjayy
Enjayy

Reputation: 1074

Yeah that because you are not adding the columns up to 12

If you wanted it to look like your diagram you can just put the class

<div class="col col-lg-3 col-sm-12"></div>

will do what you are looking for also you might not even need col-sm-12 bootstrap tends to automarically make each column full width if it is not specified for smaller screen widths

Link to jsfiddle for example http://jsfiddle.net/tw1gqocq/1/

update :::: This is to get the correct ordering. And bootstrap cdn should start with https://

<div class="container-fluid">
    <div class="row">

        <div class="col col-lg-3 col-sm-12 col-lg-push-6" style="background-color: purple" >
            Content 3rd
        </div>
        <div class="col col-lg-3 col-sm-12 col-lg-push-6" style="background-color: green">
            Content 4th
        </div>
        <div class="col col-lg-3 col-sm-12 col-lg-pull-6" style="background-color: blue">
            Content 1st
        </div>
        <div class="col col-lg-3 col-sm-12 col-lg-pull-6" style="background-color: pink">
            Content 2nd
        </div>   
    </div>
</div>

Upvotes: 2

Related Questions