Center align button vertically in Bootstrap and ensure it remains fixed in place

I have successfully implemented a bootstrap button that is vertically aligned in a column on the left side of the screen using the code below:

        <div class="col-sm-1 align-self-center">
            <button class="btn btn-primary" type="button">Button</button>
        </div>

Although the button looks exactly as intended, I realized that it shifts down when other modules expand the page downward (such as a collapsible panel in another column). It seems like the button continues to align with the center of the page as its height changes.

My inquiry is whether there exists a method to keep the button vertically centered while ensuring its position remains fixed even if the length of the page varies. Any advice or suggestions on this matter would be greatly welcomed!

htmlcssbootstrap-5

Answer №1

In order to address your problem, it may be helpful to enclose the element within a wrapper to establish a fixed reference point for its vertical alignment.

#wrapper {
  height: 500px;
  background-color: blue;
  color: white;
}

#wrapper a {
  margin: 0 auto;
}
<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">

<div class="container">
  <div id="wrapper" class="row">
    <a class="btn my-auto">Hello!</a>
  </div>
  <div class="row">
    <p>
      Here we have another row, but the one above is positioned centrally within the enclosing wrapper.
    </p>
  </div>
</div>

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

Transforming HTML Code in a PHP Document to a PDF Document

I have a PHP file that interacts with a database to update the HTML content. There is a button on the page labeled "Export As PDF". I attempted to convert the page to a PDF using HTML2FPDF, but encountered this error message: FPDF error: Unable to create ...

phphtmlpdfhtml2pdf

CSS is not appearing on my Node.js server application

The code snippet below is from my node.js server (using express): app.get('/appointment/:id',function(req,res){ res.writeHead(200,{'Content-Type':'text/html'}); res.write('<link href="public/css/style.css" rel="st ...

htmlcssnode.jsexpress

Can the distinction between a page refresh and closure be identified using the method below?

My idea is to trigger a popup window when the page is closed, not when it is refreshed. The plan is as follows: Client Send an ajax request to the server every x seconds. Server var timeout=0 var sec=0 while (sec>timeout) { open popup win ...

javascripthtmldjangoalgorithmpolling

Obtain the dropdown menu links for every row in a table using Python3 along with Selenium

Seeking assistance as a beginner in Python, I am attempting to automate the downloading process of old newspaper archives from a specific website () using the script provided below. Despite my efforts, I have encountered difficulty in getting the script t ...

htmlpython-3.xseleniumpdf

The offset value was inconsistent in the desktop version of Firefox

Could you take a look at my code on the fiddle link, Here is the code snippet: <body> <div id="content" style="width:400px; height:110px;"> <svg id="circle" height="300" width="300"> <circle cx="150" cy="150" r="40" st ...

javascriptjqueryhtmlfirefoxsvg

Please replace the text with only letters and then submit it without any spaces, periods, commas, or other symbols

Whenever I encounter a form like this, I need to submit it and replace the text in the name field with only letters - no commas, spaces, or special characters. https://i.sstatic.net/9FQnT.png myform.html <script> function fixInput(event) { na ...

javascripthtmlregex

What is the best way to style my text fields in Django using Bootstrap?

In my form class, I have lines that look like this: class ReportForm(forms.ModelForm): diagnosis = forms.CharField(widget=forms.Textarea(attrs={'cols': 200, 'rows': 3})) class Meta: model = Report Then, when I render the form ...

htmldjangotwitter-bootstrap

Phase 2 "Loading" visual backdrop

I'm attempting to include a loading animation GIF in my Cycle 2 plugin. Is there a way to ensure that the GIF loads before the images? Right now, I have set my loading.gif as a background image. The issue is that the loading.gif isn't displaying ...

javascripthtmlcssjquery-cycle2

Using the float property in IE7 can cause a line break and may result in other divs being pushed down

Hey there, I've encountered a few issues with floats in IE multiple times. Here's an example to illustrate what I mean. Please note that this example functions properly in Firefox and Chrome. index.html <html> <link href="style.css" rel= ...

htmlcss

Is there a bug with the CSS Safari selector for elements focused together?

Looking for a solution using the element+element-Selector to modify CSS for an element following a button. This code snippet functions in Chrome, Edge, and Firefox but not Safari on MacOS: .button:focus+.change{ color: red; } <p>When you focus ...

csssafaricss-selectorsfocus

Learn how you can store checkbox values in an array when a checkbox is clicked by utilizing AJAX

Creating checkboxes in HTML <input type="checkbox" name="options[cid]" value='1' onChange="chkdeptCount(this.value)" class="test"> <input type="checkbox" name="options[cid]" value='2' onChange="chkdeptCount(this. ...

phpjqueryhtmlcssajax

Tips for deactivating a specific value or graying it out within the list of value items in a drop-down menu using <ng-selectize> or <options> in Angular 7

I am facing a situation where I have to dynamically generate a list of options for a dropdown menu in my Angular 7 application. However, I need to be able to disable specific options in the list based on certain conditions or flags. For example: I am disp ...

htmlangulartypescriptangular7

Are there any libraries available to simplify HTML development in C#, .NET, or ASP.NET?

I have a vivid memory of stumbling upon a project where an individual utilized json-like strings to generate high-quality HTML in a certain programming language. Is there a similar tool available for use with C# or .NET? radio-box{ AName, [First|Second| ...

c#.nethtmlauto-generate

When using CKEditor, pressing the Enter key results in the insertion of <br /> tags

Whenever I use ckeditor, I find that pressing enter results in two <br /> tags being inserted. While I want to keep the line break tags, having them appear twice is not ideal. In my config.js file, I have set the configuration for the enter key as f ...

javascripthtmlcssckeditor

What steps can I take to avoid my Bootstrap Alert overlapping items in my Nav bar when displayed?

Here is the code from my _notices.html.erb file: <% flash.each do |msg_type, message| %> <div class="row pt-6 alert-messages"> <div class="col-lg-6 offset-lg-3"> <div id="inner-message" class=" ...

cssbootstrap-4

When the browser's inner width is less than the inner height, use jQuery or JavaScript to show a message on the webpage

I've been having trouble getting this to work and I've attempted various solutions suggested by different sources such as: Display live width and height values on changing window resize php echo statement if screen is a certain size And more, b ...

javascriptphpjqueryhtmlajax

Generate a custom image using a pre-existing background image and text using JavaScript, then save it as a JPEG file in

Managing multiple fanpages on Facebook can be quite a task, especially when it comes to posting images with funny text. I have different backgrounds for each page, which means I have to save each image individually with the text. To streamline this process ...

javascriptphpjqueryhtmlphp-gd

IMAGE CARDS WITH BOOTSTRAP 5

I created a bootstrap card with an image on the right side, but it doesn't fill the entire space. Below is the image of my bootstrap card: https://i.sstatic.net/k7xuT.png This is the code for my card: {% for book in thesis_details %} ...

cssbootstrap-5

Focus on a specific button based on its text inside

Two buttons are present with the same class but different content <a class="button ordrViewBtn">Sold Out</a> <a class="button ordrViewBtn">Re-Sell</a> I want to change the color of the "Sold Out" button. Is it p ...

htmlcssbutton

What is the best way to ensure my 2x1 table product description is displayed vertically and mobile responsive?

I need help displaying my product description in this format: ...

html