bootstrap 4: center inline form inside a jumbotron

by

Use the justify-content-center helper class on the form. That will center the contents with the flex property justify-content: center;

#home{
  background-image: url('../img/jumbotron-bkg-2.jpg');
  margin-top: 50px;
  text-align: center;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="jumbotron" id="home">
  <h1 class="display-3">My Awesome App!</h1>
  <p class="lead">This is why you should download this fantastic app!</p>
  <hr class="my-4">
  <p>Want to know more? Join our mailing list!</p>
  <form class="form-inline justify-content-center">
    <label class="sr-only" for="yourEmail">Email</label>
    <div class="input-group mb-2 mr-sm-2 mb-sm-0">
      <div class="input-group-addon">@</div>
      <input type="text" class="form-control" id="yourEmail" placeholder="Your Email">
    </div>
    <button type="button" class="btn btn-primary my-2 my-sm-0">Sign Up</button>
  </form>
</div>

More Related Contents:

  1. How To Create This Type of Structure in html css and bootstrap?
  2. vertical-align with Bootstrap 3
  3. Bootstrap row with columns of different height
  4. How can I override Bootstrap CSS styles?
  5. Bootstrap full-width with 2 different backgrounds (and 2 columns)
  6. Bootstrap 4: Multilevel Dropdown Inside Navigation
  7. Twitter Bootstrap 3 Sticky Footer
  8. Extend bootstrap row outside the container
  9. How to center nav-items in Bootstrap? [duplicate]
  10. Create a responsive navbar sidebar “drawer” in Bootstrap?
  11. How to make Bootstrap 4 cards the same height in card-columns?
  12. Bootstrap – align button to the bottom of card
  13. Bootstrap: add margin/padding space between columns
  14. How to remove focus around buttons on click
  15. Bootstrap – 5 column layout
  16. Bootstrap 4 – Sticky footer – Dynamic footer height
  17. Bootstrap 4 – Responsive cards in card-columns
  18. How to center content in a Bootstrap column?
  19. How to implement curve background in CSS? [duplicate]
  20. How do I add a margin between bootstrap columns without wrapping [duplicate]
  21. Inline Form nested within Horizontal Form in Bootstrap 3
  22. Why does `transform` break `position: fixed`?
  23. Bootstrap navbar: nothing is displayed on smaller devices
  24. Bootstrap 3 Glyphicons CDN
  25. Text-align class for inside a table
  26. How to move placeholder to top on focus AND while typing?
  27. Maintain image aspect ratio in carousel
  28. Bootstrap 3 Flush footer to bottom. not fixed
  29. Responsive table handling in Twitter Bootstrap
  30. justify-content: space-between failing to align elements as expected

Leave a Comment