CODEWITHSUNDEEP
csshtmltwitter-bootstrap-3
megaman
megaman

Reputation: 1101

bootstrap 3 push/pull issue

I am learning to use bootstrap 3

I have a problem with using push and pull Normally the rows are centered but When i use push/pull the row gets aligned left, and go off the left of the screen if the browser is not fullscreen.

why is this

code bellow

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=windows-1252">
    <title>Bootstrap 3 Playabout</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <META NAME="ROBOTS" CONTENT="NOINDEX, NOFOLLOW">
    <link rel="stylesheet" href="styles.css">
    <script src="bootstrap.js"></script>

    <style>
    .a
    {
        background-color:green;
    }

    .b
    {
        background-color:blue;
    }
    </style>
</head>

<body>
    <div class="container">
        <div class="row">
            <div class="col-xs-6 col-md-4 a col-lg-push-4">One</div>
            <div class="col-xs-6 col-md-8 b col-lg-pull-8">Two</div>
        </div>
    </div>
</body>

Upvotes: 0

Views: 664

Answers (1)

Sebsemillia
Sebsemillia

Reputation: 9476

You need to switch the push/pull numbers like this:

<div class="col-xs-6 col-md-4 a col-lg-push-8">One</div>
<div class="col-xs-6 col-md-8 b col-lg-pull-4">Two</div>

Working Bootply

Upvotes: 1

Related Questions