how to move a button to the right of the screen using HTML/CSS
Hello Im new to HTML and Im struggling to move a button to the far right of my screen. here's the a picture of where I want the button should be
As you can see above I want to put the button on just above the table and align with the right of the table.
I have tried using margin-left in css but iI had to put 800px and I don't think its the best way. I also tried float: right but the button is moving the table as well.
Here is my HTML and CSS code:
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css"
integrity="sha512-DTOQO9RWCH3ppGqcWaEA1BIZOC6xxalwEsw9c2QQeAIftl+Vegovlnee1c9QX4TctnWMn13TZye+giMm8e2LwA=="
crossorigin="anonymous" referrerpolicy="no-referrer" />
<link rel="stylesheet" type="text/css" href="{{ asset('css/styles.css') }}">
<title>Inventory | Master Kategori</title>
</head>
<body>
<div class="d-flex" id="wrapper">
<!-- Sidebar -->
<div class="bg-white" id="sidebar-wrapper">
<div class="sidebar-heading text-center py-4 primary-text fs-2 fw-bold text-uppercase border-bottom">
<i></i>INVENTORY SYSTEM
</div>
<div class="list-group list-group-flush my-2">
<a href="/"
class="list-group-item list-group-item-action bg-transparent second-text dashboard-button fw-bold"
style="text-decoration: none; color: gray;">
<i class="fas fa-tachometer-alt me-2"></i>Dashboard
</a>
<div class="list-group-item list-group-item-action bg-transparent second-text fw-bold">
<a href="mastercustomer" style="text-decoration: none; color: gray;">
<i class="fas fa-user-circle me-2"></i>Master
</a>
<ul class="list-group list-group-flush my-1" style="margin-left: 15px;">
<li class="list-group-item list-group-item-action bg-transparent second-text fw-bold"
style="padding: 9px">
<a href="mastercustomer" style="text-decoration: none; color: gray;">Master Customer</a>
</li>
<li class="list-group-item list-group-item-action bg-transparent second-text fw-bold"
style="padding: 9px">
<a href="mastersupplier" style="text-decoration: none; color: gray;">Master Supplier</a>
</li>
<li class="list-group-item list-group-item-action bg-transparent second-text fw-bold"
style="padding: 9px">
<a href="masterkategori" style="text-decoration: none; color: gray;">Master Kategori</a>
</li>
</ul>
</div>
<div class="list-group-item list-group-item-action bg-transparent second-text fw-bold">
<a href="stok
" style="text-decoration: none; color: gray;">
<i class="fas fa-box me-2"></i>Storage
</a>
<ul class="list-group list-group-flush my-1" style="margin-left: 15px;">
<li class="list-group-item list-group-item-action bg-transparent second-text fw-bold"
style="padding: 9px">
<a href="stok
"
style="text-decoration: none; color: gray;">Stok</a>
</li>
<li class="list-group-item list-group-item-action bg-transparent second-text fw-bold"
style="padding: 9px">
<a href="list" style="text-decoration: none; color: gray;">List</a>
</li>
<li class="list-group-item list-group-item-action bg-transparent second-text fw-bold"
style="padding: 9px">
<a href="list" style="text-decoration: none; color: gray;">List</a>
</li>
</ul>
</div>
</div>
</div>
<!-- Page Content -->
<div id="page-content-wrapper">
<div class="d-flex align-items-center">
<h1 class="fs-3 m-4">Master Kategori</h1>
</div>
<div class="wrapper-wrapper">
<div class="wrapper">
<form action="/addkategori">
<button type="submit" class="btn"><i class="fa-solid fa-circle-plus" style="font-size: x-large"></i> <span style="padding-left: 5px">Add Kategori</span></button>
</form>
</div>
</div>
<div class="container-fluid px-4">
<div class="row my-5">
<div class="col">
<table class="table bg-white rounded shadow-sm table-hover">
<thead>
<tr>
<th>#</th>
<th>Kode</th>
<th>Kategori</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr>
<th>1</th>
</tr>
<tr>
<th>2</th>
</tr>
<tr>
<th>3</th>
</tr>
<tr>
<th>4</th>
</tr>
<tr>
<th>5</th>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
<!-- Page Content -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous">
</script>
</body>
</html>
And CSS
:root {
--main-bg-color: #EFEDED;
--main-text-color: #1570EF;
--second-text-color: #bbbec5;
--second-bg-color: #d1edf2;
}
.primary-text {
color: var(--main-text-color);
}
.second-text {
color: var(--second-text-color);
}
.secondary-bg {
background-color: var(--second-bg-color);
}
.rounded-full {
border-radius: 100%;
}
#wrapper {
overflow-x: hidden;
background-image: linear-gradient(to left,
#d4d4d4,
#dedede,
#ececec,
#f5f5f5);
}
#sidebar-wrapper {
min-height: 100vh;
margin-left: -15rem;
transition: margin 0.25s ease-out;
}
#sidebar-wrapper .sidebar-heading {
padding: 0.875rem 1.25rem;
font-size: 1.2rem;
}
#sidebar-wrapper .list-group {
width: 15rem;
}
#sidebar-wrapper .list-group-item:hover, #sidebar-wrapper .list-group-item:hover a {
color: #1570EF !important;
}
#page-content-wrapper {
min-width: 100vw;
}
#wrapper.toggled #sidebar-wrapper {
margin-left: 0;
}
.wrapper .btn {
height: 50px;
background: #18C4FA;
margin-top: 30px;
cursor: pointer;
font-size: 18px;
color: white;
font-weight: 600;
}
.list-group-item {
border: none;
padding: 20px 30px;
}
.list-group-item.active {
background-color: transparent;
color: var(--main-text-color);
font-weight: bold;
border: none;
}
.active-button {
color: blue !important; /* Change the text color to blue */
}
@media (min-width: 768px) {
#sidebar-wrapper {
margin-left: 0;
}
#page-content-wrapper {
min-width: 0;
width: 100%;
}
#wrapper.toggled #sidebar-wrapper {
margin-left: -15rem;
}
}
I would appreciate any help I can get, thankyou
Solution
Use Flexbox
.btn-wrapper {
display: flex;
justify-content: flex-end;
gap: 1rem;
flex-wrap: wrap;
}
:root {
--main-bg-color: #EFEDED;
--main-text-color: #1570EF;
--second-text-color: #bbbec5;
--second-bg-color: #d1edf2;
}
.primary-text {
color: var(--main-text-color);
}
.second-text {
color: var(--second-text-color);
}
.secondary-bg {
background-color: var(--second-bg-color);
}
.rounded-full {
border-radius: 100%;
}
#wrapper {
overflow-x: hidden;
background-image: linear-gradient(to left,
#d4d4d4,
#dedede,
#ececec,
#f5f5f5);
}
#sidebar-wrapper {
min-height: 100vh;
margin-left: -15rem;
transition: margin 0.25s ease-out;
}
#sidebar-wrapper .sidebar-heading {
padding: 0.875rem 1.25rem;
font-size: 1.2rem;
}
#sidebar-wrapper .list-group {
width: 15rem;
}
#sidebar-wrapper .list-group-item:hover, #sidebar-wrapper .list-group-item:hover a {
color: #1570EF !important;
}
#page-content-wrapper {
min-width: 100vw;
}
#wrapper.toggled #sidebar-wrapper {
margin-left: 0;
}
.wrapper .btn {
height: 50px;
background: #18C4FA;
margin-top: 30px;
cursor: pointer;
font-size: 18px;
color: white;
font-weight: 600;
}
.list-group-item {
border: none;
padding: 20px 30px;
}
.list-group-item.active {
background-color: transparent;
color: var(--main-text-color);
font-weight: bold;
border: none;
}
.active-button {
color: blue !important; /* Change the text color to blue */
}
@media (min-width: 768px) {
#sidebar-wrapper {
margin-left: 0;
}
#page-content-wrapper {
min-width: 0;
width: 100%;
}
#wrapper.toggled #sidebar-wrapper {
margin-left: -15rem;
}
}
.btn-wrapper {
display: flex;
justify-content: flex-end;
gap: .5rem;
flex-wrap: wrap;
} <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css"
integrity="sha512-DTOQO9RWCH3ppGqcWaEA1BIZOC6xxalwEsw9c2QQeAIftl+Vegovlnee1c9QX4TctnWMn13TZye+giMm8e2LwA=="
crossorigin="anonymous" referrerpolicy="no-referrer" />
<link rel="stylesheet" type="text/css" href="{{ asset('css/styles.css') }}">
<title>Inventory | Master Kategori</title>
</head>
<body>
<div class="d-flex" id="wrapper">
<!-- Sidebar -->
<div class="bg-white" id="sidebar-wrapper">
<div class="sidebar-heading text-center py-4 primary-text fs-2 fw-bold text-uppercase border-bottom">
<i></i>INVENTORY SYSTEM
</div>
<div class="list-group list-group-flush my-2">
<a href="/"
class="list-group-item list-group-item-action bg-transparent second-text dashboard-button fw-bold"
style="text-decoration: none; color: gray;">
<i class="fas fa-tachometer-alt me-2"></i>Dashboard
</a>
<div class="list-group-item list-group-item-action bg-transparent second-text fw-bold">
<a href="mastercustomer" style="text-decoration: none; color: gray;">
<i class="fas fa-user-circle me-2"></i>Master
</a>
<ul class="list-group list-group-flush my-1" style="margin-left: 15px;">
<li class="list-group-item list-group-item-action bg-transparent second-text fw-bold"
style="padding: 9px">
<a href="mastercustomer" style="text-decoration: none; color: gray;">Master Customer</a>
</li>
<li class="list-group-item list-group-item-action bg-transparent second-text fw-bold"
style="padding: 9px">
<a href="mastersupplier" style="text-decoration: none; color: gray;">Master Supplier</a>
</li>
<li class="list-group-item list-group-item-action bg-transparent second-text fw-bold"
style="padding: 9px">
<a href="masterkategori" style="text-decoration: none; color: gray;">Master Kategori</a>
</li>
</ul>
</div>
<div class="list-group-item list-group-item-action bg-transparent second-text fw-bold">
<a href="stok
" style="text-decoration: none; color: gray;">
<i class="fas fa-box me-2"></i>Storage
</a>
<ul class="list-group list-group-flush my-1" style="margin-left: 15px;">
<li class="list-group-item list-group-item-action bg-transparent second-text fw-bold"
style="padding: 9px">
<a href="stok
"
style="text-decoration: none; color: gray;">Stok</a>
</li>
<li class="list-group-item list-group-item-action bg-transparent second-text fw-bold"
style="padding: 9px">
<a href="list" style="text-decoration: none; color: gray;">List</a>
</li>
<li class="list-group-item list-group-item-action bg-transparent second-text fw-bold"
style="padding: 9px">
<a href="list" style="text-decoration: none; color: gray;">List</a>
</li>
</ul>
</div>
</div>
</div>
<!-- Page Content -->
<div id="page-content-wrapper">
<div class="d-flex align-items-center">
<h1 class="fs-3 m-4 mb-0">Master Kategori</h1>
</div>
<div class="container-fluid px-4">
<div class="btn-wrapper wrapper">
<form action="/addkategori">
<button type="submit" class="btn"><i class="fa-solid fa-circle-plus" style="font-size: x-large"></i> <span style="padding-left: 5px">Add Kategori</span></button>
</form>
<button type="button" class="btn">Add</button>
</div>
<div class="row mb-5 mt-2">
<div class="col">
<table class="table bg-white rounded shadow-sm table-hover">
<thead>
<tr>
<th>#</th>
<th>Kode</th>
<th>Kategori</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr>
<th>1</th>
</tr>
<tr>
<th>2</th>
</tr>
<tr>
<th>3</th>
</tr>
<tr>
<th>4</th>
</tr>
<tr>
<th>5</th>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
<!-- Page Content -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous">
</script>
</body>
</html>- How to set iframe size dynamically
- Making a img appear/disappear in html5
- How to escape HTML
- Bootstrap label overlay
- Stuck showing my information taken from the input field
- Ant Design Table with vertical and horizontal scroll
- Two div blocks on same line
- How to allow 'Open in a new tab' when using ng-click?
- Applying zoom into point like Aseprite
- Specifying multiple targetOrigin uris in postmessage
- Get input field value from Elementor Pro Form
- How to Submit a form without reloading page
- How to determine if element is last or first child of parent in javascript/jquery?
- Moving mat-icon to left of expansion panel header title?
- How do I position the buttons at the bottom in the q-input field?
- Dynamically changing the attributes of a HTML element?
- Where do I get a "3 horizontal lines" symbol for my webpage?
- Escape </ in script tag contents
- Find html label associated with a given input
- border-box of input not working as expected
- Typescript error "Property 'value' does not exist on type 'HTMLElement'", "Property 'onclick' does not exist on type 'Element'"
- How to remove the text-decoration underline; from the span element inside the flex parent?
- Emojis in Angular html template
- How to make a delete button to delete an item, to which it belongs, from the list?
- Bootstrap tabs in Chrome extension popup
- <mat-toolbar> changes height of all page
- JavaScript: get custom button's text value
- redirect to appstore or google play
- Is there a way to add a blank data attribute to an element using JavaScript?
- Fixed element positioning relative to its parent