How can I align a single button to the left side while positioning the rest of the elements to the right in Bootstrap 4?

I am attempting to align the B1 button on the left side and have the remaining elements positioned on the right side.

Below is my code snippet using Bootstrap 4.1:

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

<div class="modal-footer">
  <div class="clearfix">
    <button type="button" id="b1" class="btn btn-primary float-left">B1 ACTION</button>
    <div class="float-right">
      <button type="button" id="b2" class="btn btn-primary">B2 ACTION faltas</button>
      <a href="" id="b3" target="_blank" class="btn btn-primary">B3 ACTION</a>
      <button type="button" id="b4" class="btn btn-primary btn-danger">B4 ACTION</button>
    </div>
  </div>
</div>

Regrettably, the code is not functioning as intended. Does anyone have any suggestions on how to rectify this issue?

csstwitter-bootstrapbootstrap-4

Answer №1

By utilizing the flex-box property within the .modal-footer class, you can easily incorporate the justify-content-between class right alongside modal-footer.

This eliminates the need for using clearfix and float properties.

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<div class="modal-footer justify-content-between">
    <button type="button" id="b1" class="btn btn-primary float-left">B1 ACTION</button>
    <div>
        <button type="button" id="b2" class="btn btn-primary">B2 ACTION faltas</button>
        <a href="" id="b3" target="_blank" class="btn btn-primary">B3 ACTION</a>
        <button type="button" id="b4" class="btn btn-primary btn-danger">B4 ATION</button>
    </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

What steps can be taken to resolve this issue?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=ut ...

font-sizecss

The Bootstrap v5 dropdown feature is malfunctioning as the drop-down menu fails to appear

I've been struggling to create a dropdown menu using Bootstrap, but it doesn't seem to be working as expected. Despite that, I have no issues utilizing the framework for styling purposes. The Bootstrap js link is placed at the bottom of the body ...

htmlcssbootstrap-5

Tips for adjusting the vertical position of an image within a bootstrap column by a small amount

Apologies in advance if this question has already been addressed, and I am struggling to adapt it to my specific scenario. My objective is to adjust the positioning of the two images shown in the screenshot example below so that they align with the grey b ...

javascripthtmljquerycsstwitter-bootstrap

What is the best way to achieve a smooth rotation effect ranging from 1° to 359° using HTML/CSS in conjunction with JavaScript

Currently, I am retrieving rotation data from a sensor and transmitting it to a webpage containing a 2D-Model that rotates based on this data. To ensure a smoother motion, I have incorporated a CSS transition. However, an issue arises when the rotation da ...

javascripthtmlcsstransition

The height attribute in HTML tables fails to restrict height in Firefox

Is there a way to restrict the height of a table while still being able to scroll through the hidden elements? I've tried a few methods but none seem to work as intended: http://www.example.com/code/example table.ex1 { table-layout: auto; h ...

htmlcss

When utilizing the --watch flag, Node-sass will fail to function properly

Encountering an issue with the "--watch" or "-w" flag when running node-sass. After installing node-sass as a devDependency and setting up a script to compile SCSS code, everything runs smoothly without any flags. However, adding the "--watch" flag causes ...

cssnode.jssassnode-sass

Styling a disabled button in ASP.NET using CSS

I've encountered an issue with my asp.net button that is disabled based on specific c# code conditions. The button, known as btnPrevious, is assigned the css class below: .btnBlue{ background: rgb(40, 108, 244); /* Old browsers */ background:linear-g ...

c#cssasp.net

``A problem with the background image of the left panel in Framework 7

After setting a background image for the side panel and blurring it using CSS, I encountered an issue where the text and icons within the side panel also became blurred. Despite attempting to isolate the background image in a separate class, the problem ...

csshtml-framework-7

Assistance with centering elements using pure CSS in responsive web design

Seeking assistance as I am facing a challenge with aligning the sponsors section on the website mentioned below. Despite implementing responsive web design, I am struggling to center the sponsors correctly. Your guidance is appreciated... ...

htmlcssresponsive-design

Looking for a way to make one image disappear briefly while transitioning to another image in Javascript

**Hey there, coding enthusiasts! I could really use some help right now. I am trying to create a smooth image transition effect using Javascript, where one image fades out while the next one fades in seamlessly. As someone who is still relatively new to pr ...

javascripthtmlcss

Is it possible to incorporate a next.js image onto the background design?

I've encountered an issue while attempting to create a fixed background image with a parallax effect using Tailwind CSS and Next.js Image. If you need to see an example of this in action, check out this Template Monster theme. Here's the code s ...

javascripthtmlcssnext.jstailwind-css

Combining Images and Navigation in Next.js using Tailwind CSS

I am facing an issue where the image from a particular section overlaps with the Navbar dropdown on mobile devices. Adding z-50 to the navbar did not solve the problem as expected. What I want is for the image to remain below the dropdown menu when it is ...

javascriptcssnext.jstailwind-css

How can I align the navigation bar in the center using Bootstrap?

Let's discuss the code snippet provided below. I am looking to use Bootstrap to center this dropdown menu on the left side of the screen. Here is the screenshot for reference: . Any suggestions on how I can achieve this? Also, I would like to know h ...

htmlcsstwitter-bootstrap-4

CSS/jQuery animation alignment problem

Exploring an animation using CSS transitions and jQuery has been my recent project. The concept involves presenting the user with clickable divs to load a new page. When a div is clicked, it expands to cover the entire screen and transition to the next pag ...

jqueryhtmlcsscss-animations

Guide for Displaying Three Cards Side by Side using Bootstrap Grid System

I am facing an issue while attempting to display 3 cards in a row using the Bootstrap grid system. The problem arises when I use a Django loop, as each card is being displayed in a separate row instead of side by side as intended. I have tried implementing ...

htmldjangobootstrap-4

The flickering problem with HTML5 DOM

I created a HTML5 game using canvas and DOM elements, but I'm facing an issue with flickering DOM elements while playing. The problem seems to be more prevalent in mobile browsers, particularly Chrome. My game includes a full screen canvas with vario ...

javascriptjquerycsshtmldom

Achieving Content Alignment Using CSS

I successfully implemented a design on my HTML page that divides it into three sections vertically, with each section having a different background color - white, gray, and black. The backgrounds stretch the full width of the page regardless of screen reso ...

css

The CSS and JS codes are not successfully integrating into the webpage

I am encountering an issue with loading CSS and JS files onto my page. My project involves PHP and Xampp. The file structure is as follows: My Site - CSS - index.css - JS - index.js - Index.php (Apologies for the lack of a folder tre ...

javascriptphphtmlcss

Ensure the first column is aligned to the right and the second column is aligned to the left within a

After reviewing the official Bootstrap grid layout page, I noticed numerous examples of alignment. I am eager to find a class that will help achieve a layout similar to the one shown in https://i.stack.imgur.com/OPYrZ.png. I want all content in the first ...

htmlbootstrap-4bootstrap-grid

Avoid having the java applet destroyed when the container is hidden

I am working with multiple DIVs, each containing text, a java applet (unfortunately...) and buttons. I am currently creating a search function to dynamically show and hide these DIVs. However, whenever I use display:none on a DIV, the applet inside it se ...

javajavascripthtmlcssapplet