Follow

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use
Follow
Facebook Twitter Instagram Youtube
Contact

How to align different HTML element on a row in a Bootstrap scrollbar?

byMR
May 12, 2022

I am struggling with the frontend of my webapp, I used Bootstrap and some custom css definition for some adaptations; the desktop interface is ok but for smartphones still has a problem in the navbar, so when you click to scroll the menu, the buttons do not align in the center all on one line.
To better understand I am attaching the photo of how the interface now looks 1 and how I aim to make it happen 2.

Below is the code used:

body {
    background-color: black;
    font-family: "Futura-CondensedExtraBold", sans-serif;
    font-weight: bold;
    background-image: url("wallpaper.png");
    background-position: center top;
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
}
.navbar{
    background-color: #000b29;
    width: 100%;
}
.input-field-warn{
    color: orangered;
    font-size: small;
}
.input-field-ok{
    color: forestgreen;
    font-size: small;
}
.btn-home{
    border-radius: 10%;
    background-color: darkgrey;
    border-color: white;
    border-width: medium;
    font-weight: bold;
    margin-left: 2%;
    color: #222222;
    font-size: 1.5vw;
    width: 12.5vw;
    height: calc(3.2vw + 10px);
    overflow: hidden;
    white-space: nowrap;
}
.btn-home:hover{
    background-color: #525252;
}
.row-1{
    margin-top: 2%;
    margin-left: 10%;
    text-decoration: underline;
    text-underline-offset: 20%;
    color: white;
}
.home-box{
    background: rgba(0, 0, 0, 0.5);
    margin-left: 10%;
    padding: 3%;
    border-radius: 5%;
    font-size: calc(0.7vw + 0.55vh);
    color: #ffffff;
    border: solid white;
}
.home-box-1{
    width: 35%;
    margin-top: 2.5%;
}
.home-box-2{
    width: 55%;
    margin-top: 5%;
}
.home-box-3{
    width: 40%;
    margin-top: 5%;
}
.home-box-4{
    width: 80%;
    margin-top: 2.5%;
}
.button-img{
    margin-left: 10%;
    height: 1.5vw;
    width: 1.5vw;
}
#main-container{
    width: 99vw;
    height: 100%;
}
#login-form{
    align-content: center;
    padding: 5%;
}
#logo-home{
    margin-left: 10%;
    font-size: 2.5vw;
}
#info-img{
    margin-left: 3%;
    width: 5%;
    height: 5%;
}
#home-navbar{
    width: 100vw;
    height: 10%;
}
#nav-container{
    width: 100vw;
    height: 10%;
}
#logo{
    width: 2.5vw;
    height: 2.5vw;
    margin-bottom: 20%;
}
@media screen and (max-width: 992px) {
    #home-button-container{
        justify-content: center;
        overflow: hidden;
        white-space: nowrap;
        width: 100%;
        text-align: center;
    }
    .btn-home{
        padding: 0;
        margin: 0;
        font-size: 2.5vw;
        overflow: hidden;
        white-space: nowrap;
        display: inline-block;

    }
    .home-box-1{
        width: 80%;
        margin-top: 2.5%;
    }
    .home-box-2{
        width: 80%;
        margin-top: 5%;
    }
    .home-box-3{
        width: 80%;
        margin-top: 5%;
    }
    #navbarSupportedContent{
        overflow: hidden;
        white-space: nowrap;
    }
}
<!doctype html>
<html lang="en">
    <head>
        <title>WhoIsOnline</title>
        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
        <script src="index.js"  crossorigin="anonymous"></script>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
        <meta name="viewport" content="width=device-width, initial-scale=1"/>
        <link href="indexStyle.css" rel="stylesheet">
        <link rel="shortcut icon" href="icon.ico" type="image/x-icon">
    </head>
    <body onload="loadInfo()">
    <div id="main-container">
        <div id="nav-container">
            <nav class="navbar py-3 navbar-expand-lg navbar-dark" id="home-navbar">
                <div class="container-fluid">
                    <div id="logo-home">
                        <a class="navbar-brand" href="/">
                            <img src="LOGO%20WHOSONLINE.png" alt="Logo" id="logo">
                        </a>
                    </div>
                    <a class="navbar-brand" href="/">WhoIsOnline</a>
                    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                        <span class="navbar-toggler-icon"></span>
                    </button>
                    <div class="collapse navbar-collapse" id="navbarSupportedContent">
                        <div class="navbar-nav me-auto mb-2 mb-lg-0">
                        </div>
                        <div class="d-grid gap-2 d-md-flex justify-content-md-end" id="home-button-container">
                            <form action="/info" id="info-form"></form>
                            <button class="btn btn-primary me-md-2 btn-home" form="info-form" type="submit" onmouseover="changeColorImage(this, 'white')" onmouseout="changeColorImage(this, 'black')">Info<img src="info.png" class="button-img"></button>
                            <button class="btn btn-primary me-md-2 btn-home" type="button" data-toggle="modal" data-target="#ModalRegister" onmouseover="changeColorImage(this, 'white')" onmouseout="changeColorImage(this, 'black')">SignIn<img src="account.png" class="button-img"></button>
                            <button class="btn btn-primary me-md-2 btn-home" type="button" data-toggle="modal" data-target="#ModalLogIn" onmouseover="changeColorImage(this, 'white')" onmouseout="changeColorImage(this, 'black')">LogIn<img src="lock.png" class="button-img"></button>
                        </div>
                    </div>
                </div>
            </nav>

        </div>
       
    </div>
    </body>
</html>

MEDevel.com: Open-source for Healthcare and Education

Collecting and validating open-source software for healthcare, education, enterprise, development, medical imaging, medical records, and digital pathology.

Visit Medevel

>Solution :

Remove the d-grid class on your #home-button-container. flex and grid can usually work well together in a layout. But in this instance, it is counterproductive to the flex.

body {
  background-color: black;
  font-family: "Futura-CondensedExtraBold", sans-serif;
  font-weight: bold;
  background-image: url("wallpaper.png");
  background-position: center top;
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: fixed;
}

.navbar {
  background-color: #000b29;
  width: 100%;
}

.input-field-warn {
  color: orangered;
  font-size: small;
}

.input-field-ok {
  color: forestgreen;
  font-size: small;
}

.btn-home {
  border-radius: 10%;
  background-color: darkgrey;
  border-color: white;
  border-width: medium;
  font-weight: bold;
  margin-left: 2%;
  color: #222222;
  font-size: 1.5vw;
  width: 12.5vw;
  height: calc(3.2vw + 10px);
  overflow: hidden;
  white-space: nowrap;
}

.btn-home:hover {
  background-color: #525252;
}

.row-1 {
  margin-top: 2%;
  margin-left: 10%;
  text-decoration: underline;
  text-underline-offset: 20%;
  color: white;
}

.home-box {
  background: rgba(0, 0, 0, 0.5);
  margin-left: 10%;
  padding: 3%;
  border-radius: 5%;
  font-size: calc(0.7vw + 0.55vh);
  color: #ffffff;
  border: solid white;
}

.home-box-1 {
  width: 35%;
  margin-top: 2.5%;
}

.home-box-2 {
  width: 55%;
  margin-top: 5%;
}

.home-box-3 {
  width: 40%;
  margin-top: 5%;
}

.home-box-4 {
  width: 80%;
  margin-top: 2.5%;
}

.button-img {
  margin-left: 10%;
  height: 1.5vw;
  width: 1.5vw;
}

#main-container {
  width: 99vw;
  height: 100%;
}

#login-form {
  align-content: center;
  padding: 5%;
}

#logo-home {
  margin-left: 10%;
  font-size: 2.5vw;
}

#info-img {
  margin-left: 3%;
  width: 5%;
  height: 5%;
}

#home-navbar {
  width: 100vw;
  height: 10%;
}

#nav-container {
  width: 100vw;
  height: 10%;
}

#logo {
  width: 2.5vw;
  height: 2.5vw;
  margin-bottom: 20%;
}

@media screen and (max-width: 992px) {
  #home-button-container {
    justify-content: center;
    overflow: hidden;
    white-space: nowrap;
    width: 100%;
    text-align: center;
  }
  .btn-home {
    padding: 0;
    margin: 0;
    font-size: 2.5vw;
    overflow: hidden;
    white-space: nowrap;
    display: inline-block;
  }
  .home-box-1 {
    width: 80%;
    margin-top: 2.5%;
  }
  .home-box-2 {
    width: 80%;
    margin-top: 5%;
  }
  .home-box-3 {
    width: 80%;
    margin-top: 5%;
  }
  #navbarSupportedContent {
    overflow: hidden;
    white-space: nowrap;
  }
}
<!doctype html>
<html lang="en">

<head>
  <title>WhoIsOnline</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
  <script src="index.js" crossorigin="anonymous"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <link href="indexStyle.css" rel="stylesheet">
  <link rel="shortcut icon" href="icon.ico" type="image/x-icon">
</head>

<body>
  <div id="main-container">
    <div id="nav-container">
      <nav class="navbar py-3 navbar-expand-lg navbar-dark" id="home-navbar">
        <div class="container-fluid">
          <div id="logo-home">
            <a class="navbar-brand" href="/">
              <img src="LOGO%20WHOSONLINE.png" alt="Logo" id="logo">
            </a>
          </div>
          <a class="navbar-brand" href="/">WhoIsOnline</a>
          <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
          </button>
          <div class="collapse navbar-collapse" id="navbarSupportedContent">
            <div class="navbar-nav me-auto mb-2 mb-lg-0">
            </div>
            <div class="gap-2 ms-4 d-md-flex justify-content-md-end" id="home-button-container">
              <form action="/info" id="info-form"></form>
              <button class="btn btn-primary me-md-2 btn-home" form="info-form" type="submit" onmouseover="null" onmouseout="null">Info<img src="info.png" class="button-img"></button>
              <button class="btn btn-primary me-md-2 btn-home" type="button" data-toggle="modal" data-target="#ModalRegister" onmouseover="null" onmouseout="null">SignIn<img src="account.png" class="button-img"></button>
              <button class="btn btn-primary me-md-2 btn-home" type="button" data-toggle="modal" data-target="#ModalLogIn" onmouseover="null" onmouseout="null">LogIn<img src="lock.png" class="button-img"></button>
            </div>
          </div>
        </div>
      </nav>

    </div>

  </div>
  </body>

</html>
byMR
Published
Add a comment

Leave a Reply

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use

Read more

Discover more from Dev solutions

Subscribe now to keep reading and get access to the full archive.

Continue reading