Ways to position a button to the right in one div and a button to the left in another div

Imagine you have two buttons that are supposed to be near each other. Take a look at the following code:

<div class="form-inline move_down">
   <div class="col-md-3 col-6">
      <button class="btn btn-primary btn-sm move_right_component" type="submit" >NEW
      <i class="fa fa-plus"></i></button>
   </div>
   <div class="col-md-4 col-6">
      <button class="btn btn-default btn-sm" type="button" >BACK<i class="fa fa-arrow-left"></i></button>
   </div>
</div>

This is how the buttons appear, but I want to make them closer together. I'd like the first button to appear at the end of the first div, and the second button to start at the beginning. Right now, there is too much space between them. Can anyone help me with this?

htmltwitter-bootstrapcssbootstrap-4

Answer №1

The empty area that is visible is actually the default padding from the bootstrap classes.

To remove it, simply override it with the following CSS:

.move_right_component{
    float: right;
}

.col-6 {
    height: 30px;
    border: solid 1px red;
    padding-left: 0px !important;
    padding-right: 0px !important;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/css/bootstrap.min.css" rel="stylesheet"/>
<div class="form-inline move_down">
  <div class="col-md-3 col-6">
    <button class="btn btn-primary btn-sm move_right_component" type="submit">NEW
                  <i class="fa fa-plus"></i></button>
  </div>
  <div class="col-md-4 col-6">
    <button class="btn btn-default btn-sm" type="button">BACK<i class="fa fa-arrow-left"></i></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 is the best way to horizontally align my divs and ensure they stack properly using media queries?

My layout is not working as expected - I want these two elements to be side by side in the center before a media query, and then stack on top of each other when it hits. But for some reason, it's not behaving the way I intended. I've tried to ce ...

javascripthtmlcss

Switching from a layout of 3 columns to 2 columns on iPad when orientation is changed to portrait

Apologies for posting this inquiry here, but I am facing a challenge with an iPad issue when switching to portrait orientation on my website. I am using a @media query to detect the portrait view and I want to switch from three columns to two. However, th ...

cssipadorientation

Z-order for ClockPicker

Within my application, I've implemented a pop-up for inputting event data. One of the fields within this pop-up is for setting the time using the DateTimePicker from MUI. <Popup width={600} height={600} ...

csstypesmaterial-ui

A specific class has no border on its left side

Is there a way to use CSS to disable the left border to the right of a cell with a specific class? In the scenario shown in this image, the right border appears double due to the combination of the "selected" class border and the default gray border. I wo ...

cssborder

Steps for configuring user environment variables in the syslinux mboot.c32 boot loader

Is there a method to establish a user environment variable within the syslinux mboot.c32 boot menu and then retrieve it once I have accessed the operating system? ...

bootstrap-4centosfedorabootsyslinux

Use jQuery to extract data from the URL instead of relying on PHP

http://h3gsat.altervista.org/DettagliCompleto.php?id=4567 I attempted to extract the id parameter without success. I am attempting to accomplish this using JavaScript (jQuery) instead of PHP, but I am unsure of how to proceed. ...

javascriptjqueryhtml

Tips for populating a row in the Bootstrap grid with the assistance of the mr or ml classes

I've come across a roadblock here. The issue arises when attempting to fill the Bootstrap row while also utilizing mr (or ml). Initially, I attempted to calculate the numbers so that they add up to 12. In my 3-column layout, I have a column of 5, fol ...

cssbootstrap-4grid

What are the steps to add a background image in Chrome?

Is there a way to set a background image using CSS and HTML that is compatible with Chrome? The code below works in Internet Explorer, but not chrome. Any suggestions? body { background-repeat: no-repeat; background-color: transparent; back ...

htmlcssinternet-explorergoogle-chromebackground-image

What distinguishes the creation of HTML Emails from HTML Email Signatures?

In my opinion, I may be overthinking this but is there a distinction in how HTML Emails and HTML Email Signatures are constructed and displayed? It seems that when I search for HTML Email Signatures, results mainly focus on HTML Emails. Some results do tou ...

htmlcssemailhtml-email

Building a custom server rack table using PHP and MySQL is a great way to optimize your

I am in the process of developing a rack server using PHP and MySQL. My first task is to set up a dynamic table with rowspan functionality, followed by implementing drag-and-drop features using Ajax. Although I have researched various resources and attemp ...

phphtmlmysqlhtml-table

Prevent the routing on page reload in AngularJS

My route provider setup looks like this: app.config(function ($routeProvider, $locationProvider){ $locationProvider.hashPrefix(''); $routeProvider .when('/', { templateUrl: 'login.html', controller: 'loginCtrl&a ...

htmlangularjsangular-routingroute-provider

Attempting to transmit a ng-repeat object to a personalized filter function

Objective: The goal is to enable a user to input the name of a course into the search field and view a list of students who are enrolled in that course. Data Models: course (contains course name and code) student (holds a list of courses they are regist ...

javascripthtmlangularjsangularjs-ng-repeat

PHP mail function does not properly align HTML table outputs

After fetching data from the database and inserting it into an HTML table, everything appears fine. However, upon pressing the send button to email the content, sometimes the alignment of the HTML table is disrupted in the email. It seems like specific col ...

phphtmlcssphpmailer

Through the implementation of JavaScript, the element's class is dynamically altered

While working on my project, I encountered an issue with implementing a change in the class of an element using JavaScript. The problem is that when I click on the home page, the last page does not get deselected. Here is my current JavaScript code: const ...

javascripthtml

Trouble with AngularJS Controller Displaying/Hiding Content as Expected

I'm struggling to make content disappear when a button is clicked and then show a new set of content upon that button click. I can't seem to get it to work as intended. The first section simply does not disappear when the button is clicked. The s ...

javascripthtmlangularjscontroller

When I set margin-top to auto to move the last item in the list to the bottom, the item ends up being clipped

I have a sidebar with 100% height that includes a div and a ul. The div will display an image at the top of the sidebar, while the ul will contain all the sidebar menu items. It is crucial that the div and ul remain separate and not combined. The challeng ...

htmlcss

Pentagon Silhouette as Header Background

I am looking to add a unique pentagon shape to my page header background without editing the HTML. I am using SASS for styling purposes. Is there a way to achieve a design similar to this wireframe image of a pentagon with the middle point at the bottom, ...

htmlcsssass

I am just beginning my coding journey and could use some assistance with resolving this dilemma. I have included a photo for reference. I am struggling to add some space after the final card

click here for image description Can someone assist me in creating some space following the final card? ...

htmlcssresponsive-design

After fetching an HTML snippet using the $.get() method, Font Awesome icons are no longer visible

Experimenting with creating a seamless 'single-page' experience, I've managed to achieve this by implementing an event listener in jQuery for menu link clicks. This triggers the replacement of the existing content in my main div with an HTML ...

jqueryhtmlcssfont-awesome

Creating a gallery that adjusts to different screen sizes is a valuable

Hello fellow programmers, I'm currently facing a challenge. I'm trying to create a gallery using HTML, CSS, and Bootstrap (I have a good grasp of JavaScript and still learning). I'm aiming to make it fully responsive, but I'm strugglin ...

htmlcssbootstrap-4