What is the best way to center these buttons vertically within the bootstrap container?

I'm having a difficult time center aligning these buttons in the middle of the page. I want them to stack on top of each other in the center of the overlay, but currently they are stuck at the top. Can anyone help me with this issue?

https://i.sstatic.net/2ocdz.png

Below is an example of my HTML:

<h1 class="text-center">Portfolio</h1>
    <div class="row p-5">
      <div class=" col-sm-6 col-xl-4 mb-3">
        <div class="card">
          <img src="img/image-1.jpg" class="card-img-top" alt="image-1">
          <div class="card-body">
            <h5 class="card-title text-center">Project 1</h5>
          </div>
          <div id="overlay">
            <div class="d-flex flex-column align-content-center">
              <button type="button" class="btn btn-primary">Demo</button>
              <button type="button" class="btn btn-secondary">Github Repo</button>
            </div>
          </div> 
        </div>
      </div>

To view the code on JS fiddle click here: https://jsfiddle.net/apasric4/wvaepsyk/1/

htmlcssbootstrap-4

Answer №1

You should include the CSS properties display: flex for #overlay, and both flex: 1 and justify-content: center for the children (which are targeted with #overlay > div):

#overlay {
  display: flex;
}

#overlay > div {
  flex: 1;
  justify-content: center;
}

View the changes here.

<!DOCTYPE html>

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>Capstone Project</title>
  <meta name="description" content="">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <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" href="css/normalize.css">
  <link rel="stylesheet" href="css/styles.css">
</head>

<body>

  <!-- navigation bar -->
  <ul class="nav sticky-top justify-content-around">
    <li class="nav-item">
      <a class="nav-link active" href="#">About Me</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Portfolio</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Skills</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Contact Me</a>
    </li>
  </ul>

  <button type="button" class="btn btn-primary hire" data-toggle="modal" data-target="#exampleModalCenter">
    Hire Me
  </button>

  <div class="about">
    <img src="img/profile-picture.jpg" class="img-fluid rounded mx-auto d-block shadow p-3 mb-5" alt="Profile Picture">
    <div id="typewriter" class="container text-center">
    </div>
  </div>

  <div id="particles-js">
  </div>


  <h1 class="text-center">Portfolio</h1>
  <div class="row p-5">
    <div class=" col-sm-6 col-xl-4 mb-3">
      <div class="card">
        <img src="img/image-1.jpg" class="card-img-top" alt="image-1">
        <div class="card-body">
          <h5 class="card-title text-center">Project 1</h5>
        </div>
        <div id="overlay">
          <div class="d-flex flex-column align-content-center">
            <button type="button" class="btn btn-primary">Demo</button>
            <button type="button" class="btn btn-secondary">Github Repo</button>
          </div>
        </div>
      </div>
    </div>

    ...
    
  </div>

  ...

</body>

</html>

If you want the buttons to display as 'buttons' within the overlay, also consider applying align-items: center.

Answer №2

Your code already includes the .align-content-center class. Simply add the following properties to the existing class: 

.align-content-center {
    position: absolute;
        top: 50%;
        width: 100%;
        left: 50%;
        transform: translate(-50%, -50%);    
    }

View the changes here:https://jsfiddle.net/hgf5m9kq/

Answer №3

Here's a different approach that doesn't involve using display flex;

  1. Apply a z-index to the #overlay element,
  2. Add position absolute to the .d-flex class,
  3. Move the .d-flex element outside of the #overlay.

CSS Update:

#overlay {
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  transition: 0.02s ease-in;
  z-index: 99999;
}

.d-flex.flex-column.align-content-center{
  position:absolute;
  width:100%;
}

Layout update:

<div class="card">
   <img src="img/image-1.jpg" class="card-img-top" alt="image-1">
   <div class="card-body">
     <h5 class="card-title text-center">Project 1</h5>
   </div>
   <div id="overlay"></div>
   <div class="d-flex flex-column align-content-center">
     <button type="button" class="btn btn-primary">Demo</button>
     <button type="button" class="btn btn-secondary">Github Repo</button>
           </div>
</div>

Result:

https://i.sstatic.net/aumQ2.png

Answer №4

For optimal display, ensure that the parent div "overlay" is set to position:relative and the child elements are set to position:absolute.

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

Dynamic sliding effect in CSS for seamless showing and hiding of div elements

I stumbled upon a fantastic solution in these forums How to create sliding DIV on click? However, what I really wanted was for the content to fade in and out with just a click of a button. Here is the code snippet I am currently working with: <html> ...

javascripthtmlcss

What could be the reason that the accordion is failing to expand or collapse when clicked?

I am facing an issue where the div is not expanding or collapsing upon clicking the + sign. I have tried removing unnecessary scripts but it still doesn't work. Additionally, there is an error in the console: Uncaught TypeError: $(...).slideReveal is ...

htmlcsstwitter-bootstrapbootstrap-4accordion

Checking for the Existence of a Database Table in HTML5 Local Storage

Upon each visit to my page, I automatically generate a few local database tables if they do not already exist. Subsequently, I retrieve records from the Actual Database and insert them into these newly created local tables. I am wondering if there is a me ...

javascriptsqldatabasehtmllocal

Maximizing image size with dynamic height and automatic width using the NextJS Image Component

I am trying to set my images to have a fixed pixel height and automatic width using object-fit: contain. How can I achieve this with the NextJS Image Component without using layout="fill" so that the intrinsic width of the image (width: auto) is ...

cssimagenext.js

The website is missing a scrollbar

I am having trouble getting the scroll bar to show up on my website, even after adding the following CSS: { overflow-y:scroll; } I have tried putting it in both the body and HTML sections of the CSS. If you'd like to take a look at the website, her ...

htmlcsswebscrollbar

Create an additional column in HTML using Bootstrap styling

I am currently working on a CRUD form (using PHPMyAdmin for the database), developed in HTML, JavaScript, and PHP. The queries are executed using jQuery. I am facing an issue with my code - whenever I add a new column to my table, the formatting gets messe ...

javascriptphphtmlbootstrap-4datatable

Where can I find guidance on utilizing CSS keyboards with styled-components?

image one image two 1-Is there a way to apply colored text to styled-components similar to what is shown in the tutorial video on the left in the second image? I really dislike this red text :( 2-Can styled-components provide CSS support like in the secon ...

cssreactjsreact-nativestylesstyled-components

The min-height property does not seem to be compatible with -webkit-calc

I've been experimenting with this code: .main{ min-height: -moz-calc(100% -50px); min-height: -webkit-calc(100% -50px); min-height: calc(100% -50px); background-color:#000; color:white; } html{ height:100%; } <html ...

htmlcss

The modal appears on the screen prior to the content being shown

While attempting to render a bootstrap modal with content from a REST call, I am encountering an issue where the modal appears before the content has finished populating. The modal is triggered by a button click event. If I click the button again after wa ...

javascripthtmlangularjstwitter-bootstrap

Issue with unordered list item styling in CSS

Encountered a peculiar problem: Within my .cshtml file, there is another element: <ul> <li>Test</li> <li>Test2 <ul> <li>Test3</li> </ul> </li> <li>Tes ...

htmlcss

Implement a function that allows users to input a pin code digit by digit using a single HTML input

I am working on an application that requires users to input an SMS code for login. Below is a simplified example of what I need. For better accessibility, I want the SMS code input to be just one <input> in the HTML. I would also like to eliminate t ...

htmlcssreactjswebmaterial-ui

Updating CSS stylesheets dynamically when onchange event occurs

I am currently able to dynamically change style rules using JS, but I feel that this is limiting. I would prefer to be able to swap entire CSS stylesheet files easily. Do you have any suggestions on how to accomplish this? Here is my code: <label>T ...

javascriptjqueryhtmlcss

Executing PHP Code with an External JavaScript File in an HTML Document

I have a script called initialize_database.js that utilizes JQuery to trigger a PHP script for creating a database and some tables. I made sure the PHP script is working correctly by adding HTML to test it independently, and it performed as expected. Below ...

javascriptphpjqueryhtml

The Transformicons by Navicon featuring a stylish blue outline

While experimenting with the navicon from sara soueidan, I noticed a blue selector around the icons that I can't seem to get rid of. Is this something specific to the method used, or just a misunderstanding of jQuery? Here is the code snippet: http:/ ...

jqueryhtmlcssiconstransform

What is the method for including a TabIndex property in a JSON file?

https://i.sstatic.net/ISi72.png I discussed the integration of HTML fields within a JSON file and highlighted how to utilize the TabIndex property effectively in JSON files. ...

c#htmlangulartypes

Design a captivating Profile Picture form using HTML and CSS styling

In my form, I am looking to include a user's Profile picture which should be displayed in either a circular or rectangular shape. Initially, the image area will show a black background or a placeholder image. When the user clicks on this area, they sh ...

javascriptjqueryhtmlcssuser-profile

positioning two text sections on the left side of an image

I am attempting to create a page layout with text that should look like this: Team Name My Team Name +-------------+ Division Team Division| | Current Ranki ...

htmlcss

Implementing a dynamic update of an HTML element's content with JSON data - Learn how!

My task involves creating a quiz application where I need to show the answers along with images of the choices stored in my JSON data. However, I encounter an error: Uncaught TypeError: Cannot set properties of null (setting 'src') when I attempt ...

javascripthtmljson

Utilizing Google Charts and SteppedAreaChart to visually track the evolution of value over time

My task involves extracting value history data from the database. Every time the value changes, the trigger saves the old value, new value, as well as the date and time of the change. For a web application, I need to visualize these changes. Since the val ...

javascripthtmlgoogle-visualization

Angular with Bootstrap 4 pills - ensuring active link is maintained

Here's the navbar code snippet that I currently have: <nav class="nav nav-pills"> <a href="#" class="nav-item nav-link active" data-toggle="tab" routerLink="/home" routerLinkActive="active"> <i class="fa fa-lg fa-home"& ...

bootstrap-4angular-routingangular8