Tips for inserting an HTML form within a jumbotron using Bootstrap 4.1

I am currently using Twitter-Bootstrap 4.1 to design a website. One of the components I have is a jumbotron that features a background image covering 75% of the screen at the top. Below this, there are text blocks arranged in a specific manner as shown in this code snippet here.

However, I am facing some issues with this layout. The "Search" button appears to be protruding out of the container/card element on certain screens. Additionally, when viewed on smaller devices like tablets or phones, the form starts overlapping with the text below.

Here is a screenshot clearly illustrating how the search form is not properly centered and the button extends out. https://i.sstatic.net/Pd3iq.png

Another screenshot depicts the problem of the search form overlapping with the text beneath it.

https://i.sstatic.net/LZon4.png

UPDATE:

I have made changes to the code to address the issues mentioned above. However, now the search box has shifted to the top of the jumbotron instead of remaining in the middle. View updated code here

https://i.sstatic.net/k98AH.png

htmlcsstwitter-bootstrapbootstrap-4

Answer №1

The search button appears to be sticking out because it is larger than its container, the col-lg-1. To fix the overlapping on mobile/tablet screens, you will need to override or remove the h-75 class from the following element: 

jumbotron jumbotron-fluid intro-jumbotron h-75 clearfix
.

I have made some adjustments to your HTML code:

<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>

I rearranged the layout by moving min and max price fields into a col-3. This change allows the search button wrapper to have a col-2 class.

For the update, here is the solution:
Add the class d-flex to the jumbotron, remove d-flex from its child elements, 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: Instead of using pl-0 pr-0, you can simplify it to px-0 for zero padding on the x-axis.

Answer №2

It's recommended to utilize min-height:75% instead of other options

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

When working with the row, replace pr-0 pl-0 with just no-gutters...

<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>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Tips for resizing an image to perfectly fit on a compact HTML5 canvas without sacrificing its quality

I need assistance with my code. I'm trying to draw an image on the canvas while maintaining its quality. const canvas = document.getElementById("canvas"); const context = canvas.getContext("2d"); canvas.width = 360px; canvas.height = 360px; const img ...

javascripthtmlcsscanvas

The data within my <ui:define name="content"> element is not displaying on the JSF view

I'm currently working on a project that involves JSF/Facelets and a Style Sheet for styling my JSF view. I'm trying to add some graphical components like "h:inputText" and "h:commandButton" tags to my view XHTML, but for some reason, they are not ...

htmlcssjsffacelets

Dispatching correspondence with attached documents and photographs

Is there a way to send an email with an HTML file chosen by the user using (Fileupload), which contains images that I want to embed in the body? I am looking for a method to directly embed images in the body of the email. ...

asp.nethtmlimageemailfile-upload

Issue with HTML5 video not displaying poster image after using .load() method

I am facing an issue with my video implementation where the poster image is not returning after exiting full screen mode. I have a video with overlay content that requests full screen when the user clicks a custom play button. When the user exits full scre ...

javascriptjqueryhtmlvideohtml5-video

What causes an image's size to change when it floats within the parent container?

There seems to be a height mismatch issue between the container and the image inside it when the parent is floated, but not the child. However, when both are given the float property, the height matches perfectly. Why is this? <div class="parent">&l ...

htmlcss

Struggling with integrating Bootstrap into a Vue.js application due to a compatibility problem with

I am facing difficulties importing Bootstrap features such as modal in a Vue component that uses installed packages like bootstrap, popper.js, and jquery. I am working with nuxtjs for this project. Unfortunately, when trying to import these features, I en ...

jqueryvue.jswebpackbootstrap-4nuxt.js

How can I feature an image at the top of the page with large 3 and jQuery in FireFox?

I am interested in showcasing a single image at the forefront of the page when it is selected. While there are numerous plug-ins that offer this feature, many come with unnecessary extras like galleries, video support, and thumbnails which I do not requir ...

javascriptjqueryhtmlcssfirefox

Creating a fixed-item navbar for sm-md sizes in Bootstrap 4: Step-by-step guide

I'm looking to create a navigation bar that maintains its proportions in small and medium column sizes. I am inspired by the navbar design on nm.org and want to achieve a similar fixed proportion no matter the size of the viewport. I have experimente ...

cssbootstrap-4

Navigate to the element and retrieve a null offset

Currently, I am attempting to retrieve an element's ID from a select box and then scroll to that specific element using the following code snippet: // move to services $(function () { $("select.jump").change(function() { var selected = $( ...

jqueryhtml

Preventing the <img> element from being selectable and draggable simultaneously is effective in Firefox, but not in Chrome or Opera

I have a picture that I want to render both unselectable and undraggable. (This is not an attempt to prevent users from copying) To accomplish this, I can: Add a .noselect class to the <img> tag. As recommended here. Disable pointer-events. (I am ...

htmlcssgoogle-chromefirefoxopera

The issue encountered when trying to load Javascript through PHP

As a beginner, please be patient with me. I am attempting to dynamically load this JavaScript easy slider into a div on my index page using the following code ... switch($_GET['page']) { case '#YELLOW' : $page = ' <div id ...

phpjavascriptcssajax

How to position two divs next to each other using CSS with just one adjustment

Is it possible to position two divs side by side, with one of them moving continuously up and down while containing an image? I attempted the following code: <div> <div style="margin:30px;width:100px;height:250px;position:relative;float:left; ...

htmlcssmove

Incorporate JavaScript values into an HTML form to submit them to PHP

How can I successfully POST the values of 'vkey' and 'gene+varient' when submitting a form in HTML? The values are retrieved using JS code and displayed correctly on the form, but are not being sent upon submission. <form action="ac ...

javascriptphphtml

Analyzing comma-separated values file and transforming the information into a modifiable format

Need advice on parsing CSV and using foreach loop.. <?php //output Array ( [0] => Array ( [company] => A Company [address] => A Address [telephone] => A Telephone ) [1] => Array ( ...

phphtmlcsvforeach

I am having trouble getting two similar Javascript codes to function simultaneously

Using a common JavaScript code, I am able to display a div when a certain value is selected. http://jsfiddle.net/FvMYz/ $(function() { $('#craft').change(function(){ $('.colors').hide(); $('#' + $(this ...

javascriptjqueryhtmlcss

Trouble with Bootstrap card dimensions: Height and width not functioning correctly

I specified a height and width for all card images, but the heights are inconsistent with one being too large and another too small. I want each card to have the same height and width. How can I achieve this? Here is what I tried. .card { height: 50%; ...

htmlcssbootstrap-4

Functionality fails to load correctly post completion of AJAX request

After successfully implementing an API call to OS Maps (UK map builder) as per their documentation, I encountered a problem when trying to display a map based on a custom field name using ACF (Advanced Custom Fields) in WordPress. The issue arises because ...

javascripthtmlajaxadvanced-custom-fields

Tips for toggling the radio button value to either checked or unchecked state

<input type="radio" name="imgsel" value="" checked /> I am looking to have a radio button that is initially checked with a value of 'present'. When the button is unchecked, I want the value to change to &apos ...

javascripthtml

Optimizing CSS for printing by eliminating unnecessary white space with media queries

Appreciate your assistance! I'm currently working on a solution to print a specific div using CSS Media queries. When the user clicks on print, I want to hide all other elements except for the body div they chose. However, I'm facing an issue whe ...

javascripthtmlcssprintingmedia-queries

Guide on making a JavaScript button with both "light and dark" modes

Currently, I am attempting to change the color scheme of the page by adjusting the :root variables using a function called changeBackgrondColor(). This function is then assigned to the fontAwesome moon "button". However, when I click on the moon, the pag ...

javascripthtmlcss