How to center a form inside a Bootstrap 4 jumbotron
The Bootstrap 4 class you need in this case is justify-content-center.
Here's the working code:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="jumbotron text-center" id="jumbotron"> <h1 class="display-3">Lorem Ipsum</h1> <p class="lead">Lorem ipsum</p> <hr class="my-y-2"> <p>################</p> <form class="form-inline justify-content-center">
<label class="sr-only" for="email">Email</label> <div class="input-group mb-2 mr-sm-2"> <div class="input-group-prepend"> <div class="input-group-text">@</div>
<input type="email" class="form-control" id="email" placeholder="Email"> </div>
</div>
<button type="submit" class="btn btn-primary mb-2">Sign Up</button> </form></div>bootstrap 4: center inline form inside a jumbotron
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>How to align form in center of the jumbotron div?
Please try to give your a new class name as: <form class="form-inline justify-content-center">
Here is the example:
<html lang="en"> <head> <!-- Required meta tags --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<title>Hello, world!</title>
<style type="text/css"> .jumbotron{ background: url(pic.jpg); background-size: 100% 100%; text-align: center;
}
</style>
</head> <body>
<!-- Nav Bar -->
<nav class="navbar navbar-expand-lg navbar-light bg-light"> <a class="navbar-brand" href="#">MyApp</a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button>
<div class="collapse navbar-collapse" id="navbarSupportedContent"> <ul class="navbar-nav mr-auto"> <li class="nav-item active"> <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a> </li>
<li class="nav-item"> <a class="nav-link" href="#">About</a> </li>
<li class="nav-item"> <a class="nav-link" href="#">Download The App</a> </li>
</ul> <form class="form-inline my-2 my-lg-0"> <input class="form-control mr-sm-2" type="email" placeholder="Email" aria-label="Email"> <input class="form-control mr-sm-2" type="password" placeholder="Password" aria-label="Password"> <button class="btn btn-success my-2 my-sm-0" type="submit">Login</button> </form> </div></nav>
<!-- Nav Bar -->
<!-- JumboTron Header -->
<div class="jumbotron"> <h1 class="display-4">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>
<!-- inline form -->
<form class="form-inline justify-content-center"> <div class="form-group"> <label class="sr-only" for="email">Email address</label> <div class="input-group"> <div class="input-group-text">@</div> <input type="email" class="form-control" id="email" placeholder="Your email">
</div>
</div> <button type="submit" class="btn btn-primary">Sign up</button>
</form>
<!-- inline form -->
</div>
<!--JumboTron Header -->
<!-- Optional JavaScript --> <!-- jQuery first, then Popper.js, then Bootstrap JS --> <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script> </body></html>How do I center a form which is wrapped in a flex container?
Your form is a flex container and flex can be horizontally center with
justify-content: center;and vertically withalign-items: center(If height is enough available)
Add below css and this will center the form
.form-inline {
justify-content: center;
}
How to add an html form in the middle of jumbotron using bootstrap 4.1?
The search button is sticking out because it's bigger than it's container the col-lg-1.
To resolve the overlapping on mobile/tablet screen you'll have to override or remove the h-75 class from: jumbotron jumbotron-fluid intro-jumbotron h-75 clearfix.
I've cleaned up your HTML code a bit:
<nav class="navbar navbar-expand-md navbar-dark bg-dark fixed-top"> <div class="container"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse" aria-controls="" aria-expanded="false" aria-label="Toggle navigation"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="/">MySite</a> </div> <div class="navbar-collapse collapse"> <ul class="nav navbar-nav mr-auto"> <li class="nav-item"><a class="nav-link" href="/">Home</a></li> <li class="nav-item"><a class="nav-link" href="/Home/About">About</a></li> <li class="nav-item"><a class="nav-link" href="/Home/Contact">Contact</a></li> </ul>
<ul class="nav navbar-nav navbar-right"> <li class="nav-item"><a class="nav-link" href="/Identity/Account/Register">Register</a></li> <li class="nav-item"><a class="nav-link" href="/Identity/Account/Login">Login</a></li> </ul>
</div> </div> </nav>
<div class="jumbotron jumbotron-fluid intro-jumbotron clearfix" id="images_show_case">
<div class="container h-100 d-flex">
<div class="my-auto w-100"> <div class="card card-intro-search"> <div class="card-body text-center"> <h3 class="text-uppercase">discover real estate in</h3> <h1 class="text-uppercase font-weight-bold">My City</h1> <form method="get" action="/Listing/Search"> <div class="row mx-0"> <div class="col-lg-3 px-0"> <select class="form-control form-control-lg" data-val="true" data-val-required="The Value field is required." id="Search_Type_Value" name="Search.Type.Value"><option value="">Select an option</option><option value="CommercialLease">Commercial Lease</option><option value="Commerical">Commerical</option><option value="LotsAndLand">Lots and Land</option><option value="Rental">Rental</option><option selected="selected" value="Residential">Residential</option><option value="ResidentialIncome">Residential Income</option></select> <label class="control-label search-label" for="Search_Type">Property Type</label>
</div> <div class="col-lg-3 px-0"> <div class="row mx-0">
<div class="col-lg-6 px-0"> <input type="number" class="form-control form-control-lg" data-val="true" data-val-number="The field Min Price must be a number." data-val-range="The field Min Price must be between 0 and 9999999." data-val-range-max="9999999" data-val-range-min="0" data-val-required="The Min Price field is required." id="Search_MinPrice" name="Search.MinPrice" value="200000" /> <label class="control-label search-label" for="Search_MinPrice">Min Price</label> </div> <div class="col-lg-6 px-0"> <input type="number" class="form-control form-control-lg" data-val="true" data-val-number="The field Max Price must be a number." data-val-range="The field Max Price must be between 0 and 9999999." data-val-range-max="9999999" data-val-range-min="0" data-val-required="The Max Price field is required." id="Search_MaxPrice" name="Search.MaxPrice" value="500000" /> <label class="control-label search-label" for="Search_MaxPrice">Max Price</label> </div> </div> </div>
<div class="col-lg-1 pl-0 pr-0"> <input type="number" class="form-control form-control-lg" data-val="true" data-val-range="The field Min Beds must be between 0 and 100." data-val-range-max="100" data-val-range-min="0" id="Search_MinBedrooms" name="Search.MinBedrooms" value="3" /> <label class="control-label search-label" for="Search_MinBedrooms">Min Beds</label>
</div>
<div class="col-lg-1 pl-0 pr-0"> <input type="number" class="form-control form-control-lg" data-val="true" data-val-range="The field Min Baths must be between 0 and 100." data-val-range-max="100" data-val-range-min="0" id="Search_MinBathrooms" name="Search.MinBathrooms" value="2" /> <label class="control-label search-label" for="Search_MinBathrooms">Min Baths</label>
</div>
<div class="col-lg-2 pl-0 pr-0">
<select class="form-control form-control-lg" id="Search_City_Id" name="Search.City.Id"><option value="">Any City</option><option value="6">A</option><option value="7">B</option><option value="8">C</option><option value="3">D</option><option value="1">E</option><option value="2">F</option></select> <label class="control-label search-label" for="Search_City">City</label> </div> <div class="col-lg-2 px-0 text-left "> <button type="submit" value="Search" class="btn btn-primary btn-lg w-100"> <span class="fas fa-filter"></span> Search </button> </div> </div> </form> </div> </div> </div> </div> </div> <div class="container-fluid body-content"><div class="row">
<div class="col-xs-12 col-sm-6 col-lg-4"> <h2>Lorem</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> </div> <div class="col-xs-12 col-sm-6 col-lg-4"> <h2>Lorem</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> </div>
<div class="col-xs-12 col-sm-6 col-lg-4"> <h2>Lorem</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> </div>
</div> </div>How to Center a Button in Bootstrap's Jumbotron?
On .jumbotron .container apply text-align: center; which will also align the heading in center so target .jumbotron .container h2 and align it left if you want using text-align: left;
OR
Just apply text-center class on container div inside jumbotron and then target the heading and align its text as left.
<div class="jumbotron">
<div class="container text-center">
<h2 class="text-left">Keep your heart as if you have just e it one hundred times.</h2>
<button type="button" class="btn btn-primary text-center">Projects</button>
</div>
</div>
Codepen: https://codepen.io/Omi236/pen/JJVENE?editors=1100
Vertical Form Inside Jumbotron
Did you try changing column width of form-groups to 12 columns?
<div class="container">
<div class="row">
<div class="jumbotron text-center">
<form role="form" method="post">
<div class="col-md-12 form-group">
<input type="search" size="100" id="mySearch" placeholder="Search for Summoner Name">
<button type="button" class="btn btn-primary">Search</button>
</div>
<div class="col-md-12 form-group">
<label> NA</label>
<input type="radio" name="region" id="NA" value="NA" />
<label>EUW</label>
<input type="radio" name="region" id="EUW" value="EUW">
</div>
</form>
</div>
</div>
</div>
Related Topics
Does Svg Xmlns Attribute Value Requires Protocol? Can It Be Https or Relative
Load a Low-Res Background Image First, Then a High-Res One
How to Make Clickable Anchor in Contenteditable Div
CSS/HTML: Create a Glowing Border Around an Input Field
Border Around Specific Rows in a Table
Bootstrap Row Class Contains Margin-Left and Margin-Right Which Creates Problems
Setting Hidden Datalist Option Values
Random Querystring to Avoid Ie Caching
HTML Number Input Min and Max Not Working Properly
What Client-Side Web Scripting Languages Are There Other Than JavaScript and Vbscript
Embed Youtube Code Is Not Working in HTML
How to Remove The Space Between List Items
How to Load External Fonts into an HTML Document
Bootstrap 3 Grid, Does It *Really* Matter How Many Columns Are in a Row
How to Position a Table at The Center of Div Horizontally & Vertically