Having trouble positioning items correctly in Bootstrap 4.5?

My attempt to align two elements in HTML using Bootstrap is not yielding the desired outcome. Here is the code I am currently using:

<div class="row align-items-center">

  <div class="col-auto">
    <h6>Alignment Testing</h6>
  </div>

  <div class="col-auto ml-auto">
    <div class="input-group">
      <span class="input-group-text" id="basic-addon1"><i class="bi bi-search"></i></span>
      <input type="text" class="form-control" placeholder="Alignment Testing" aria-label="Username" aria-describedby="basic-addon1">
    </div>
  </div>

</div>

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="c6a4a9a9b2b5b2b4a7b686f2e8f3e8f5">[email protected]</a>/dist/css/bootstrap.min.css" >

Here is an image depicting the issue.

Changing the class from "items-align-center" to "items-align-start/end" results in a slight position change of the text (h6). Interestingly, when I used "items-align-center" in other sections, it worked perfectly. Could this be related to the height of the div as some discussions suggest? I have already attempted to set a height with no success in aligning to the center.

Any thoughts or suggestions would be greatly appreciated.

htmlcssbootstrap-4

Answer №1

When working with your <h6> element, remember that setting mb-0 will adjust the margin bottom to 8px.

  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="27454848535453554657671309110915">[email protected]</a>/dist/css/bootstrap.min.css">
  <script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="e48e959181969da4d7cad2cad0">[email protected]</a>/dist/jquery.slim.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="78081708081d0a56120b384956494e5649">[email protected]</a>/dist/umd/popper.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="086a67677c7b7b7a6968483c263e263a">[email protected]</a>/dist/js/bootstrap.bundle.min.js"></script>
<div class="row align-items-center">
    <div class="col-auto">
        <h6 class="mb-0">Alignment Testing</h6>
    </div>            
    <div class="col-auto ml-auto">
        <div class="input-group">
            <span class="input-group-text" id="basic-addon1"><i class="bi bi-search"></i></span>
            <input type="text" class="form-control" placeholder="Alignment Testing" aria-label="Username" aria-describedby="basic-addon1">
        </div>
    </div>
</div>

Answer №2

Here's an example of what you may want to achieve: https://codepen.io/lynxSven/pen/qBQWVXZ

<div class="container">
  <div class="row ">

    <div class="col-12 text-center">
      <h6>Alignment Testing</h6>
    </div>

  </div>
</div>

Using col-auto will make the box adjust to its content. To align text within, you need to provide space.

align-items-center is suitable for flex boxes (https://getbootstrap.com/docs/4.0/utilities/flex/)

Modifying the alignment of two items: If you want columns to take the space they need, you can simply use class="col". They will adjust their width automatically.

<div class="container">
  <div class="row ">

    <div class="col text-center">
      <h6>Alignment Testing</h6>
    </div>
    <div class="col text-center" >
      second item

  </div>
</div>

If you have 3 elements with class="col" in the same row, each will take up 33% width. For 2 elements, one with class="col" and the other with class="col-1", they will behave like "col-11".

Answer №3

Implementing Bootstrap classes efficiently:

<div class="container">
    <div class="row ">
      <div class="col-12 d-flex align-items-center">
        <h6 class="mb-0">Alignment Testing</h6>
        <div class="input-group ml-auto">
          <span class="input-group-text" id="basic-addon1"><i class="bi bi-search"></i></span>
          <input type="text" class="form-control" placeholder="Alignment Testing" aria-label="Username" aria-describedby="basic-addon1">
      </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

Lately, I've been working on a practice website I'm developing, and I'm facing some issues with my hyperlinks

Get the omisphere download I created this hyperlink because my previous attempts didn't work, but unfortunately, this one still isn't functioning properly. Is it possible that the issue is with my CSS? ...

htmlcss

Adjust text to fit within a specified height container automatically

Is there a way to make text resize automatically based on the height and width of its container? I've looked at similar questions but none seem to provide the right solution for me. I tried using fitText, but it doesn't take the container's ...

htmljquerycssbootstrap-5fittextjs

How to align 3 buttons in a div using CSS

My design has 3 buttons that I want to always remain centered on the page, but they seem to skew off-center as the window widens (as shown in the image). What HTML/CSS code can I use to ensure that these buttons are perfectly centralized at all times? It ...

htmlcss

Show the selected checkbox options upon clicking the submit button

Having trouble setting up a filter? I need to create a feature where checked values from checkboxes are displayed in a specific div after submitting. The display should include a 'Clear All' button and individual 'X' buttons to remove e ...

javascriptjquerycsscheckbox

Leverage an HTML table to serve as a data source for populating a Kendo UI template

My latest creation is a unique service that generates HTML tables based on request parameters. The current implementation returns the data as an HTML page in string format. Here's a sample output: <!DOCTYPE html> <html> <head> ...

htmltelerikkendo-uidatasource

Shorten a data point in JSON code

I'm currently in the process of developing a stock widget that utilizes JSON to retrieve data from the Yahoo API/YQL console. I am specifically working with values extracted from the key ChangePercentRealtime, however, the values are longer than what ...

javascriptjqueryhtmljson

Skewed div with a stylish background image

Struggling with an issue here. I've managed to skew my div just right, but now I'm trying to get the image to fit without tiling. If anyone can offer some assistance, that would be greatly appreciated. This is what I'm aiming for: https://i ...

htmlcss

Angular: Troubleshooting blank pages in HTML - What's causing it?

This is the content of my heroes component: <!--The content below is only a placeholder and can be replaced.--> <div style="text-align:center"> <h1> <h2>{{hero.name}} Details</h2> <div><s ...

htmlangulartypescriptangular-componentsangular-module

Eliminate screen flickering during initial page load

I've been developing a static website using NuxtJS where users can choose between dark mode and default CSS media query selectors. Here is the code snippet for achieving this: <template> <div class="container"> <vertical-nav /> ...

javascriptcssvue.jsdomnuxt.js

Information flows from the Bootstrap 4 template

When viewed on a mobile device, the content extends beyond the page and a horizontal scrollbar appears. You can view my page by clicking this link. <div class="custom_content col-md-12"> <div class="container"> <div class="row"> ...

htmlcssbootstrap-4flexbox

Ways to reduce the size of a Select box when the option text is too lengthy

How can I reduce the size of the select box by splitting the lines of the options I attempted to modify the CSS with: select { width:100px; } However, only the select element was affected. The options remained the same size. My goal is to have ...

htmlcss

Creating personalized static HTML cards with PHP Mirror API for Google Glass

Looking to integrate an HTML formatted card into Google Glass timeline using the Mirror API. Utilizing the PHP PHP Mirror Client API, which accepts a message and image as parameters, displaying the image in the background similar to this example: insert ...

phphtmlgoogle-glassgoogle-mirror-apiaero-glass

Adding a div via an Ajax call is only successful during the initial page load

Currently, I am utilizing a combination of YQL and jQuery to retrieve content from a distant page. While I am able to successfully load the content during the initial page load, I encounter an issue when attempting to return to the same page after navigati ...

jqueryhtmlajaxdomdocument

Is it possible to send two parameters to a JavaScript function using HTML?

Seeking help to develop an .html page where two string inputs are passed as parameters to a .js function, which then returns the longer of the two strings based on their lengths. Initially, I successfully created a functional .js script in VS CODE. Here i ...

javascripthtml

Alignment of badge-pill and h2 in a horizontal position

I'm currently working on mastering Bootstrap. My goal is to have a prominent heading followed by three small badge-pills that are horizontally centered on the page. However, I've run into a couple of issues: 1- The badge-pills are appearing stac ...

csshtmlbootstrap-4

What could be causing my Ionic button to not initialize in the expected state while using ngIf with a boolean property connected to an Ionic checkbox?

I'm currently in the process of setting up a list of ingredients with checkboxes and conditional buttons, but I'm facing some challenges with the default state. Ideally, I only want the button to be visible when the checkbox is unchecked so that ...

javascripthtmlangularionic-frameworkangular-ng-if

What could be causing the issue of dynamic meta open graph tags not functioning properly?

For my current project, I am utilizing Strapi as the CMS and Next.js. My task is to generate meta open graph tags dynamically. However, after deployment, when I attempt to share my website link on social media platforms such as Facebook or WhatsApp, the ti ...

htmlnext.jsmeta-tags

There appears to be an issue with reading the property 'toLowerCase' of an undefined element, and I'm having trouble identifying the error

The variables I have initialized (globally): var audio; var LANGUAGE; var audioArray; var MEDIAARRAY; var WORDS; var SOUNDARRAY; This specific line is causing the error: var audioId = MEDIAARRAY.audio.lowercase.indexOf(exObject['exerciseGetWordInpu ...

javascriptjqueryhtmlajax

Utilize jQuery to toggle the visibility of a div depending on the numerical quantity input

I would greatly appreciate any assistance with this request, please. Here is the input that I have: <input onchange="UpdateItemQuantity(this.value,1284349,0,10352185,2579246,'','AU'); return false;" type="number" class="form-contro ...

jqueryhtmlcss

Click on another part of the page to reveal a dropdown menu

I am seeking a way to trigger the opening of this dropdown select not by directly clicking on its position, but rather by clicking on another <span>. Displayed below is the dropdown menu: <div class="styled-select"> <span id="camDurati ...

javascriptjqueryhtmlcssdrop-down-menu