CODEWITHSUNDEEP
twitter-bootstrap
lapots
lapots

Reputation: 13395

change row position of the element in twitter bootstrap

Is it possible to change row position of the element in twitter bootstrap? I mean when there is only one element on the page. For example I want to place I'm centered several rows below.(Now it is on the top of the page)

<html>
<head>
    <meta name="viewport"  content="width=device-width, initial-scale=1.0"/>
    <link rel="stylesheet" href="css\bootstrap.min.css">
    <script src="js\bootstrap.min.js"></script>
</head>
<body>
    <div class="container">
        <div class="row">
            <div class="col-md-6 col-md-offset-3">
                I'm centered!
            </div>
        </div>
    </div>
</body>
</html>

Upvotes: 0

Views: 629

Answers (1)

Mikko Ohtamaa
Mikko Ohtamaa

Reputation: 83458

Because there is only row in your example placing element "several rounds below" is little difficult to understand in the context of this question. Maybe you need to add some more code to your example?

In any case to vertically align elements you need to use basic CSS, with margin-top or position

  • Set id on your element e.g.

        <div class="col-md-6 col-md-offset-3">
        <div id="myelem">I'm centered!</div>
    </div>

  • Then you can do with your CSS #myelem { margin-top: 50px }

Also, vertical centering (relative to the screen) with CSS is little complex, but there are plenty of online tutorials regarding this.

Upvotes: 1

Related Questions