Centered at the bottom of the screen lies a Bootstrap button

As a beginner with bootstrap, I am currently exploring new concepts and experimenting with different features. One thing I am attempting is to center a bootstrap button at the bottom of the screen. Here is my current code:

.bottom-center {
  position: absolute;
  bottom: 0;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" />
<p>Testing the placement of a button in the center of the screen at the bottom</p>
<div class='bottom-center'>
  <button type='button' class='btn btn-primary btn-large btn-start'>Center</button>
</div>

htmlcsstwitter-bootstrapbootstrap-4twitter-bootstrap-3

Answer №1

It is possible to achieve this without the need for any extra CSS.

  1. Start by upgrading to bootstrap 4 rather than using the outdated version 3.
  2. Add the fixed-bottom class to the button container to position it at the bottom of the screen.
  3. Include d-flex justify-content-center in the button container class to center it on the screen.

For more information on utilizing the flex property in Bootstrap, check out this link

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<p>Testing how to place a button in the center of the screen at the bottom</p>
<div class="fixed-bottom d-flex justify-content-center">
  <button type='button' class='btn btn-primary btn-large btn-start'>Center</button>
</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

Combining a standard JSS class with Material-UI's class overrides using the classnames library

I am exploring the method of assigning multiple classes to an element in React by utilizing the classnames package from JedWatson, along with Material-UI's "overriding with classes" technique. For reference, you can see an instance in MUI's docu ...

javascriptcssreactjsmaterial-ui

Extension Overlay for Chrome

I'm currently working on developing a Chrome extension, but I'm encountering some confusion along the way. Despite researching online, I keep receiving conflicting advice and haven't been able to successfully implement any solutions. That&ap ...

javascriptjqueryhtmlcssgoogle-chrome

Leveraging this jQuery code across multiple div elements

As a newcomer to jQuery, I am currently experimenting with a test script. My goal is to create an effect where when an image is clicked, a div slides down displaying more information similar to the new google images effect. The issue with the current scri ...

javascriptjqueryhtmlcss

Click to shift the div downwards

Currently, I have a piece of javascript applied to a div that directs the user to a specific link: <div style="cursor:pointer;" onclick="location.href='http://www.test.com';"> I am wondering if there is a way to add an effect where, upon ...

javascriptcss

nth-child selector causing tbody element to break

I have a code snippet that should alternate row colors between yellow and red. It works perfectly without using the <tbody> tags. However, when I include the <tbody> tags in my code, the layout breaks. It seems to restart with yellow at every n ...

htmlcsscss-selectors

When an element with a border attribute is hovered over, it shifts position

When I hover over an li-element, I want to apply borders at the top and bottom. Here's the code snippet: #overview li:hover { background: rgb(31, 31, 31); border-top: 1px solid white; border-bottom: 1px solid white; } Check out this JSFi ...

htmlcss

Tips for properly setting up a loop to effectively showcase all available data

I am encountering a strange issue when trying to display all incorrect answers in a table for each question. For some reason, one of the rows is showing up empty. This problem only occurs with question 2, which happens to have multiple correct answers. I s ...

phphtml

What is the best way to retrieve the height of a <DIV> element without factoring in the presence of a horizontal scrollbar with

I have created a unique jQuery plugin that involves utilizing two nested <DIV> elements. The outer div is set with a fixed width and overflow: scroll, while the inner div (which is wider) houses the content for scrolling purposes. Everything is fun ...

javascriptjquerycssscrollbar

Are you interested in learning HTML/CSS and joining a class?

When working with HTML, you can use the TOP tag to quickly navigate to the top of a page. This got me thinking - is it possible to create a link on my webpage that will take users directly to a specific class using only HTML and CSS? I'm curious to kn ...

htmlcss

Tips for showcasing information on an HTML website

I am currently facing an issue with displaying addresses retrieved from a database in my project. The problem lies in the formatting of the address when it is displayed on the page. Currently, the address is being displayed as follows: Address: 1 Kings S ...

htmlcsstwitter-bootstrap

Increasing Taxes and Boosting the Overall Cost

How can we set up a system where taxes are bypassed by default unless otherwise specified when placing an order? Let's take a look at the following text box: <input class="txt1" type="text" name="subtotal" value="" id="subtotal" size="16" ta ...

javascriptjqueryhtml

Automatically resizing a multi-part CSS background based on content dimensions

My current CSS project has hit a snag that I can't seem to solve: There is a box on the left side of the site that contains three images - a top image, an optional and stretched middle image, and a bottom image. I want this left box to automatically ...

htmlcssbackground-image

Which internet browsing engine does Android leverage for phonegap applications?

Currently, I'm working on incorporating CSS animations into a phone gap project. Surprisingly, the animations work flawlessly on an iOS device but encounter issues on my Android device. Strangely, elements like dashed borders are not even showing up. ...

csscordova

Enhance the functionality of a directive by incorporating the ui-mask directive

Recently, I implemented a custom directive for an input field that adds a calendar icon with a datepicker to the input. I have used this directive in various sections of my application and now I am interested in incorporating ui-mask - another directive I ...

javascriptangularjshtmlangularjs-directive

How to perfectly align a full-width div with a div of specific width

Consider this scenario: .d1 { width: 100px; float: left; } .d2 { width: auto; float: left; } <div class="d1">Fixed Content</div> <div class="d2">This content should expand to fill the rest of the page vertically.</div> This setu ...

csshtml

Scrollbar Overlay

I am currently working on an HTML page where I have implemented a CSS style overlay lightbox effect using CSS and jQuery. If you want to take a look at the code, click here One issue I am facing is that when I resize the window height so the right-hand s ...

jqueryhtmlcss

Retrieving text from a draggable div using jQuery

I have a draggable div that I can move over another element with the class .outerDiv which contains text content. Is there a way for me to retrieve the text from .outerDiv that overlaps with the draggable div? $(".outerDiv .isStore").draggable({ contain ...

javascriptjqueryhtmlcss

Adjust parent div size automatically when child is resized - jQuery Resizable Plugin

I need some assistance with jQueryUI Resizable. How can I resize only the height of the parent div when the child div is resized and touches the bottom end of the parent div? Additionally, I want to ensure that the child div does not go outside the boundar ...

jqueryhtmljquery-ui-resizable

Steps to creating a proper cascade using the label statement

I am currently customizing the appearance of a checkbox. The HTML code in the file called fin1.cfm is as follows: <td>Master Event:</td> <td> <input type = "checkbox" id = "cb_e" name = "datesumm" value = "" > <label f ...

htmlcss

Incorporating SCSS directly in React component along with material-ui styling

I'm having trouble incorporating styles into my React component. I'd prefer to use SCSS instead of either using the withStyle function or importing a plain CSS file into a JS file. For instance, I would like to import my SCSS file into ButtonCom ...

javascriptcssreactjssassmaterial-ui