In Bootstrap 4, the vertical group of buttons is aligned to the bottom

I am trying to align a group of buttons at the bottom, centered horizontally and aligned vertically. Currently, this is how it looks:

<div class="row">
    <div class="col-md-4">
        <div class="center-block">
            <div class="btn-group-vertical">
                <p>
                    <button class="btn btn-info btn-sm btn-block">
                        Button 1a
                    </button>
                </p>
                <p>
                    <button class="btn btn-info btn-sm btn-block">
                        Button 2a
                    </button>
                </p>
            </div>
        </div>
    </div>

The current CSS for this setup is as follows:

.center-block {
  display: block;
  text-align: center;
}

row {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
}

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

What I want to achieve is the layout shown in the second picture.

cssangularbuttonbootstrap-4ng-bootstrap

Answer №1

To achieve the desired layout, you need to set the row's position to relative and align the center-block to the bottom while maintaining its absolute positioning.

Refer to the following code snippet for implementation:

.center-block {
  display: block;
  text-align: center;
  position: absolute;
  bottom: 0;
}

row {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  position: relative;
}
<div class="row">
  <div class="col-md-4">
    <div class="center-block">
      <div class="btn-group-vertical">
        <p>
          <button class="btn btn-info btn-sm btn-block">
                        Button 1a
          </button>
        </p>
        <p>
          <button class="btn btn-info btn-sm btn-block">
                        Button 2a
          </button>
        </p>
      </div>
    </div>
  </div>

Answer №2

There are two methods to vertically center content:
1.

<div class="container d-flex h-100">
    <div class="row justify-content-center align-self-center">
     I am positioned in the middle vertically
    </div>
</div>

2.

<div class="container h-100">
    <div class="row align-items-center h-100">
        <div class="col-6 mx-auto">
            <div class="jumbotron">
                I am centered vertically on the page
            </div>
        </div>
    </div>
</div>

Best regards

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

The transition feature is not functioning properly in Firefox

I have a basic HTML and CSS setup below. It seems to be working fine in Chrome, but I'm having trouble with the transition effect in Firefox. I am currently using Firefox version 18. I tried looking up solutions on Google and Stack Overflow, but none ...

htmlcsscss-transitionstransition

Tkinter button error: 'int' object cannot be iterated over

Within my code, I establish a set of buttons through a for loop and when the green button is clicked, it triggers a function. The issue appears to be that when the function is executed, it operates within the confines of the Button class, not utilizing the ...

pythonbuttontkinter

Incorporating DevExtreme into an Angular application

After following the suggested command to add DevExtreme to my angular project using npx -p devextreme-cli devextreme add devextreme-angular, I encountered an issue related to node-modules/sass/embedded or a self-signed certificate problem. Despite trying s ...

angularnpmnode-sassdevextremedevextreme-angular

Make the div fill the entire width and height of its parent element

Here is the code I am working with: <div> <div class="inner"></div <img src="blabla" /> </div> My goal is to make the .inner div 100% width and 100% height of its parent div, which is dependent on the dimensions of th ...

htmlcss

Encountering TypeScript Observable Error When Sending Multiple API Requests (Angular, TypeScript, RxJS)

Encountering an Issue: ERROR in src/app/fetch-trefle.service.ts:86:31 - error TS2355: A function whose declared type is neither 'void' nor 'any' must return a value. 86 mergeMap((item: any): Observable<any> => { Here& ...

angulartypescriptrxjsobservable

css avoiding code duplication with nested classes

I created a custom CSS class named button.blue: button.blue { background-color: blue; ... } button.blue:active { background-color: darkblue; ... } button.blue:hover { background-color: lightblue; ... } To implement this class, I use the following code: ...

css

How to store angular 2 table information generated using ngFor

I am currently working on a project where I need to create an editable table using data retrieved from the back end. My goal now is to save any updated data. I attempted to use formControl, but it seems to only save the data in the last column. Below is a ...

javascriptangular

Enhance your production mode with @ngrx/store-devtools

Currently, I have integrated @ngrx/store-devtools instrumentation with the Chrome Extension. Is it advisable to turn off this feature for production mode? ...

angularngrx

Choosing classes with BEM convention

I've been working on implementing the BEM naming convention, and I'm facing a challenge with styling a "tooltip" block using different themes. For example, applying the "default" theme like this: <div class="tooltip tooltip_theme_default"> ...

cssbem

Navigation bar with a full-page slider

I am trying to incorporate my bootstrap nav bar into a full-width slider, similar to the layout in this example. https://i.sstatic.net/LE9wP.jpg This is the full width slider http://codepen.io/grovesdm/pen/MazqzQ Currently, I have positioned the nav ba ...

javascriptjqueryhtmlcsstwitter-bootstrap

Center align for drop-down menu

I'm currently working on styling an asp:DropDownList element using custom CSS. I have successfully set the height, but I am facing a challenge with getting the text to align in the middle of the element rather than at the bottom. The vertical-align:mi ...

asp.netcss

Encountering difficulties in generating a personalized Angular Element

Currently, I am in the process of developing a custom Component that needs to be registered to a module. Here is how it is being done: app.module.ts import { createCustomElement } from "@angular/elements"; @NgModule({ declarations: [ExtensionCompone ...

angulartypescript

Here's a way to align big text in the center while aligning small text at the bottom

How can I position two text blocks on the same line in HTML, with one text block having a larger font size and vertically aligned in the middle, while the other text block sits lower to create a cohesive design? To better illustrate what I mean, I have cre ...

htmlcssvertical-alignmentfont-size

I am seeking a way to access the child infoWindow within a Google Maps marker in Angular 5

I am working on an Angular 5 application that utilizes the Angular Google Maps(AGM) library available at . I have implemented functionality where clicking on an item in a list within one component triggers the display of a child infoWindow associated with ...

angulargoogle-maps

how to arrange wordpress menu items in a vertical layout

Looking to display the sub-submenus of my site beneath their parent menu node similar to the layout of the Oracle website. Utilized a theme called Oracle, and it's visually appealing. Now, the goal is to exhibit the sub sub menus directly under their ...

htmlcsswordpresswordpress-theming

tips for aligning text to the right of an image

For my college project, I am working on a website. However, I have encountered an issue with using a jsp script to display products in a specific way on the webpage. The problem is that I cannot control where the information about price, name, and descript ...

htmlcss

Angular Material Textbox with drop shadow

Currently working on a form design and aiming for the input box to resemble the image provided within the angular material matInput framework. Any suggestions on how to accomplish this? Attached is a visual representation of the desired input box appearan ...

angularinputangular-material

Guide on integrating the plyr npm module for creating a video player in Angular2

Looking to implement the Plyr npm package in an Angular 6 application to create a versatile video player capable of streaming m3u8 and Youtube videos. The demos on their npm page are written in plain JavaScript, so I need guidance on how to integrate it in ...

angulartypescriptangular6plyr.js

Creating specific CSS classes for individual slides in a basic slider framework

So, I have a rather simple slider that is created using only CSS. Each slide has unique labels for navigation buttons. The main question here is: how can I dynamically add or remove classes to specific items on the slide only when that particular slide is ...

javascriptjqueryhtmlcss

What can I do to resolve the problem with td border

Check out my website over at browsethewebclean.com I've come across a peculiar issue with the borders and background color of some nested tables on my page. It seems that the border is not aligning properly and the background color goes beyond the im ...

csshtmlhtml-table