https://i.sstatic.net/2OHp2.png
This is the code I'm currently using:
<body class="bg-light">
<div class="row justify-content-center mt-3">
<div class="col-6">
<input class="form-control" list='datalistOptions' placeholder="Where would you like to travel?">
</div>
<div class="col-1">
<button class="btn btn-primary" id="btn">Search</button>
</div>
</div>
</body>
Include align-items-center and min-vh-100 in your row
I found the solution that worked for me:
<body class="bg-light">
<div class="row container-fluid justify-content-center position-absolute top-50 start-50 translate-middle">
<div class="col-6">
<input class="form-control" list='datalistOptions' placeholder="Where are you planning to go?">
</div>
<div class="col-1">
<button class="btn btn-primary" id="btn">Search</button>
</div>
</div>
</body>
To achieve the desired layout, make sure to include both align-items-center and min-vh-100 classes in your row. Here is an example:
<body class="bg-light">
<div class="row justify-content-center align-items-center min-vh-100 mt-3">
<div class="col-6">
<input class="form-control" list='datalistOptions' placeholder="Where would you like to travel?">
</div>
<div class="col-1">
<button class="btn btn-primary" id="btn">Search</button>
</div>
</div>
</body>
There are several methods that can be used to achieve this. Let's explore how it's done in CSS and compare it with the utility classes in Bootstrap.
Assuming we have the following HTML structure:
<div class="parent">
<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</div>
</div>
Using CSS Flex for the solution:
.parent {
display: flex;
/* Center Horizontally */
justify-content: center;
/* Center Vertically */
align-items: center;
}
Using Bootstrap Flex Utilities for the solution:
<div class="d-flex justify-content-center align-items-center">
<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</div>
</div>
Using CSS Grid for the solution:
.parent {
display: grid;
/* Center both vertically and horizontally */
place-items: center;
}
Utilizing Bootstrap Grid Utilities for the solution:
Unfortunately, Bootstrap does not have a class forplace-items-center. Therefore, inline styles can be used.
<div class="d-grid" style="place-items:center">
<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</div>
</div>
Keep in mind that in order to center an element in the middle of the screen, a height must be defined for the parent element. If a block level element like div is used, the width is already set to 100%. However, the height is determined by the content. To achieve centering in the screenshot provided, the parent element should have vh-100 (View Height 100) to expand to full screen height.
This button is functioning properly in desktop view, but in mobile view the button remains pressed down. :root { --green: #4285f4; --black: rgba(9, 13, 25, 0.752); --box-shadow: .4rem .4rem 1rem #ccc, -.4rem -.4rem 1rem #fff; --box-shadow-inset: ...
I am facing an issue where my "vertical rule" is sticking to the bottom of the container when placed to the right of the image. <div> <div style="display:inline-block; width:210px;"> <img src="res/img/PlayBtn.png" style="top:- ...
Recently, I've been experimenting with a jquery plugin called Tooltipster by inserting some HTML into the tip with an href link. The problem arises when I try to add a class to the href and fire a jquery function upon clicking it. No matter how much I ...
Having a WordPress site with the Divi theme, I encounter an issue where the menu on the left-hand side is being displayed above the page content when the screen width exceeds around 1440 pixels. This problem persists on every page that contains this colum ...
I encountered an error while running my jasmine test case in node. The error message says that TypeError: $(...).modal is not a function. This error pertains to a modal dialog, which is essentially a bootstrap component. To address this issue, I attempted ...
I've been working with a table where I can dynamically add rows using the clone function, as shown below: new_row = $(table_id+' tbody > tr:last').clone(true).removeAttr('id').insertAfter(table_id+' tbody > tr:last&apos ...
I've been working on the frontend of my chat web app and recently discovered flexbox. I'm struggling to center two elements with a blue background below the "CHAT" heading, aligned with two green elements like a black square. My challenge lies in ...
I am attempting to customize the styles of my application using bootstrap. Upon inspecting the HTML in Chrome Devtools, I found the following rendered code: <div data-v-256a5f3d="" data-v-7bf4ea52="" class="row bg-gray-200 bord ...
Hey there! I'm looking to send data to PHP, receive the PHP result, and then display the result in an HTML div tag. Could you provide me with a sample code snippet for this? Thank you in advance and please excuse any mistakes in my English. ...
When it comes to single-input forms in Bootstrap 4, a convenient method for incorporating font-awesome icons is by utilizing the input-group-addon class: <div class="input-group"> <span class="input-group-addon"> <i class="fa fa ...
My task is to create a large LCD wall application similar to the one featured in this advertisement. The requirements include the ability for the wall to display full-screen videos or divide the screen into sections to show multiple videos or images. I a ...
I am encountering an issue while trying to play a video on my website. The video is uploaded through multer using node.js and in the express framework. The file gets inserted into the database and assigned a specific folder with a filename like 1b47c24b20c ...
I'm currently attempting to access a variable from another HTML file using JS. Specifically, I have a file (file1.htm) that opens a dialog box, and I want to send the information of the selected file to another file (file2.htm) in order to modify a v ...
I am looking to implement a functionality on my website that disables the right click menu. Currently, I have achieved this through the following code: document.addEventListener("contextmenu", function(e){e.preventDefault(); }, false); Now, I am wonderin ...
When I access Firefox version 17.0.1 and request document.body.getBoundingClientRect().top; on a simple site with no CSS styling applied, it returns an incorrect value. Instead of the expected 8, which is the default for the browser, it shows 21.4. However ...
Is it acceptable to utilize negative values in CSS? For instance: margin:-11px 20px -18px 0px; OR Is there a prevailing guideline that prohibits the use of negative values? ...
When using $(".className"), all elements with the class .className are returned. How can I target a specific element by its index number to apply styling only to that element? <html> <head> <script src="https://ajax.googleapis.com/ajax ...
I am facing an issue with a query in express.js. Citta_p and Citta_a are two arrays, and I need my query to return all the IDs for cities. However, it seems that only the last value is being returned, as if my cycle starts from var i = 1 and skips the valu ...
I have a code snippet that I need help with. You can view the code here. $("#filters :checkbox").change(function() { $(".listing-details > div").hide(); $("#filters :checkbox:checked").each(function() { $(".listing-details ." + $(this). ...
<script type="text/javascript"> $(document).ready(function () { var top = $('#rt_outer').offset().top - parseFloat($('#rt_outer').css('marginTop').replace(/auto/, 0)); $(window).scroll(function (event) { // det ...