Bootstrap alignment problem

I have a bootstrap grid layout on the top of my page. I’m trying to make it so that the buttons on top right part of the page align to the right of the bootstrap column similarly to how the search bar is aligned to the left of its’ column.

HTML:

<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU" crossorigin="anonymous">
    <script src="https://kit.fontawesome.com/24184bbc2f.js" crossorigin="anonymous"></script>
    <link
      href="https://fonts.googleapis.com/css?family=Nunito:200,200i,300,300i,400,400i,600,600i,700,700i,800,800i,900,900i"
      rel="stylesheet">
    <link rel="stylesheet" href="https://gitcdn.link/repo/downred/T3solutions/main/regjistrimi/sb-admin-2.css">
    <link rel="stylesheet" href="style.css">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-/bQdsTh/da6pkI1MST/rWKFNjaCP5gBSY4sEBT38Q/9RBh9AH40zEOg7Hlq2THRZ" crossorigin="anonymous"></script>
    <title>Lista e pagave</title>
  </head>
  <body>
    <main>
      <div class="page-wrapper">
        <div class="inner-wrapper">
          <!-- KERKO LISTEN  -->
          <div class="container-fluid op-container mt-5 pl-5">
            <div class="row">
              <div class="col-xl-8 col-lg-7 col-md-5 col-sm-4">
                <form class="d-none d-sm-inline-block form-inline my-md-0 navbar-search">
                    <div class="input-group">
                      <input type="text" class="form-control search-bg border-0 small" placeholder="Kërko" aria-label="Search" aria-describedby="basic-addon2">
                      <div class="input-group-append">
                        <button class="btn btn-primary" type="button">
                          <i class="fas fa-search fa-sm"></i>
                        </button>
                      </div>
                  </div>
                </form>
              </div>
              <div class="col-xl-4 col-lg-5 col-md-7 col-sm-8">
                  <a href="#" class="btn btn-success btn-icon-split btn-sm ml-2">
                    <span class="icon text-white">
                        <i class="fas fa-file">
                        </i>
                    </span>
                    <span class="text">New</span>
                  </a>
                  <a href="#" class="btn btn-primary btn-icon-split btn-sm ml-2">
                    <span class="icon text-white">
                        <i class="fas fa-edit">
                        </i>
                    </span>
                    <span class="text">Edit</span>
                  </a>
                  <a href="#" class="btn btn-dark btn-icon-split btn-sm ml-2">
                    <span class="icon text-white">
                        <i class="fas fa-print">
                        </i>
                    </span>
                    <span class="text">Print</span>
                  </a>
                  <a href="#" class="btn btn-danger btn-icon-split btn-sm ml-2">
                    <span class="icon text-white">
                        <i class="fas fa-trash">
                        </i>
                    </span>
                    <span class="text">Delete</span>
                  </a>
              </div>
            </div>
          </div>
          <!-- LISTA E PAGAVE -->
          <div class="list-wrapper">
            <div class="list">
              <table class="table table-hover text-center">
                <thead>
                  <tr>
                    <th scope="col">Edito</th>
                    <th scope="col">ID</th>
                    <th scope="col">Emri</th>
                    <th scope="col">Mbiemri</th>
                    <th scope="col">Llogaria bankare</th>
                    <th scope="col">Paga bazë</th>
                    <th scope="col">Pagesa për orë</th>
                    <th scope="col">Avanci</th>
                    <th scope="col">Data</th>
                    <th scope="col">Fshij</th>
                  </tr>
                </thead>
                <tbody>
                  <tr>
                    <td>
                      <div class="btn btn-primary"><i class="fas fa-edit"></i></div>
                    </td>
                    <td class="table-text-clr">000001</td>
                    <td class="table-text-clr">Filan</td>
                    <td class="table-text-clr">Fisteku</td>
                    <td class="table-text-clr">0001 1234 5678 0010</td>
                    <td class="table-text-clr">€650.00</td>
                    <td class="table-text-clr">Pagesa për orë</td>
                    <td class="table-text-clr">Avanci</td>
                    <td class="table-text-clr">01/01/2020</td>
                    <td>
                      <div class="btn btn-danger"><i class="fas fa-trash"></i></div>
                    </td>
                  </tr>
                  <tr>
                    <td>
                      <div class="btn btn-primary"><i class="fas fa-edit"></i></div>
                    </td>
                    <td class="table-text-clr">000001</td>
                    <td class="table-text-clr">Filan</td>
                    <td class="table-text-clr">Fisteku</td>
                    <td class="table-text-clr">0001 1234 5678 0010</td>
                    <td class="table-text-clr">€650.00</td>
                    <td class="table-text-clr">Pagesa për orë</td>
                    <td class="table-text-clr">Avanci</td>
                    <td class="table-text-clr">01/01/2020</td>
                    <td>
                      <div class="btn btn-danger"><i class="fas fa-trash"></i></div>
                    </td>
                  </tr>
                  <tr>
                    <td>
                      <div class="btn btn-primary"><i class="fas fa-edit"></i></div>
                    </td>
                    <td class="table-text-clr">000001</td>
                    <td class="table-text-clr">Filan</td>
                    <td class="table-text-clr">Fisteku</td>
                    <td class="table-text-clr">0001 1234 5678 0010</td>
                    <td class="table-text-clr">€650.00</td>
                    <td class="table-text-clr">Pagesa për orë</td>
                    <td class="table-text-clr">Avanci</td>
                    <td class="table-text-clr">01/01/2020</td>
                    <td>
                      <div class="btn btn-danger"><i class="fas fa-trash"></i></div>
                    </td>
                  </tr>
                  <tr>
                    <td>
                      <div class="btn btn-primary"><i class="fas fa-edit"></i></div>
                    </td>
                    <td class="table-text-clr">000001</td>
                    <td class="table-text-clr">Filan</td>
                    <td class="table-text-clr">Fisteku</td>
                    <td class="table-text-clr">0001 1234 5678 0010</td>
                    <td class="table-text-clr">€650.00</td>
                    <td class="table-text-clr">Pagesa për orë</td>
                    <td class="table-text-clr">Avanci</td>
                    <td class="table-text-clr">01/01/2020</td>
                    <td>
                      <div class="btn btn-danger"><i class="fas fa-trash"></i></div>
                    </td>
                  </tr>
                  <tr>
                    <td>
                      <div class="btn btn-primary"><i class="fas fa-edit"></i></div>
                    </td>
                    <td class="table-text-clr">000001</td>
                    <td class="table-text-clr">Filan</td>
                    <td class="table-text-clr">Fisteku</td>
                    <td class="table-text-clr">0001 1234 5678 0010</td>
                    <td class="table-text-clr">€650.00</td>
                    <td class="table-text-clr">Pagesa për orë</td>
                    <td class="table-text-clr">Avanci</td>
                    <td class="table-text-clr">01/01/2020</td>
                    <td>
                      <div class="btn btn-danger"><i class="fas fa-trash"></i></div>
                    </td>
                  </tr>
                  <tr>
                    <td>
                      <div class="btn btn-primary"><i class="fas fa-edit"></i></div>
                    </td>
                    <td class="table-text-clr">000001</td>
                    <td class="table-text-clr">Filan</td>
                    <td class="table-text-clr">Fisteku</td>
                    <td class="table-text-clr">0001 1234 5678 0010</td>
                    <td class="table-text-clr">€650.00</td>
                    <td class="table-text-clr">Pagesa për orë</td>
                    <td class="table-text-clr">Avanci</td>
                    <td class="table-text-clr">01/01/2020</td>
                    <td>
                      <div class="btn btn-danger"><i class="fas fa-trash"></i></div>
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>
        </div>
      </div>
    </main>
  </body>
  <script>
    // Example starter JavaScript for disabling form submissions if there are invalid fields
    (function () {
    'use strict'

    // Fetch all the forms we want to apply custom Bootstrap validation styles to
    var forms = document.querySelectorAll('.needs-validation')

    // Loop over them and prevent submission
    Array.prototype.slice.call(forms)
    .forEach(function (form) {
      form.addEventListener('submit', function (event) {
        if (!form.checkValidity()) {
          event.preventDefault()
          event.stopPropagation()
        }

        form.classList.add('was-validated')
      }, false)
    })
    })()
</script>
</html>

CSS:

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600&display=swap');

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
}

:root {
    --primary-clr: #4E73DF;
    --secondary-clr: #e7e7e7;
    --tertiary-clr: #646464;
    --list-item-clr: #6a6a6a;
    --search-btn-clr: #b8b8b8;
    --search-bg: #d6d6d6;

    --heading-size: 1.3125rem;
    --heading-weight: 400;

    --assistive-text-weight: 500;
    --assistive-text-size: 0.625rem;

    --placeholder-weight: 500;
    --placeholder-size: 0.75rem;

    --list-cname-weight: 600;
    --list-cname-size: 0.9375rem;

    --container-border-radius: 30px;
}

html {font-family: 'Montserrat', sans-serif !important;}

body {
    background-color: var(--secondary-clr);
}



.page-wrapper {
    width: 100%;
}

/* inner wrapper  */

.inner-wrapper {
    background-color: var(--secondary-clr);
    /* width: 98%; */
}

/* search  */


.search-bg {
    background-color: var(--search-bg) !important;
}


/* list  */

.list-wrapper {
    margin: 2em;
}

.list {
    overflow-x: scroll;
    min-height: auto;
    margin: 0 0 2em 0;
}

th {
    white-space: nowrap;
    padding: 2em 1em !important;
    color: var(--list-item-clr);
    font-weight: var(--list-cname-weight);
}

td {
    padding: 2em 2em !important;
    white-space: nowrap;
}

.table-text-clr {
    color: var(--list-item-clr);
}

/* media queries  */
/* 
@media screen and (max-width:1350px) {
    .col-margin {
        padding: 0 4em 0 0;
    }
} */

I was able to use the class text-end then add padding-right to get it perfect.

Thanks but I’m not sure if that would work for bigger screens unless I use media queries which I’m trying to avoid.

EDIT: It actually works thanks.

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.