Create a centrally located search bar in the header with a stylish button using Bootstrap 5

Struggling with aligning elements on my simple search page. The goal is to center the company name above the search input and have buttons centered under it with some spacing in between.

https://i.stack.imgur.com/FdadF.png

<div class="backgroundWhite">
<div class="row">
    <div class="col-md-5 mx-auto align-content-center">
        <h3 class="mt-lg-5 align-content-center">Company Name</h3>
        <div class="input-group">
            <input class="form-control py-2 rounded-pill mr-1 pr-5" type="search" placeholder="Search for your organization" id="example-search-input">
            <span class="input-group-append">
                <button class="btn rounded-pill border-0 ms-n5" type="button">
                    <i class="fa fa-search"></i>
                </button>
            </span>
        </div>
        <a asp-page="Detail" class="btn btn-success mr-1 mb-2 w-25 mt-3">
            Players
        </a>
        <a asp-page="../Checkout/Index" class="btn btn-checkout mr-1 mb-2 w-25 mt-3">
            Organizers
        </a>
    </div>
</div>

Any assistance would be greatly appreciated

htmlcssbootstrap-5

Answer №1

Here's a tip for you:

I made a simple change to the code below

align-content-center to text-center

 <div class="col-md-5 mx-auto align-content-center">
 to 
 <div class="col-md-5 mx-auto text-center">

 and

 <h3 class="mt-lg-5 align-content-center">Company Name</h3>
 to
 <h3 class="mt-lg-5">Company Name</h3>


<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap 5 Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="a1c3ceced5d2d5d3c0d1e1948f928f93">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="dfbdb0b0abacabadbeaf9feaf1ecf1ed">[email protected]</a>/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>

<div class="backgroundWhite">
<div class="row">
    <div class="col-md-5 mx-auto text-center">
        <h3 class="mt-lg-5">Company Name</h3>
        <div class="input-group">
            <input class="form-control py-2 rounded-pill mr-1 pr-5" type="search" placeholder="Search for your organization" id="example-search-input">
            <span class="input-group-append">
                <button class="btn rounded-pill border-0 ms-n5" type="button">
                    <i class="fa fa-search"></i>
                </button>
            </span>
        </div>
        <a asp-page="Detail" class="btn btn-success mr-1 mb-2 w-25 mt-3">
            Players
        </a>
        <a asp-page="../Checkout/Index" class="btn btn-checkout btn-warning mr-1 mb-2 w-25 mt-3">
            Organizers
        </a>
    </div>
</div>

</body>
</html>

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

Utilizing jQuery to effortlessly generate parent and child elements in a single function call

Is it possible to create multiple elements with the same function? Currently, I am able to split a number of list items like this: <ul class="dropdown-menu"> <li>Stuff</li> <li>Stuff</li> <li>Stuff</li> ...

jqueryhtml

Building a Dynamic Web Widget with the Perfect Blend of HTML, JS,

While developing a javascript-based web widget, I am aiming to steer clear of using iframes and avoid relying on the page's CSS. It is infeasible for me to utilize custom CSS, as it defeats the purpose, and iframe integration would not present a user- ...

javascripthtmlcsstwitter-bootstrapweb-widget

The styles applied to the Angular 5 Component host element are not being reflected correctly in jsPlumb

As a beginner in Angular >2 development, I am excited to build my first application from scratch. One of the features I'm trying to implement is drawing flow charts using jsPlumb. However, I have encountered an issue where the connectors are not being ...

javascriptcssangularjsplumb

Using a `right: 0` value will not be effective when using absolute positioning

Currently, I am in the process of developing a website utilizing Bootstrap 3.3.6. After going through a tutorial on how to create a responsive banner slider, I found this resource helpful: http://www.jqueryscript.net/slider/Full-Width-Responsive-Carousel- ...

csstwitter-bootstrap-3

Utilizing Tailwind CSS for creating a responsive layout on a Next.js application

I'm just getting started with Tailwind CSS and I decided to build the user interface of my nextjs application using a "mobile first" approach like everyone suggests. I got the flex direction and background color working perfectly on mobile screens, so ...

htmlcssreactjsnext.jstailwind-css

"Fixing the position of a div on the Samsung Galaxy S8 navigation bar to

Here is the HTML code I am working with: <div class="app-bar"> <a href="#'>icon</a> <a href="#'>icon</a> <a href="#'>icon</a> <a href="#'>icon</a> </div>' ...

androidcssios7

Transfer information from .gs (Google Apps Script) to a variable inside a <script> tag in an HTML document

[ {"id":1,"label":"Node 2"}, {"id":2,"label":"Node 3"}, {"id":3,"label":"Node 4"}, {"id":4,"label":"Node 5"} ] Hello there! The function getArray() in the code snippet above is returning the specified string ↑. I need help connecting this data w ...

javascripthtmlgoogle-apps-scriptgoogle-sheets

Having trouble triggering the onclick event on a dynamically created table using JavaScript

I am facing an issue with adding a table programmatically that has an onclick event triggering a specific JavaScript function using the row's id for editing purposes. Unfortunately, the function is not being called as expected. I have attempted to mod ...

javascriptjqueryhtml

Challenges with line height in IE when adjusting font size in textarea

I'm facing an issue with adjusting the font size in a textarea using JavaScript. While it works perfectly in Firefox, there are some problems in IE. Specifically, the line-height does not change accordingly. This results in gaps between lines when the ...

javascriptfont-sizecss

Initiating an audio call exclusively via SimpleWebRTC

I'm currently utilizing a jQuery plugin for WebRTC found here. My goal is to initiate an audio call only, but I am struggling to find a function within the plugin that allows for this. The code snippet I am using with autoRequestMedia set to false is ...

javascriptjqueryhtmlwebrtchtml5-audio

Is it possible to resize the background-image style?

When using the regular img tag in HTML, you can specify the width and height, and the browser will scale the image. If the dimensions are not too different from the original, the result is usually decent. For example, you can scale the avatar image to 32x ...

htmlcss

Unable to dynamically display an HTML5 video using JavaScript

I'm facing an issue with displaying videos in a modal dynamically. Here's the scenario: +------------+---------+ | Name | View | +------------+---------+ | 1.mp4 | X | | 2.mp4 | X | +------------+---------+ The X ...

javascripthtmlvideo

Is there a way to bypass the initial result when using document.querySelectorAll?

this is my own unique html content <div class="content-body"> <table style="text-align:center;" class="table table-bordered"> <tbody> <tr> <th>Text Line</th> </tr> <tr> <td> ...

javascripthtmlcss

Attempting to extract the text within a table row cell by clicking on the cell directly following it

I am trying to extract the data from a table row when I click on a specific div within that row HTML: <td class="ms-cellstyle ms-vb2">10</td> <td class="ms-cellstyle ms-vb2"> <div class="ms-chkmark-container"> <div ...

javascriptjqueryhtmlcsstraversal

Version 1 of Vue.js is not compatible with Ajax-loaded HTML files

Currently, I am encountering a minor issue with loading content through ajax requests. I am in the process of developing a web application where everything is located on one page without any reloading. To achieve this, I have split the content into separa ...

javascripthtmlajaxvue.jsaxios

Managing the display of numerous ngFor components

If you're interested in learning more about the features I will include, here's a brief overview. I plan to have a project section with cards displayed for each project, all populated from a JSON file. When users click on a card on the website, a ...

javascripthtmlangulartypescriptangular6

Is there a way to verify if a checkbox has been checked?

Having trouble with this code: if($('#primayins').prop('checked')) { $("#tx_nm0x0_pricingplan").val(1); } else { $("#tx_nm0x0_pricingplan").val(2); } It keeps returning false consistently ...

javajavascriptjqueryhtml

Sending a Boolean value from a child component to its parent state in React JS

Within my application, I have implemented a login feature in the navbar component. However, I am encountering an issue with updating a variable in the main component upon successful login. Although I have successfully managed to set up the login functional ...

javascriptcssreactjsjsx

Some elements in the DOM appear to not be rendering even though they are present in the HTML source code

As a newcomer to web development, I have stumbled upon a perplexing issue. In my usage of d3.js (specifically the script found here), I have been attempting to incorporate additional features. I modified my JavaScript code to include a simple <p> ele ...

javascripthtmld3.js

Ways to make a div grow to occupy the leftover width without resorting to the overflow: hidden technique

<div id="container" style="width:100%;"> <div id="left1" style="float:left; width:100px;">float left</div> <div id="left2" style="float:left; width:100px;">float left</div> <div id="remaining">Remaining width&l ...

htmlcssexpand