CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
user3042713
user3042713

Reputation: 175

[bootstrap]button not centered in narrow screen using center-block

https://jsfiddle.net/c5befo3h/2/

The whole discussion is based on above jsfiddle.

  1. I don't understand why the button is shifted left instead of center with only standard btn btn-default class.
    https://jsfiddle.net/c5befo3h/

  2. I add center-block to center the button. Is it a recommended way? If so, as i narrowing the screen, the button starts to be not centered. reach screen edge

    (1)I found out that's because of padding.
    (2)And it overflows.
    exceed screen
    How to avoid (1),(2)?

  3. My desired outcome is if the screen is wide enough, button is horizontal and vertical align in all situation.
    For narrow screen, it drops to next line and horizontal and vertical aligned.
    How to archive the vertical align according parent height.
    Sorry to ask a different question here, but I have gone through similar questions on stackoverflow and still don't have solution.

Many thanks

Upvotes: 0

Views: 404

Answers (3)

user3042713
user3042713

Reputation: 175

As for vertical alignment, look through logs of hacks to bootstrap.
And best solution I provide is using flexbox.

NOTICE: as it not work for xs, apply only to screen size larger than xs

@media (min-width: 768px) {
.vertical-align {
    display: flex;
    align-items: center;
}
}
@media (min-width: 768px) {
.vertical-align > div {
margin: auto;
}
}

updated version:
https://jsfiddle.net/c5befo3h/3/

Upvotes: 0

Caleb Grams
Caleb Grams

Reputation: 283

Very interesting problem. I do not know why this is happening but I was able to resolve it:

If you give the "col-md-2" another class and give that class a padding of zero it resolves the issue.

.padding-right-col-2 {
padding-right: 0;
}

Upvotes: 0

Tony Stonks
Tony Stonks

Reputation: 360

Is this the outcome you desire?

I've changed the column sizes to point md screens and separate how it looks like on xs screens.

For the button alignment, padding should work.

div {
  border: solid 1px red
}
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <h2>Vertical (basic) form</h2>
  <div class='row'>
    <div class='col-xs-12 col-md-5 form-group'>
      <label for="email">Email:</label>
      <input type="email" class="form-control" id="email" placeholder="Enter email" name="email">
    </div>
    <div class='col-xs-12 col-md-5 form-group'>
      <label for="pwd">Password:</label>
      <input type="password" class="form-control" id="pwd" placeholder="Enter password" name="pwd">
    </div>
    <div class='col-xs-12 col-md-2'>
      <button class="btn btn-default center-block">Submit</button>
    </div>
  </div>
</div>

Upvotes: 1

Related Questions