Experiencing difficulties with centering a button within a form using Bootstrap

Running into an issue with aligning a button to the right in my school project.

This HTML project is utilizing bootstrap for styling.

Here's an image showing the current alignment of the button: (https://i.sstatic.net/I9I28.jpg)

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="f3919c9c878087819283b3c7ddc3ddc3">[email protected]</a>/dist/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<div class="dropdown">
  
  <button
    class="btn btn-secondary dropdown-toggle"
    type="button"
    id="dropdownMenuButton"
    data-toggle="dropdown"
    aria-haspopup="true"
    aria-expanded="false">Dropdown button</button>
    
  <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
    <div class="form-check">
      <input class="form-check-input" type="checkbox" value="" id="defaultCheck1">
      <label class="form-check-label" for="defaultCheck1">Option 1</label>
    </div>
    <div class="form-check">
      <input class="form-check-input" type="checkbox" value="" id="defaultCheck2">
      <label class="form-check-label" for="defaultCheck2">Option 2</label>
    </div>
    <div class="form-check">
      <input class="form-check-input" type="checkbox" value="" id="defaultCheck3">
      <label class="form-check-label" for="defaultCheck3">Option 3</label>
    </div>
  </div>
  
  <button class="btn btn-dark me-5 mx-2 ml-auto" type="submit">Login</button>
  
  </form> <!-- this is closing a form that wasn't opened anywhere -->
  
</div>

htmlcssbootstrap-4

Answer №1

Make sure to include the "d-flex justify-content-between" class in the main div with the class "dropdown".

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="35687979f672757472637353055b545b">[email protected]</a>/dist/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="dropdown d-flex justify-content-between">
  
  <button
    class="btn btn-secondary dropdown-toggle"
    type="button"
    id="dropdownMenuButton"
    data-toggle="dropdown"
    aria-haspopup="true"
    aria-expanded="false">Dropdown button</button>
    
  <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
    <div class="form-check">
      <input class="form-check-input" type="checkbox" value="" id="defaultCheck1">
      <label class="form-check-label" for="defaultCheck1">Option 1</label>
    </div>
    <div class="form-check">
      <input class="form-check-input" type="checkbox" value="" id="defaultCheck2">
      <label class="form-check-label" for="defaultCheck2">Option 2</label>
    </div>
    <div class="form-check">
      <input class="form-check-input" type="checkbox" value="" id="defaultCheck3">
      <label class="form-check-label" for="defaultCheck3">Option 3</label>
    </div>
  </div>
  
  <button class="btn btn-dark me-5 mx-2 ml-auto" type="submit">Login</button>
  
  </form> <!-- this is closing a form that wasn't opened anywhere -->
  
</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 modifying a particular element within a class?

I am seeking guidance on how to modify a specific class attribute in CSS/JS/JQuery when hovering over a different element. Here is an example: <h1 class="result">Lorium</h1> <h1 class="result">Ipsum</h1> <h1 class="result">Do ...

javascriptjqueryhtmlcss

Is it feasible to create a CSS selector that targets elements that are not the first child?

Is it feasible to use CSS to select all child elements except for the first child? ...

csscss-selectorschildren

Transferring data obtained from an API in node.js to display in an HTML table

I'm currently diving into node.js and development of a web application aimed at managing stock market portfolios for investors. One challenge I'm facing is figuring out how to transfer the data collected from an API to a specific table cell in HT ...

javascripthtmlnode.jsapiweb-applications

What is the mechanism behind image pasting in Firefox's imgur integration?

Start by launching an image editing software and make a copy of any desired image. Avoid copying directly from a web browser as I will explain the reason later on. Navigate to "http://imgur.com" using Firefox. To paste the copied image, simply press Ctrl+V ...

javascripthtmlfirefoxclipboardimgur

Troubleshooting problems with encoding in Python Selenium's get_attribute method

Currently, I am utilizing Selenium with Python to crawl the drop-down menu of this particular page. By employing the find_elements_by_css_selector function, I have successfully obtained all the data from the second drop-down menu. However, when attempting ...

pythonhtmlseleniumweb-crawler

Place the div absolutely on top of the Flash content

Can a <div /> be absolutely positioned over a Flash banner without including wmode="transparent" in the banner? I am trying to display a lightbox above my ads, but I cannot make changes to the banners since they are provided by a third party. Edit: ...

javascriptcssflashinternet-explorerxhtml

Issue with width loss when using Bootstrap 4 aligning center self in IE11

I'm having trouble centering my .row element along the y-axis in IE11. Despite my efforts, it doesn't seem to be working. Here is my HTML: <section class="home-section"> <div class="container home-section-inner d-flex"> ...

twitter-bootstrapinternet-explorerflexboxbootstrap-4internet-explorer-11

What is the quickest and most effective method for toggling more than 10,000 checkboxes using Javascript/jQuery?

I am facing a challenge with a div that contains over 10000 checkboxes. Due to technical limitations, I have no choice but to work with this large number of checkboxes. This is not related to any academic task. <div class="well well-sm" style="min-hei ...

javascriptjqueryhtmldomoptimization

Finding a predecessor with Selenide through tag and class identification

Trying to find the ancestor element using Selenide library on a website. The ancestor element is <div class="BorderGrid-cell" ...>. The .closest(".BorderGrid-cell") method works well. However, the .closest("div.BorderGrid-ce ...

cssselenide

Ways to determine if a list is empty with thymeleaf?

<div th:if="${tblUserList != null}"> --content-- </div> I'm having some trouble with the thymeleaf code provided above. The variable tblUserList is a list, and I need to check if it is empty instead of just checking if it is null. How ca ...

htmlthymeleaf

Tips for importing extensions with Rselenium

I could use some assistance in understanding how to activate a chrome extension using RSelenium. The extensions are visible in the browser tabs but are not automatically loaded when working with RSelenium. https://i.sstatic.net/QKqVg.png ...

htmlrgoogle-chromeselenium-webdriverrselenium

Seamless flow from one image to the next

I'm working on a project with a slideshow, but I've noticed that when it transitions between images, it can be quite abrupt. I'd like to find a way for it to change smoothly from one image to the next. <div> <img class="mySli ...

javascripthtmljquerycss

What is the most efficient method for saving database rows in HTML5 web storage without using the Web SQL database?

Seeking advice on the most efficient method to store data from a database into HTML5 Web Storage. Given that HTML5 Web SQL Database is deprecated, we are exploring alternative options to evaluate the size of our stored data accurately. Your suggestions an ...

htmllocal-storage

Using SCSS to apply a class in Next.js

Currently, I am working on a project using Next.js and implementing the SCSS module procedure for styling. An example component directory structure is as follows: SampleComponent -> index.tsx and SampleComponent.module.scss The code in SampleComponent ...

javascriptcssreactjssassnext.js

What is the best way to ensure my arrow text remains properly positioned when using fullpage.js?

Seeking guidance from the web development community. I am currently working on a client's website that utilizes fullpage.js and encountering a persistent issue. On slide1 of the website, I am struggling to display the correct text next to the arrows. ...

javascriptjqueryhtmlcssfullpage.js

The radio button in the HTML form is disabled when the user selects

I have two radio buttons labeled Billable "Y" and Billable "N". These radio buttons are linked to a database with corresponding values of "Y" or "N". If the user selects "Y" using the radio button, then the NonBillableReason text box should be disabled. ...

javascriptc#jqueryhtmlasp.net

Tips for improving the readability of HTML within a JavaScript file

This is the HTML I have been given <div data-role="collapsible"> <div class="prd-items-detials"> <ul> <li class="head"> <form> <label class="testtt" for="checkbo ...

html

What's the secret to achieving Apple's signature website font style?

Apple cleverly incorporates a font on its website that appears to have a white shadow, giving it an engraved or etched look. I've come across some techniques, but they seem quite limited. (By the way, a similar effect is utilized on this website as we ...

javascriptjqueryhtmlcsseffects

Tips for creating several radio buttons with separate functionality using Bootstrap 5

Is there a way to create separation between these two groups of radio buttons? Whenever I select an option in one group, it automatically deselects the option in the other group. <!DOCTYPE html> <html lang="en"> <head> ...

htmlradio-buttonbootstrap-5

Tips for customizing CSS hover effects using HTML and jQuery scripts

Just a heads up before I ask my question - the code I'm about to share is sourced from this video on YouTube, so all credit goes to the creator. JS $(".product-colors span").click(function(){ $(".product-colors span"). ...

htmljquerycss