How to Center Items Vertically and Horizontally with Bootstrap in HTML

Having some trouble creating a webpage layout with a centered button and text below it. I'm using Bootstrap but running into issues with inconsistent spacing on different devices. Check out my current code:

    <div class="container-fluid" style="height: 75vh;">
        <div class="h-100 d-flex justify-content-center align-items-center">
            <div class="grid">
                <div class="row">
                    <button type="button" class="btn btn-primary btn-xlarge btn-success"
                            id="button1">
                        Button!
                    </button>
                </div>
            </div>
        </div>
        <div class="d-flex justify-content-center" style="margin-top: -28%">
            <div class="grid">
                <div class="row" style="font-size: 24px">
                    <p id="p1">Lorem Ipsum</p>
                </div>
            </div>
        </div>
    </div>

Anyone able to help me troubleshoot this issue? I'm working in HTML5 and Bootstrap 4.

htmlcsstwitter-bootstrapbootstrap-4

Answer №1

Create a simple layout by placing both a button and a div within a flex container, and ensure the flex-direction is set to column.

<div class="container-fluid" style="height: 75vh;">
  <div class="h-100 d-flex justify-content-center align-items-center flex-column">
    <button type="button" class="btn btn-primary btn-xlarge btn-success"
              id="button1"gt;
        Button!
    </button>
    <div style="font-size: 24px">
        <p id="p1">Lorem Ipsum</p>
     </div>
  </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

JavaScript - Reveal a div when a grid item is clicked

I have created a grid with a 5x7 layout using divs. I am trying to achieve a feature similar to the Netflix interface where, upon clicking on a div, a larger div will appear beneath it. This larger div should expand to 100% width of the parent container, p ...

javascripthtmlcsslaravel

Utilizing animation transitions when adding or removing classes

Currently, I am troubleshooting an issue with the transition effect between adding and removing two classes fixed-top and fixed-bottom. Even though I have included CSS properties for smooth transitions, such as: -webkit-transition: all 3s ease; -moz-tr ...

javascriptjquerycsscss-transitions

How can I use JavaScript to show a div upon clicking an input element?

I am looking to make a block div visible when an input field is clicked. <input class="indifferent" type="radio" name="decision" value="indifferent"> Indifferent </br> <div class="input" style="display: none;"> Please assist with our com ...

javascripthtmlcssinputtags

Bits of code and the internet

When it comes to displaying code on the web, there are a few key steps involved: Encoding HTML entities Formatting The most basic workflow would involve: Start with a code snippet like: <html> I'm a full page html snippet <html>. ...

javascripthtmlangularjshtml-entities

Customize HTML Textbox Styles

I am currently working on customizing the appearance of textboxes and labels by applying color themes to them. My goal is to achieve a visual effect like this: https://i.sstatic.net/JdjnU.png Do you know of any tools or methods that can help me accom ...

htmlxmlthemessyntax-highlighting

Avoiding a line break between two <form> tags is essential for maintaining the structure of your webpage

I am looking for a way to ensure that there are no line breaks between two forms that I have on my website. Here is the code snippet: <form action="..."> <input type="submit" /> </form> LINE BREAK HERE <form action="..."> <inpu ...

htmlcss

Experiencing an error while trying to implement a node.js server-side service through AngularJS. Encountering the error message: "Error: [$injector:nomod] Module ‘angularjsNode

An error has occurred: Error: [$injector:modulerr] Failed to instantiate module angularjsNodejsTutorial due to: Error: [$injector:nomod] Module ‘angularjsNodejsTutorial’ is not available! You either misspelled the module name or forgot to load it. If r ...

htmlangularjsnode.js

Interested in resizing the arrow from big to small?

I am currently using angular2-multiselect and I have noticed that the default size of the arrow is quite large. I am interested in reducing the size of the dropdown arrow. <angular2-multiselect class="form-control" [data]="dropdownList1" [(ngMo ...

javascriptjqueryhtmlangular6angular-ui

Is it achievable through CSS alone to eliminate the bullet point in a UL list when it consists of just a single item?

Is it feasible to achieve a solution using CSS alone that remains functional even on IE8, ensuring the following criteria: If a <ul> list contains 2 or more items, then maintain the bullets in front of each item as per usual. When there is only one ...

css

The validation classes in Bootstrap 4 are not appearing on the input or feedback elements

Based on the bootstrap documentation, the provided bootply code is supposed to include green and red elements, with the expectation that the invalid-feedback messages will be shown. I am looking to integrate the appropriate styles into an angular4 reactiv ...

twitter-bootstrapbootstrap-4

What could be causing my "onChange" function to not work as expected?

export function UpdateData(props){ return( <div> <div className='updateForm'> <form> <div className="form-group"> <label>Your ID:& ...

javascripthtmlreactjs

tips for showcasing pictures next to each other consecutively

Currently, the code is displaying images top to bottom. <tr ng-repeat='b in Brands = (Brands | firstLetter:activeLetter)'> <td><img src="http://localhost/{{ b.image }}" alt="" border=3 height=75 width=75><br><br> ...

javascriptcssangularjstwitter-bootstrap

Issue with locating image source in Angular 4

I'm struggling to source an image using angular 4. It keeps giving me an error message saying that the image cannot be found. Here is my folder structure: app_folder/ app_component/ - my_componenet - image_folder/ - myimage I am trying to ...

htmlimageangularsrc

Unable to specify the width for a DIV element

I am in the process of creating a gaming website and have encountered an issue with setting the size of the genre menu using the DIV tag. Below is a snippet of the HTML code I am using: <div class="center"> <div class="menu" onclick="loc ...

html

Filtering jQuery by excluding certain strings from an array

I have a list of six option values retrieved from a database table, including #blog and #hariciURL, among others. In another table, I need to disable the options that match values in an array, except for #hariciURL which should never be disabled. How can ...

htmljqueryhtml-select

concealing the upper header while scrolling and shifting the primary header upwards

Is there a way to use CSS to move the main header navigation, including the logo and links, on my website up when scrolling down in order to hide the top black bar header that contains contact information? The website in question is atm.truenorthmediasol ...

javascripthtmlcsswordpress

Column doesn't want to center within row in Rails

In the application's view, there is a fluid container and in the home view, there is another container with 4 rows. The first row has one column that is not aligning vertically to the middle of the row. I have attempted to use Bootstrap's align-m ...

htmlcssbootstrap-4

What are some ways to conceal database connection details for a basic HTML/CSS/JavaScript website hosted on GitHub Pages?

For my current school project, I am utilizing vanilla HTML, CSS, and JS. Once completed, the expectation is for the repository to work through GitHub Pages. Although it's beyond the assignment requirements, I am interested in integrating a Firebase Fi ...

javascripthtmldatabasegoogle-cloud-firestoregithub-pages

Guide to retrieving a user's current address in JSON format using Google API Key integrated into a CDN link

Setting the user's current location on my website has been a challenge. Using Java Script to obtain the geographical coordinates (longitude and latitude) was successful, but converting them into an address format proved tricky. My solution involved le ...

javascriptjqueryhtmlgeolocation

What is the best way to enable click functionality on the SVG Object and smoothly scroll to anchor using jQuery?

My SVG is embedded using an object tag and includes CSS3 hover animations. However, I am facing issues when trying to hyperlink the SVG with hover animation as it interferes with clicking actions. I chose not to use the long SVG path code for better code o ...

javascriptjquerycsssvg