Align all elements to the center and arrange them in a vertical column

I have implemented a form using Bootstrap 4 and here is the code:

<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="dcbeb3b3a8afa8aebdac9ce8f2eaf2ec">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet"/>
       <div class="container">
            <div class="row">
                <div class="col-xl-12 col-lg-12 col-md-12">
                    <div class="d-flex align-items-center justify-content-center" style="height:100vh;">
                        <h1>My header tagline.</h1>
                        <div class="row">
                            <div class="col-md-12">
                                <form action=""
                                      enctype="multipart/form-data"
                                      method="POST">
                                    <div class="form-inline">
                                        <input class="form-control" type="email" name="email" value=""
                                               placeholder="Enter your Email">
                                        <button class="btn btn-primary">enter</button>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

I am facing an issue with centering the text as shown in the image below:

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

Can someone help me identify what's wrong with my CSS?

Your assistance is highly appreciated!

csstwitter-bootstrapbootstrap-4

Answer №1

Are you aiming for this?

<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="f6949999828582849786b6c2d8c0d8c6">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet"/>
       <div class="container">
            <div class="row">
                <div class="col-xl-12 col-lg-12 col-md-12">
                    <div class="d-flex align-items-center justify-content-center" style="height:100vh;">
                        <div class="row">
                          <h1>My header tagline.</h1>
                            <div class="col-md-12">
                                <form action=""
                                      enctype="multipart/form-data"
                                      method="POST">
                                    <div class="form-inline">
                                        <input class="form-control" type="email" name="email" value=""
                                               placeholder="Enter your Email">
                                        <button class="btn btn-primary">enter</button>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                </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

What are the steps for creating personalized sliders with WordPress?

Seeking guidance on how to code WP Template files to enable control from the WP dashboard for adding or removing slider images. A sample code snippet is provided below. <div id="myCarousel" class="carousel slide" data-ride="carousel"> <!-- Indi ...

javascriptphpcssajaxwordpress

Guide to triggering a popover from within another popover using jQuery

Currently, I have a situation where a popover is triggered by clicking on a button. The goal is to trigger another popover from the first popover by clicking on some content within it. If you'd like to see a demonstration, check out this JSFiddle lin ...

jqueryhtmlcss

The left side of the form input material is obscured unless the necessary criteria are fulfilled

I am currently in the process of developing the front-end for a web application using the material library. The issue I am facing is that when a field does not meet its requirements, such as needing to enter a 'bedrijfsnaam', the border turns red ...

cssangularmaterial-uiangular-material

React Bootstrap ToggleButton firing function multiple times unnecessarily

I've encountered an issue with my react-bootstrap ToggleButtons. Whenever I click on them, the handlePlatformChange() function is triggered twice - first with the correct id and then immediately after with null. I tried including e.preventDefault() in ...

javascriptcssreactjsbootstrap-4react-bootstrap

A guide to aligning text on the right side of an image with HTML and CSS

Looking for assistance to align text on the right side of an image at the same level. Below is the code I have: <a class="following-row" href="index-2.html?pid=2306"> <img alt="Girls logo" src="photos/users/35257/resized/9fd79 ...

htmlcss

Change the background of the play/stop icon with a jquery toggle

There is a list of video links with play icons as backgrounds in front of them. When a user clicks on a link, the video will start playing in a player located to the left of the links. The clicked link's background icon changes to a 'stop' i ...

javascriptjqueryhtmlcsshyperlink

What is the reason that em takes precedence over p for font-family?

Take a look at this CSS snippet: * { font-family: Gill Sans, Verdana, Arial, Helvetica, Sans-Serif} p { font-family: Courier; } Now let's consider this HTML markup: <p>Hi there. So <em>very</em> pleased to make your acquaintance. ...

htmlcssfont-family

Trouble getting custom CSS media queries to function properly alongside Bootstrap 3

I've encountered an issue while using bootstrap 3 with jquery UI to implement search and select fields for the user. The CSS code seems to be working fine on larger screens, but it's completely non-functional on smaller screens. I tried applying ...

jqueryhtmlcsstwitter-bootstrap

What is the best way to change the folder name when hovering over it?

Typically, my website displays categories with images from the /thumb-min/ directory. For example, 95-IMG_6509.JPG is loaded like this: /thumb-min/95-IMG_6509.JPG When I navigate to the details page, it loads the image from: /thumb-medium/95-IMG_6509.JP ...

javascriptphpjqueryhtmlcss

issue with displaying three images side by side in Internet Explorer

Hello everyone, I have created a code to display 3 images in a row. It works perfectly in Firefox but not in Internet Explorer. Here is my code: echo "<div class=\"container mod\"><ul id=\"three-col\" class=\"press\" ...

htmlcssinternet-explorer

What is the best way to adjust my column position in order to make the links clickable?

Looking for help with a mobile version website menu bar design. The issue is that the central "+" button is covering the two icons on either side, making them unclickable. Is there a solution to rearrange this layout? Here is the current design: https:// ...

htmlcssbootstrap-4

Fix the positioning of a div in BootStrap and CSS code

Hey there, I'm relatively new to CSS/Bootstrap and currently in the process of learning. I might need to incorporate some CSS into the "chat_funcs" div, but unsure about what code to input to achieve my desired outcome. The issue at hand: What I am ...

htmlcsstwitter-bootstrap

What is the process for applying a filter to a background image within the body of a webpage?

I'm attempting to apply a filter to the background image of the body element. Currently, I have implemented the following code: body { background: url("/img/congruent_pentagon.png"); color: white; font-family: "Raleway"; -webkit-filte ...

css

Ways to incorporate a notification feature with an icon or image

I'm looking to create a visually dynamic icon/image similar to mobile device notifications, but primarily for desktop use. This image will be positioned before some text. For instance: https://i.sstatic.net/MHocy.pngSome Text This design features tw ...

htmlcssangulartwitter-bootstrap-3

A guide on implementing a Material UI table to display one row at a time on each page

I'm currently working on incorporating a Material UI table to showcase content with just one row per page. After successfully loading the page and displaying the first row, I encountered an issue where navigating to subsequent pages does not render a ...

cssmaterial-ui

Is it possible to display a Processing message at the beginning of a datatables table already containing data?

Within my Laravel 5.7 application, I have implemented the "yajra/laravel-datatables-oracle": "~8.0" library and found a helpful thread on customizing the processing message at this link. I adjusted the processing message styling as follows: .dataTables_pr ...

javascriptjqueryhtmlcssdatatables

The picture within the div is not appearing as expected

I am facing an issue with inserting an image in a div container using CSS and HTML. The image is not displaying properly. Here is the HTML code: <div id="wrapper"> <div id="quoteContainer"> <span class="start_img"></span> </di ...

cssimagehtml

Webpack is failing to load the logo PNG image file

Is there a way to make the logo png file visible on the webpage? I have been encountering issues with loading the image while other elements like HTML, css, and fonts are loading properly when the web pack is started. List of Error Messages: Refused to a ...

javascripthtmlcsswebpack

Creating Interactive Modals in Bootstrap using AJAX Requests

Currently, I am utilizing codeigniter v3 along with bootstrap v3. I have a table that displays messages, and when the details button is clicked for any message in the table, a bootstrap modal pops up to show the details. In my code, I iterate through t ...

ajaxtwitter-bootstrapcodeigniter

Adjust the parent's height to match the height of its content (CSS)

Could anyone assist me in figuring out how to adjust the height (red border) to fit the content (green border)? https://i.sstatic.net/l1p9q.png I'm struggling to determine which property to use, I'm aiming for this outcome but haven't had ...

htmlcss