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

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/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
        <script src="https://cdn.jsdelivr.net/npm/[email protected]/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 onl oad="loadInfo()">
    <div id="main-container">
        <div id="nav-container">
            <nav  id="home-navbar">
                <div >
                    <div id="logo-home">
                        <a  href="/">
                            <img src="LOGO WHOSONLINE.png" alt="Logo" id="logo">
                        </a>
                    </div>
                    <a  href="/">WhoIsOnline</a>
                    <button  type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                        <span ></span>
                    </button>
                    <div  id="navbarSupportedContent">
                        <div >
                        </div>
                        <div  id="home-button-container">
                            <form action="/info" id="info-form"></form>
                            <button  form="info-form" type="submit" onm ouseover="changeColorImage(this, 'white')" onm ouseout="changeColorImage(this, 'black')">Info<img src="info.png" ></button>
                            <button  type="button" data-toggle="modal" data-target="#ModalRegister" onm ouseover="changeColorImage(this, 'white')" onm ouseout="changeColorImage(this, 'black')">SignIn<img src="account.png" ></button>
                            <button  type="button" data-toggle="modal" data-target="#ModalLogIn" onm ouseover="changeColorImage(this, 'white')" onm ouseout="changeColorImage(this, 'black')">LogIn<img src="lock.png" ></button>
                        </div>
                    </div>
                </div>
            </nav>

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

CodePudding user response：

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/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/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  id="home-navbar">
        <div >
          <div id="logo-home">
            <a  href="/">
              <img src="LOGO WHOSONLINE.png" alt="Logo" id="logo">
            </a>
          </div>
          <a  href="/">WhoIsOnline</a>
          <button  type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
            <span ></span>
          </button>
          <div  id="navbarSupportedContent">
            <div >
            </div>
            <div  id="home-button-container">
              <form action="/info" id="info-form"></form>
              <button  form="info-form" type="submit" onm ouseover="null" onm ouseout="null">Info<img src="info.png" ></button>
              <button  type="button" data-toggle="modal" data-target="#ModalRegister" onm ouseover="null" onm ouseout="null">SignIn<img src="account.png" ></button>
              <button  type="button" data-toggle="modal" data-target="#ModalLogIn" onm ouseover="null" onm ouseout="null">LogIn<img src="lock.png" ></button>
            </div>
          </div>
        </div>
      </nav>

    </div>

  </div>
  </body>

</html>

CodePudding user response：

You are using the buttons outside the form - try this one:

    <form action="/info" id="info-form">                
    <button  form="info-form" type="submit" onm ouseover="changeColorImage(this, 'white')" onm ouseout="changeColorImage(this, 'black')">Info<img src="info.png" ></button>
<button  type="button" data-toggle="modal" data-target="#ModalRegister" onm ouseover="changeColorImage(this, 'white')" onm ouseout="changeColorImage(this, 'black')">SignIn<img src="account.png" ></button>
<button  type="button" data-toggle="modal" data-target="#ModalLogIn" onm ouseover="changeColorImage(this, 'white')" onm ouseout="changeColorImage(this, 'black')">LogIn<img src="lock.png" ></button>
  </form>

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/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
        <script src="https://cdn.jsdelivr.net/npm/[email protected]/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 onl oad="loadInfo()">
    <div id="main-container">
        <div id="nav-container">
            <nav  id="home-navbar">
                <div >
                    <div id="logo-home">
                        <a  href="/">
                            <img src="LOGO WHOSONLINE.png" alt="Logo" id="logo">
                        </a>
                    </div>
                    <a  href="/">WhoIsOnline</a>
                    <button  type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                        <span ></span>
                    </button>
                    <div  id="navbarSupportedContent">
                        <div >
                        </div>
                        <div  id="home-button-container">
                            <form action="/info" id="info-form">
            

                            <button  form="info-form" type="submit" onm ouseover="changeColorImage(this, 'white')" onm ouseout="changeColorImage(this, 'black')">Info<img src="info.png" ></button>
                            <button  type="button" data-toggle="modal" data-target="#ModalRegister" onm ouseover="changeColorImage(this, 'white')" onm ouseout="changeColorImage(this, 'black')">SignIn<img src="account.png" ></button>
                            <button  type="button" data-toggle="modal" data-target="#ModalLogIn" onm ouseover="changeColorImage(this, 'white')" onm ouseout="changeColorImage(this, 'black')">LogIn<img src="lock.png" ></button>
                        </form>
                        </div>
                    </div>
                </div>
            </nav>

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