Ensure that both the bootstrap buttons and images are aligned correctly on top of the divs

Question

Ensure that both the bootstrap buttons and images are aligned correctly on top of the divs

I am struggling to align three buttons vertically on top of two divs that fill the page. Currently, I can only position them horizontally, and my attempts to center them have not been successful. I have tried various methods like flex, changing positions, and using Bootstrap classes but with no luck. Any advice or help is greatly appreciated.

Please refer to the second captured image for a rough idea of how I want the buttons positioned. The first image shows where I would like the dice to be placed after clicking the "roll dice" button.

HTML

 <!-- HTML code here -->

CSS

 /* CSS code here */

All the content is contained within a "wrapper" div. The buttons and image are inside the wrapper but outside the "player" divs. Thank you.

https://i.sstatic.net/oLNof.jpg

https://i.sstatic.net/yMpPs.jpg

html css bootstrap-4

Answer 1

Answer №1

Creating three buttons centered on the page. Feel free to copy and paste the entire code to see the changes

<!DOCTYPE html>
<html lang="en>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Dice Game</title>   
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <link href="https://fonts.googleapis.com/css?family=Arimo&display=swap" rel="stylesheet">
    <link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <style>
    .green{
      background-color: #0CCE6B;
      height: 100vh;
    }
    .white{
      background-color: white;
      height: 100vh;
    }

   //Styling classes remain the same
   </style>
</head>
<body>
  <div class="container-fluid">
    <div class="row">
      <div class="col-5 col-md-5 green ">
          <!-- Button sample code -->    
      </div>
      <div class="col-2 col-md-2">
        <div class="row">
            <div class="col green">
              <!-- Buttons centered in this column -->
            </div>
            <div class="col white middle">

            </div>        
        </div>
      </div>
      <div class="col-5 col-md-5 white">
        <!-- Player information columns -->
      </div>  
    </div>
  </div>
<script src="index.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html>

I trust this updated code will be beneficial to you

Answer 2

Creating three buttons centered on the page. Feel free to copy and paste the entire code to see the changes

<!DOCTYPE html>
<html lang="en>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Dice Game</title>   
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <link href="https://fonts.googleapis.com/css?family=Arimo&display=swap" rel="stylesheet">
    <link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <style>
    .green{
      background-color: #0CCE6B;
      height: 100vh;
    }
    .white{
      background-color: white;
      height: 100vh;
    }

   //Styling classes remain the same
   </style>
</head>
<body>
  <div class="container-fluid">
    <div class="row">
      <div class="col-5 col-md-5 green ">
          <!-- Button sample code -->    
      </div>
      <div class="col-2 col-md-2">
        <div class="row">
            <div class="col green">
              <!-- Buttons centered in this column -->
            </div>
            <div class="col white middle">

            </div>        
        </div>
      </div>
      <div class="col-5 col-md-5 white">
        <!-- Player information columns -->
      </div>  
    </div>
  </div>
<script src="index.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html>

I trust this updated code will be beneficial to you

Answer 3

Answer №2

Here is the code snippet for a Dice Game:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Dice Game</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <link rel ="stylesheet" type = "text/css" href ="style.css">
    <link href="https://fonts.googleapis.com/css?family=Arimo&display=swap" rel="stylesheet">
    <link rel = "stylesheet" href = "css/all.css">
    ... (CSS styles and JavaScript scripts)

<script>
var d1 = document.getElementById('newGame');
d1.style.position = "absolute";
d1.style.left = -675+'px';
d1.style.top = 200+'px';

var d2 = document.getElementById('rollDice');
d2.style.position = "absolute";
d2.style.left =-675+'px';
d2.style.top = 300+'px';

var d3 = document.getElementById('hold');
d3.style.position = "absolute";
d3.style.left = -675+'px';
d3.style.top = 400+'px';

</script></body>
</html>

Thank you for providing this code!

Answer 4

Here is the code snippet for a Dice Game:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Dice Game</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <link rel ="stylesheet" type = "text/css" href ="style.css">
    <link href="https://fonts.googleapis.com/css?family=Arimo&display=swap" rel="stylesheet">
    <link rel = "stylesheet" href = "css/all.css">
    ... (CSS styles and JavaScript scripts)

<script>
var d1 = document.getElementById('newGame');
d1.style.position = "absolute";
d1.style.left = -675+'px';
d1.style.top = 200+'px';

var d2 = document.getElementById('rollDice');
d2.style.position = "absolute";
d2.style.left =-675+'px';
d2.style.top = 300+'px';

var d3 = document.getElementById('hold');
d3.style.position = "absolute";
d3.style.left = -675+'px';
d3.style.top = 400+'px';

</script></body>
</html>

Thank you for providing this code!

Ensure that both the bootstrap buttons and images are aligned correctly on top of the divs

Answer №1

Answer №2

Similar questions

Attempting to extract information from a webpage that contains multiple data tables, but encountering an issue where only the first table is successfully scraped

Fetch the contents of a div from a PHP page on a different domain and display it on another webpage

In what ways can a distant ancestor influence its subsequent generations down the line?

What could be the reason for the meta viewport not functioning properly on Android devices with Cordova 5.1.1?

At what point will the browser display changes made to css using jQuery?

Show the initially chosen option in a dropdown menu when updating a record using mysqli

Creating a CSS triangle that smoothly transitions between two different colors

How can I translate these JQuery functions into vanilla JavaScript?

Is it advisable to incorporate different React UI libraries within one project?

Guide to adding a Scrollable Navbar

Developing a single page that caters to various users' needs

Tips for accessing a URL with a specific value in the HTML file

Changing the container's height in an HTML document

Display of Navigation Bar in Angular is Not Proper

Python script for connecting to mWebSocket Server using WebSocket client

The PHP counter conceals the comma upon loading and does not display it permanently

Guide to dynamically add data to two columns

Tips for concealing broken images in jQuery/JavaScript when generating dynamic content

What are the steps to separate Bootstrap 5 from other frameworks?

The server mistakenly sent the resource as a Stylesheet even though it was interpreted differently