CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Javed
Javed

Reputation: 1753

How to keep button in center of window and it should be responsive

I have this...

<div class="col-md-3">
   <button type="button"  value="Submit" id="generate" class="btn blue btn btn-primary" style="margin-left: 457px; cursor: pointer;"  >Generate </button>                            
</div>

Its satisfying my requirement but when I am opening the page on mobile then the button goes out on the screen.

How to keep it into the screen even after the resizing the window..?

Thanks in advance...

Upvotes: 1

Views: 65

Answers (2)

Divya
Divya

Reputation: 1213

This will get you button in center of your window and it is responsive.

<div class="container">
    <div class="row">
        <div class="col-md-12 col-sm-12 col-lg-12 text-center">
            <button type="button" value="Submit" id="generate" class="btn blue btn btn-primary" style="cursor: pointer;width:100px">Generate </button>
        </div>
    </div>
</div>

you'll need to add the following js and css with any version you work with.

<link href="~/Content/bootstrap.min.css" rel="stylesheet" />
<script src="~/Scripts/jquery-1.10.2.js"></script>
<script src="~/Scripts/bootstrap.min.js"></script>

Upvotes: 2

Rudraksh Pathak
Rudraksh Pathak

Reputation: 898

Use this-

.button-wrap{
    width: 70px;
    margin: auto;
}
<html>
    <head>
        <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    </head>

    <body>
        <div class="container">
            <div class="button-wrap">
                <button type="button" id="generate" class="btn blue btn btn-primary">Button</button>
            </div>
        </div>
    </body>
</html>

What I'm doing here is wrapping your button in a div and assigning it some width. After that i've given it margin of auto to align it in the middle of screen. This will work both on small and large screen devices.

Upvotes: 0

Related Questions