Twitter Bootstrap Question posted in

How to add an html form in the middle of jumbotron using bootstrap 4.1?-Twitter bootstrap

I am trying to use twitter-Bootstrap 4.1 to create a website. I have a jumbotron with a background image that takes 75% of the screen on the top. At the bottom, I have text blocks as demonstrated in the following code snippet https://www.codeply.com/go/NnUx8ZDmyz

However, I have the following problems with it. On my screen, the “Search” button is sticking out of the container/card (transparent/gray block). Also when you change the viewport to tablet/ phone size, it gets worst as the form overlaps the text below.

Here is a screenshot of how the form is not centered and the button is sticking out.
enter image description here

Here is a screenshot of how the search form is overlapping with the text below.

enter image description here

UPDATED

Here is a code snippet where the issues above are fixed. However, the search box is now shifted to the top of the jumbotron instead of the middle.
https://www.codeply.com/go/LjMrId9guW

enter image description here

Tags:

2

Answers


  1. 0

    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>

    I moved the min and max price into a col-3. Now the search button wrapper can have a col-2 class.

    The solution for the update:
    Add to the jumbotron d-flex, remove d-flex from its child and add align-self-center.

     <div class="jumbotron jumbotron-fluid intro-jumbotron mh-75 clearfix d-flex" id="images_show_case">
 <div class="container h-100 align-self-center">

    Tip: istead of pl-0 pr-0 you an use: px-0 (padding on x axis = 0)

    Login or Signup to reply.
  2. 0

    You should use min-height:75% instead

    .mh-75 {
    min-height: 75%;
}

    Instead of using pr-0 pl-0 just use no-gutters on the row…

    <div class="jumbotron jumbotron-fluid intro-jumbotron mh-75 clearfix" id="images_show_case">
    <div class="container h-100 d-flex">
        <div class="my-auto">
            <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 no-gutters">
                            <div class="col-lg-3">
                                <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-2">
                                <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-2">
                                <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 class="col-lg-1">
                                <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">
                                <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">

                                <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-1 text-left">
                                <button type="submit" value="Search" class="btn btn-primary btn-lg">
                                    <span class="fas fa-filter"></span> Search
                                </button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

    https://www.codeply.com/go/avwMFtM5Cd

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search