Ways to position buttons at the bottom of a webpage

I am looking to position all buttons at the bottom of the page:

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

This is the code snippet:

https://codesandbox.io/s/angular-7-bootstrap-4-3pv0p?from-embed

<div class="container-fluid py-2">
  <div class="row">
    <div class="col-md-12 mx-auto">
      <div class="card rounded-0">
        <div class="card-header">
          <h2>Boot Container View</h2>
        </div>
        <div class="card-body">
          <div class="row">
            <div class="col-md-6">
              <div class="ws-details" style="background:gray; height:100px">
                Element1
              </div>
              <div
                class="order-details"
                style="background:lightgray; height:200px"
              >
                Element 2
              </div>
            </div>
            <div class="col-md-6">
              <div style="background:gray; height:305px">Element3</div>
            </div>
          </div>
          <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>
            <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 1b
                    </button>
                  </p>
                  <p>
                    <button class="btn btn-info btn-sm btn-block">
                      Button 2b
                    </button>
                  </p>

                  <p>
                    <button class="btn btn-info btn-sm btn-block">
                      Button 3b
                    </button>
                  </p>
                </div>
              </div>
            </div>
            <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 1c
                    </button>
                  </p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

I have attempted using both absolute and relative positioning with parent/child elements. However, I am still facing issues with aligning the buttons properly. Additionally, I want to adjust the size (width) of the buttons, but changing the width is causing problems with centering the buttons.

Answer №1


Modifications in the app.component.html file:


Alter line 25 in your HTML file from <div class="row"> to

<div class="row position-relative">
.

Adjust <div class="center-block"> to

<div class="center-block align-to-bottom">
on lines 27 and 65.


Modifications in the app.component.css file:


Include:

@media only screen and (min-width: 767px) {
  .align-to-bottom {
    bottom: 0;
    position: absolute;
  }
}

Access the editor here: https://codesandbox.io/s/angular-7-bootstrap-4-u5uet


If you want to adjust the width of the button, you can add button.btn-info {width: 150px;} to your CSS. You mentioned an issue with the center button, could you provide more details about this problem?

Answer №2

apply the following css styles:

position:fixed
z-index:999

Answer №3

When incorporating a bootstrap in your code, you may want to align your buttons at the bottom. To achieve this, create a custom CSS class called "alignBottom".

.alignBottom{
     position: absolute;
     bottom: 0px;
}

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

Prevent clicks from passing through the transparent header-div onto bootstrap buttons

I have a webpage built with AngularJS and Bootstrap. It's currently in beta and available online in (German and): teacher.scool.cool simply click on "test anmelden" navigate to the next page using the menu This webpage features a fixed transparent ...

I am struggling to layer the boxes using z-index

I have been struggling to find a solution to the problem, but nothing seems to be working. My goal is to create a gradient border for a slideshow on my website, similar to the one showcased in this video. I attempted to use the :before pseudo selector in m ...

Modify the default background color for the chosen element in the tree structure

Could someone assist me in changing the default background color of a selected element in the tree? Below is the XHTML code: <style type="text/css"> .ui-state-highlight,.ui-widget-content .ui-state-highlight,.ui-widget-header .ui-state- ...

What is preventing Kohana from reading my CSS?

Recently, I launched my website kipclip.com on the Kohana platform and added a new rental page. However, the CSS and JS files are not being applied to this page. I've looked into how these files are included in Kohana but haven't had any luck so ...

Make sure to verify if the mode in Angular is either visible-print or hidden-print

Here is a snippet of code <div class="row"> <div class="col-sm-12 visible-print"> Content (display in full width when printed) </div> <div class="col-sm-6 hidden-print"> Content (same as above but only half width when ...

What is the best way to implement two distinct global CSS styles for separate pages in Next.js?

I'm looking to give my website a fresh look by creating two different global CSS styles. Is it possible to use one CSS style for the old pages and another for the new pages? ...

Display additional javascript code for expanding a marquee

Currently, I am working on a stock ticker project using JavaScript. It's progressing well, and now I am focusing on adding a "show more" button to style the ticker. The button should be placed outside of the marquee. When clicked, it will expand the m ...

activating hover states is prevented when using overflow:scroll

Visit the codepen page I am attempting to set a max-height or height to a long list and make the rest scroll. I achieved this by using: height:800px; overflow:scroll; The issue I'm facing is that the "#subcategory" items stop displaying on hover ...

What is the best way to limit the length of text in a div if it surpasses a

As I work on a website, users have the ability to add headings to different sections of a page. For example: M11-001 - loss of container and goods from Manchester Some headings can be quite detailed, but in reality, only the first few words are needed to ...

What are some methods for customizing the calendar icon displayed in an input field with type date?

Is there a way to customize the calendar logo without relying on jquery? The desired appearance should resemble the image shown below: https://i.sstatic.net/G06iZ.png input { width: 50%; padding: 8px; border-radius: 10px; ...

Illuminate the expanded dropdown menu in a Bootstrap 5 navbar

Bootstrap 5 navbar allows for the creation of dropdown menus. Is there a way to highlight the current menu item when a dropdown is opened, similar to how it's done in Windows desktop applications? This feature is not provided by Bootstrap 5: https:/ ...

The HTML dropdown menu becomes crowded with numerous <li menu items, leading to it wrapping

One issue arises when the number of menu items exceeds the capacity to fit on a single line, causing them not to wrap from left to right onto the second line. The desired outcome is for the second line of the menu to start on the left just like the first l ...

Tips for updating the content of a div with fresh data using a slideshow effect in jQuery

Imagine you have a div called A and an array filled with text data. When t=0, div A will display $data[0]. Then, after every n seconds, I want the div to show the next piece of data in the array. I am interested in creating a transition effect similar to ...

CSS/JS Label Positioner using Mootools, perhaps?

I have been tasked with incorporating a form into our website. It seems simple at first, but this particular form has some interesting JavaScript code in place to ensure that the label for each input field sits inside it. This is a clever feature, but unfo ...

Designing a component with Bootstrap-inspired flair

We are currently in the process of transitioning our ASPX CMS website to a new platform, and some of the retired pages will be hosted on a separate website under a subdomain. The new website will be utilizing Bootstrap 4.6, whereas our existing CMS site re ...

Utilize CSS :hover for revealing and concealing HTML elements

Why does the (.nav-element>a:hover) in the given code work properly, but the (.nav-element>a:hover .nav-dropdown1) does not seem to respond? I have attempted various methods to activate it, but is there an issue with the syntax in the rule that is ca ...

Is it possible to utilize a contenteditable div in place of a textarea?

Is it possible to replace a textarea with a content editable div? Will the behavior be the same? Can data processing be done in the same way as with textarea data? ...

Unique hover effects for tab navigation

I have designed my website with 4 tabs on the homepage: holidays, hospitality, events, and consulting. I am trying to create an effect where hovering over the tabs displays images. Here is the code I have tried: HTML: <div class="menu_links"> & ...

Using Vue.js to pass an image URL as a prop for CSS animation by converting it to a CSS variable

Need help with a component that features a hover animation displaying 4 rotating images: animation: changeImg-1 2.5s linear infinite; @keyframes changeImg-1 { 0%, 100% { background-image: url('images/wel1.png'); } 25% { background-image: ur ...

Customizing CSS to differentiate the color of active card headers in a Bootstrap accordion

I currently have a basic bootstrap accordion set up, as shown below. My goal is to style the .card-header element of only the expanded .card section without impacting the other .card-header elements. Is there a way to specifically target the expanded ite ...