Loading

How to align bootstrap div horizontally on the page?

How to align bootstrap div horizontally on the page?

Rajneesh Chaubey

Rajneesh Chaubey

8y869Web Development

Hi Please look at the code:-

Quick Shortcuts

Apps

Bookmarks

Reports

Comments

Users

Notes

Photos

Tags

The output i am getting is like this:-https://i.stack.imgur.com/A3C0B.png

It is on the right side of the page. I want it to be on horizontally centered and responsive too.

Please help..

3 Replies

Know the answer? Post it — somebody with the same question will find it here.

Manav Pandya8y ago
Accepted answer
Hello

I have developed this demo , if you want it to horizontally center , than use col-md-12

Bcoz you have used col-md-6 , which used 6 column space ,after that there is no scope for align-center

Please find following snippet , if not satisfied , let me know :
    "stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  "https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js">
  "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js">
  "text/css">
    .rows
    {

    }


"server">
class="container">
class="rows">
    class="col-md-12">
        class="panel panel-primary">
            class="panel-heading text-center">
                class="panel-title">
                class="glyphicon glyphicon-bookmark"> Quick Shortcuts
class="panel-body">
class="rows">
class="text-center">
"#" class="btn btn-danger btn-block" role="button">class="glyphicon glyphicon-list-alt">
Apps
"#" class="btn btn-warning btn-block" role="button">class="glyphicon glyphicon-bookmark">
Bookmarks
"#" class="btn btn-primary btn-block" role="button">class="glyphicon glyphicon-signal">
Reports
"#" class="btn btn-primary btn-block" role="button">class="glyphicon glyphicon-comment">
Comments
"#" class="btn btn-success btn-block" role="button">class="glyphicon glyphicon-user">
Users
"#" class="btn btn-info btn-block" role="button">class="glyphicon glyphicon-file">
Notes
"#" class="btn btn-primary btn-block" role="button">class="glyphicon glyphicon-picture">
Photos
"#" class="btn btn-primary btn-block" role="button">class="glyphicon glyphicon-tag">
Tags

Thanks

+3

Manav Pandya

Manav Pandya8y ago

Hello

Welcome @Rajneesh

0

Rajneesh Chaubey

Rajneesh Chaubey8y ago

It worked!!

Thanks a ton Manava Pandya

+1