I have a form displaying some detailed text about elements in my application. Located outside this form is an "add new item" button that redirects the user to a new page for adding a new item.
The current placement of this button is on the upper left corner, but I would like to move it to the right upper corner of the form.
For this task, the button is coded using <router-link> as I'm utilizing Vue.js with successful routing and CSS-styled button properties.
In my Vue.js application, I implement bootstrap-4 alongside css-only properties.
My attempts to use "float: right;" and include:
<div class="row"> <div class="col"></div></div>
To manipulate the button into moving through columns have been unsuccessful.
Below is how my current code appears:
<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>
Additional CSS (besides bootstrap's default):
.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 steps should I take to successfully move it to the upper right corner outside the form?