Reposition the button to the right within a div

I am having trouble moving a button from the left side to the right side in Bootstrap 4. I have attempted using both mr-auto and float-right, but neither seems to be working.

Here is my code:

<!-- Page Content -->
    <div class="container">

      <!-- Page Heading -->
      <h1 class="my-4">Page Heading
        <small>Secondary Text</small>
      </h1>

      <!-- Project One -->
      <div class="row shadow m-b-2">
        <div class="col-md-4">
          <a href="#">
            <img class="img-fluid rounded mb-3 mb-md-0" src="http://placehold.it/700x300" alt="">
          </a>
        </div>
        <div class="col-md-8 p-3">
          <h5>Project One</h5>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium veniam exercitationem expedita laborum at voluptate. Labore, voluptates totam at aut nemo deserunt rem magni pariatur quos perspiciatis atque eveniet unde.</p>
        </div>
                <div class="mr-auto">  <a class="btn btn-primary btn-sm" href="#">View Project</a></div>
      </div>
      <!-- /.row -->

      <hr>
    </div>
    <!-- /.container -->

Here is my Fiddle: https://jsfiddle.net/apcz8jtw/

htmlcsswordpressbootstrap-4

Answer №1

Upon reviewing the documentation, it is clear that only columns should be directly placed inside the row.

<div class="row shadow m-b-2">
    <div class="col-md-4">
        <a href="#">
            <img class="img-fluid rounded mb-3 mb-md-0" src="http://placehold.it/700x300" alt="">
        </a>
    </div>
    <div class="col-md-8 p-3">
        <h5>Project One</h5>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium veniam exercitationem expedita laborum at voluptate. Labore, voluptates totam at aut nemo deserunt rem magni pariatur quos perspiciatis atque eveniet unde.</p>
    </div>
    <div class="col-md-12">
        <div class="float-right"> <a class="btn btn-primary btn-sm" href="#">View Project</a></div>
    </div>
</div>

Answer №2

Give this a shot: 

<div class="row shadow m-b-2">
    <div class="col-md-4">
      <a href="#">
        <img class="img-fluid rounded mb-3 mb-md-0" src="http://placehold.it/700x300" alt="">
      </a>
    </div>
    <div class="col-md-8 p-3">
      <h5>Project One</h5>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium veniam exercitationem expedita laborum at voluptate. Labore, voluptates totam at aut nemo deserunt rem magni pariatur quos perspiciatis atque eveniet unde.</p>
    </div>
      <div class="float-right"> <a class="btn btn-primary btn-sm" href="#">View Project</a>
    </div>
  </div>

Answer №3

Solution:

<section class="row">
  <a class="button button-primary button-small pull-right" href="#">Check out the Project</a>
</section>

Consider adding the following class to your code for better styling

Answer №4

Consider changing the mr-auto class to ml-auto, it may help resolve your problem.

<!-- Page Content -->
<div class="container">

  <!-- Page Heading -->
  <h1 class="my-4">Page Heading
    <small>Secondary Text</small>
  </h1>

  <!-- Project One -->
  <div class="row shadow m-b-2">
    <div class="col-md-4">
      <a href="#">
        <img class="img-fluid rounded mb-3 mb-md-0" src="http://placehold.it/700x300" alt="">
      </a>
    </div>
    <div class="col-md-8 p-3">
      <h5>Project One</h5>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium veniam exercitationem expedita laborum at voluptate. Labore, voluptates totam at aut nemo deserunt rem magni pariatur quos perspiciatis atque eveniet unde.</p>
    </div>
            <div class="ml-auto">  <a class="btn btn-primary btn-sm" href="#">View Project</a></div>
  </div>
  <!-- /.row -->

  <hr>
</div>
<!-- /.container -->

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

Displaying JavaScript Countdown in PHP Table

I have a database table with multiple fields and I am looking to create a countdown using the integer value from one of the fields (in minutes). How can I loop through and display the countdown for each row in a PHP table utilizing these values, with the a ...

javascriptphphtmldatabase

Adding a class to radio buttons with a specific label using jQuery

As of now, I am utilizing jQuery to apply or remove a class when a radio button is selected. However, the issue arises when it checks all radio buttons, resulting in CSS being added to only one radio button. My HTML layout consists of rows containing eith ...

javascriptjqueryhtml

Leveraging jQuery's `.eq()` method on multiple class selectors

Is there a way to effectively utilize the 'eq' function on multiple classes? Due to the non-sequential nature of the divs with class 'a', I am encountering difficulties with using the 'eq' function to update their class. Inter ...

javascriptjqueryhtmlcss

The function driver.find_element is unable to locate an element using the "class_name" attribute

My attempt at using driver.find_element, with the "class_name" method to locate and click on a button for expanding rooms on this website resulted in an error message: raise exception_class(message, screen, stacktrace) selenium.common.exceptions.N ...

pythonhtmlselenium-webdriverweb-scraping

I have a flex box with an image and text line inside. How can I adjust the width of the box and text to automatically match the size of the image?

Consider the code snippet below: <style> .img_box { display: flex; } </style> <div class=img_box> <img src=img/> <div>Title text of varying length. It may exceed the image's width or be smaller.</div> & ...

htmlcss

Tips for layering dynamically created elements in JavaScript: Adding a new element on top of another element that was created dynamically

I have a button that, when clicked, adds additional fields for obtaining extra information about a user (such as their address and email). The issue is with the positions of these added fields – I want them to appear above the button, not below it. Here ...

javascripthtmldom

Displaying images in a carousel below a fixed navigation bar using Bootstrap

Check out my website at When viewing on smaller screens like mobile devices, I'm facing issues with my carousel images overlapping the navbar. Any suggestions on how to keep them below the navbar? Also, the third image appears shorter in length compa ...

jqueryhtmlcsstwitter-bootstrap

What is the best method for aligning forms vertically within a page layout?

I'm working on designing a contact form, but I'm having trouble getting everything to align properly. Specifically, I can't seem to get the form elements to line up vertically and I also want the Message label to appear on the top left side ...

htmlcssforms

Enhancing Responsive Tables with Vertical Alignment in Bootstrap 4

When utilizing Bootstrap 4 and adding table-responsive to a table, the text may no longer be centered vertically. Is this a bug? If not, is there an easy solution available to center the text in the middle? A pure Bootstrap solution would be greatly apprec ...

htmlcssbootstrap-4

Tips for retrieving formatted text layout from the database

I recently encountered an issue when adding text to my MySQL database using a textarea. The format of the text, including newlines and spaces, was saved in the database but not displayed as such when viewed directly. When I retrieve this string from the da ...

sqlcssdatabase

Opera browser having trouble with sidebar rendering

On my best days, I struggle immensely with troubleshooting browser display issues. The left-hand sidebar on this page () appears incorrect in Opera. While in all other browsers, the sidebar displays with an orange and tan background, for some unknown reas ...

htmlcssopera

Tips for altering the class of an HTML button dynamically when it's clicked during runtime

I currently have a set of buttons in my HTML page: <button id="button1" onclick="myFunction()" class="buttonClassA"></button> <button id="button2" onclick="myFunction()" class="buttonClassA"></button> <button id="button3" onclic ...

javascriptjqueryhtmlcssajax

I'm about to lose my mind because of this JavaScript code - is there a syntax

My code is showing an unexpected token < error, even though all the < signs are correctly placed. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8> <title>Document</title> </head> <body& ...

javascripthtml

Avoiding the appearance of a scrollbar when content extends beyond its containing block

I am struggling with writing markup and CSS to prevent a background image from creating a scrollbar unless the viewport is narrower than the inner content wrapper: The solution provided in this post didn't work for me: Absolutely positioned div on ri ...

htmlcssscrollbarbrowser-scrollbars

Steps for opening a clicked link in a new tab:

I have a link on my page that I would like to open in a new tab when clicked, but it doesn't seem to be working. Can anyone offer some suggestions or help? So far, I've tried the following code: <a target="_BLANK" ng-href="{{news.url ...

javascripthtmlangularjshref

Tips for eliminating the bottom border on a nav-tab in Bootstrap 4

When a vertical navigation menu item is selected, a border appears below the item. How can I remove this border? .nav-tabs li, .nav-tabs li a { border-bottom: none; } Here is a picture of the border: ...

cssbootstrap-4

Efficiently aligning divs within a container using Bootstrap 5 without altering the overall layout

I've been trying to figure out a solution to this issue, but so far nothing seems to work. I'm working on creating some general components for a system using Bootstrap 5. I've defined a button like this: <div class="col buttonDiv&quo ...

htmlcssbootstrap-5

What is the best way to present progress bar numbers in Bootstrap beneath the bar?

I have successfully implemented a progress bar using Bootstrap. Now, I am looking to display numerical values below the progress bar, similar to this: https://i.sstatic.net/3QG8d.png Is there a way to achieve this without utilizing JavaScript graphing l ...

javascripthtmlcsstwitter-bootstrap

Numerous categories housed within various div containers

I am working with an HTML code that contains 6 different div elements: <div class="hisclass1 hisclass2 myclass hisclass3"> <div class="herclass1 herclass2"> <!-- 2nd div --> </div> </di ...

htmlcss

Staggered Drop-Down Menus

I've created a custom CSS drop-down menu that works well, but I've realized that updating this menu across all the HTML pages on my website would be a tedious task. If I ever need to add a new section and tier to the menu, I'd have to update ...

htmlcssdrop-down-menu