How to place a div outside the upper right corner of my form using bootsrap?

Question

I got a form, and it displays some detail text about stuff in my application. Outside this form, I have a "add new item" button, which the user can click on to go to a new page to add a new item.

This button is now placed on the upper left side corner outside of the form, and I'd like to move it to the other side (the right upper corner of the form).

In this case my button is the <router-link> since I'm using Vue.js, and the routing works fine, and it styles as a button.

I use bootstrap-4 in my vue.js application with css-only property.

I've tried "float: right; ", and adding

<div class="row"> <div class="col"></div></div>

to "force" the button to move through columns, but it doesen't work.

So this is how my code looks like now:

<div class="container-fluid">
   <div class="details">
     <div class="d-flex justify-content-md-center">
       <div class="row">
       <div class="col create-new-item-button">
         <div class="">
           <router-link
             class="btn btn-primary"
             style="margin-bottom: 30px"
             :to="{ name: 'Create new item' }"
           >Create new item </router-link>
         </div>
       </div>
     </div>
       <form>
<p>Text in my form and other stuff</p>
</form>
</div>
</div>
</div>

My css (other than bootstrap's own):

.details {
  width: 100%;
  position: relative;
}

form {
  background-color: white;
  margin-top: 30px;
  margin-bottom: 30px;
  padding-bottom: 50px;
border-style: solid;
border-color: black; 

}

.create-new-item-button {
  float: right;
}

What should I do to move it to make it to the upper right corner, outside the form?

Answer 1

if you want to put it outside .details try to give it position: absolute; left: 100%;

Answer 2

You can use position: absolute; right: 0; position: absolute; right: 0; to the div with the class row on your custom css, just like this example: https://codepen.io/anon/pen/gNXxxb

I just added the "my-custom-class" to the row and edited it on the css

Answer 3

You can easily achieve what you want by wrapping the button with anything displayed as block , eg, <p /> , <div /> and make its text-align:right; . No floating, no absolute positioning needed.

<div class="container-fluid">
    <div class="details">
        <p class="text-right">
            <router-link
              class="btn btn-primary"
              style="margin-bottom: 30px"
              :to="{ name: 'Create new item' }"
            >Create new item </router-link>
        </p>
        <form>
            <p>Text in my form and other stuff</p>
        </form>
    </div>
</div>

Answer 4

Ok, so the solution came to this:

I took your advice and figured stuff out. So, I moved the entire section of the button (column and everything) and placed it under the </form >` tag.

Now it looks like this:

 <div class="container-fluid">
    <div class="details">
      <div class="d-flex justify-content-md-center">
        <form>
<p> Text in my form and other stuff</p>
     </form>
</div>
</div>
</div>
         <div class="d-flex flex-row-reverse">
            <div class="col ml-auto p-2 ">
                <router-link
                  class="btn btn-primary"
                  style="margin-bottom: 30px"
                  :to="{ name: 'Create new item' }"
                >Create new item</router-link>

            </div>
          </div>
      </div>

Thank you all for your help!