Tips for arranging various HTML elements in a horizontally aligned row within a Bootstrap scrollbar

I am encountering challenges with the frontend of my webapp. I utilized Bootstrap along with some customized CSS definitions for adjustments. While the desktop interface appears fine, there is an issue with the navbar on smartphones. When attempting to scroll through the menu on mobile devices, the buttons fail to align in the center on a single line. To provide further clarity, I have included images depicting the current interface 1 and the desired outcome 2.

Here is the code snippet being 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%;
}
...
@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;

    }
    ...
}
<!doctype html>
<html lang="en">
    <head>
        <title>WhoIsOnline</title>
        <link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="a2c0cdcdd6d1d6d0c3d2e2978c938c91">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
        <script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="c4a6ababb0b7b0b6a5b484f1eaf5eaf7">[email protected]</a>/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">
                ...

htmlcsstwitter-bootstrapbootstrap-4flexbox

Answer №1

It is advisable to remove the d-grid class from your #home-button-container. While flex and grid can often complement each other in a layout, in this particular scenario, it hinders the functionality of the flex element.

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/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="accec3c3d8dfd8decddcec99829d829f">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
  <script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="1d7f7272696e696f7c6d5d28332c332e">[email protected]</a>/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>

Answer №2

Consider using the following form to organize your buttons more effectively:

<form action="/info" id="info-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>
</form>

Styling and CSS code snippet for creating an engaging user interface:

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%;
}
/* More CSS styles... */

HTML markup including Bootstrap framework for responsive design:

<!doctype html>
<html lang="en">
    <head>
        <title>WhoIsOnline</title>
        <link href="https://cdn.jsdelivr.net/npm/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
        <script src="https://cdn.jsdelivr.net/npm/bootstrap/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">
                        <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="d-grid gap-2 d-md-flex justify-content-md-end" id="home-button-container">
                                <form action="/info" id="info-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>
                            </form>
                            </div>
                        </div>
                    </div>
                </nav>
            </div>
        </div>
    </body>
</html>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Ways to disable the caching feature in Google Chrome

When I am working on CSS and JS around a page, I need to disable the cache mechanism in Google Chrome browser. A trick is to open Chrome DevTools, which automatically disables the cache mechanism (you can configure this in the settings section). Are ther ...

javascripthtmlcssgoogle-chromegoogle-chrome-extension

Struggling to extract information from HTML code through Python web scraping techniques

Hello there! I'm currently in the process of extracting dividend history data for a specific stock from a website using web scraping in Python. However, being new to Python, I'm facing some challenges in retrieving the data. Below is a snippet of ...

pythonhtmlcsvweb-scraping

JavaScript code to modify a table row

I have a dynamic table that increases with Firebase data, and I am trying to incorporate a delete and edit button on each row. While the remove button is working fine, I am facing issues with implementing the edit functionality. Although I came across some ...

javascriptjqueryhtmlfirebasefirebase-realtime-database

Ways to display the success value prior to the completion of AJAX jQuery from the PHP page

Here is the AJAX code I am using: $(".content").empty(); $.ajax({ type: 'POST', url: 'xyz.php', data: $('.chk:checked').serialize(), success: function(data) { $(".content").append(data); } }); M ...

phpjqueryhtmlajax

What is the best way to combine two DIV table rows within Bootstrap 5?

Looking at the code below, there are 6 cells in 2 rows, but I want to merge cell number "2" and "5". I know this can be accomplished using CSS Table DIV, but is there a way to do it with Bootstrap? I haven't found any documentation that worked for me ...

htmlcsstwitter-bootstrapbootstrap-5bootstrap-grid

javascript box is hidden to prevent displaying of values

I need the negative character to disappear when the user clicks the minus (-) button. The count should stop at 0. Currently, it is displaying characters like -1, -2, -3. I only want to show 0 or numbers greater than 0. <script type="text/javascript" ...

phpjavascripthtml

The event listener for changing radio buttons

Imagine we have two radio buttons <input type="radio" value="val1" name="radio1" onChange="change()"/> <input type="radio" value="val2" name="radio1" onChange="change()&quo ...

javascripthtmljqueryreactjsdom

Retrieve the content of an element within a freshly launched window

I am looking to utilize JavaScript to open an html file and input some data into specific elements. My attempt so far has been: var info_window = window.open('info_print.html') info_window.document.getElementById('new_info').innerHTML ...

javascriptjqueryhtml

Adjusting the letter spacing of individual characters using HTML and CSS

Is there a way to set letter-spacing for each character with different sizes as the user types in a text box? I attempted to use letter-spacing in CSS, but it changed all characters to the same size. Is there a possible solution for this? Here is the code ...

javascripthtmlcssiosweb

Animating back with a jQuery if statement

Is there a way to implement an if statement that triggers an animation when the right image reaches +400px, and then animates back to -400px upon hovering over the image? $('#left img').mouseenter(function() { $('#right img').animate ...

javascriptjquerycssanimation

Creating a Simple HTML Table Using PHP Arrays

I attempted to create a simple PHP array table, but the output of my code did not meet my expectations. <?php $names = array ( 'First Name' => array('Alfre', 'Beka', 'Charlie'), ...

phphtml

"Challenges with Full-Width Dropdowns in Multi-level Mega Menus

I am currently attempting to design a multi-level mega menu that spans the full width of the screen, while keeping the content within it restricted to a maximum width of 1240px. I have managed to set the content to the maximum width, but I am facing challe ...

htmlcssdropdown

unable to display loading image prior to upload

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html> <html lang="en"> <head> <title>Unique Prints</title> <meta charset="utf-8"> <meta name="viewport" conte ...

javascriptjqueryhtmlajaxtwitter-bootstrap

The IFrame event functions properly in HTML, but encounters issues when used in an HTA environment

In this unique HTML document, a message dialog will be displayed when a button inside an iframe is clicked: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <script language="VBScript" type="text/vbs ...

htmlvbscripthta

What is the best way to align labels and textboxes next to each other when resizing?

I am facing an issue with screen resizing. The code below appears fine on a full screen, but as soon as I resize the window even a tiny bit, it starts to look distorted and unattractive. I have gone through the Bootstrap 4 grid layout tutorial, but it is n ...

csstwitter-bootstrapresponsive-designbootstrap-4

Incorporate Unicode characters into the structure of an HTML tag

I'm having an issue with the C# script below that is supposed to remove HTML tags from a description column in SSIS. I attempted to include the unicode value &#58 in the htmlTagPattern string, but it's not working as expected. Any help would ...

c#htmlsql-serverssisetl

Tips for Preserving the HTML Page State After Making jQuery Changes

Hi there! I am currently working on developing a card game using HTML5, CSS3, and Javascript. This game will communicate with a server built on node.js, facilitated by socket.io for data transmission. One of the key features I am trying to implement is th ...

javascriptjqueryhtmlnode.jssocket.io

Add a css class to a <div> that is created by an <ng-template> inside the <ngx-datatable-column> element

I am struggling to implement the display: flex style on the parent <div> containing my <span> However, since the <span> is dynamically generated by the ng-template of the ngx-datatable-column, I'm finding it challenging to apply thi ...

htmlcssangularsass

Looping through elements with jQuery's `each` method within another `

When using div containers in my code, I wanted to loop over them and then iterate through the items within each container. Instead of $('.stackContainer .stackItem').each(, I was looking for a solution like this: // setup stacks $('.stackC ...

javascriptjqueryhtml

Decrease the dimensions of the image while maintaining its width at 100%

I've got a dilemma with the images on my website that are linked from image hosting sites. They all need to be displayed at 100% width, but some of them have huge pixel dimensions which cause slow loading times. Is there a way to resize the images wi ...

javascripthtmlcssimage