Alignment in Bootstrap 4: How to Align Elements Both Vertically and Hor

I am having trouble aligning the content both horizontally and vertically.

Does anyone have any suggestions for the best approach to achieve this?

    <div class="container">

  <div class="row">

    <div class="col-md-4">
      <img width="300" src="../assets/medlogo.png">

      <h1 class="text-center login-title">Access the program</h1>
      <div class="account-wall">
        <img class="profile-img" src="https://lh5.googleusercontent.com/-b0-k99FZlyE/AAAAAAAAAAI/AAAAAAAAAAA/eu7opA4byxI/photo.jpg?sz=120"
          alt="">
        <form class="form-signin">
          <input type="text" class="form-control" placeholder="Email" required autofocus>
          <input type="password" class="form-control" placeholder="Password" required>
          <button class="btn btn-lg btn-primary btn-block" type="submit">
                  Sign in</button>
        </form>
      </div>

    </div>
  </div>
</div>

Appreciate any advice!

cssbootstrap-4

Answer №1

Bootstrap4 has implemented the use of css Flexbox, allowing for versatile alignment options. Flexbox provides built-in support for both vertical and horizontal alignment.

Within a flexbox container, the flex-direction property can be set to row (the default) or column. When set to row, align-items can be used for vertical alignment and justify-content for horizontal alignment. Conversely, when set to column, align-items aligns horizontally and justify-content aligns vertically.

For more information on Flexbox, you can visit: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Answer №2

Give this a try

  <div class=" d-flex justify-content-center align-content-center">
      <img width="300" src="../assets/medlogo.png">

      <h1 class="text-center login-title">Access the program</h1>
      <div class="account-wall">
        <img class="profile-img" src="https://lh5.googleusercontent.com/-b0-k99FZlyE/AAAAAAAAAAI/AAAAAAAAAAA/eu7opA4byxI/photo.jpg?sz=120"
          alt="">
        <form class="form-signin">
          <input type="text" class="form-control" placeholder="Email" required autofocus>
          <input type="password" class="form-control" placeholder="Password" required>
          <button class="btn btn-lg btn-primary btn-block" type="submit">
                  Sign in</button>
        </form>
      </div>

    </div>

I replaced the col-md-4 class with 

d-flex justify-content-center align-content-center
. This utilizes Bootstrap 4 beta flexbox utilities. Alternatively, you can use inline styling as well.

For more information, visit http://getbootstrap.com/docs/4.0/utilities/flex/

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

Simple HTML and CSS exercise for beginners to grasp the concept

I'm looking to modify the layout of a specific webpage at based on the following instructions: First, insert this link within the <head> <link rel="stylesheet" href="https://trafficbalance.io/static/css/sdk/sdk.css"> -next, add th ...

javascripthtmlcss

"Utilizing multiple class names in Next.js to enhance website styling

Looking for a way to apply multiple classNames in Next.js, especially when dealing with variable classnames? I'm following the component level CSS approach. Take a look at my code and what I aim to achieve: import styles from "./ColorGroup.mod ...

cssreactjsnext.jsclassname

sticky position is functional in Chrome, however it does not work in Firefox

I am looking to create a vertical div that stretches to the height of its parent container and contains smaller divs. If there is extra space, all divs except for the last one should be positioned at the top, with the last div placed at the bottom. I used ...

csstwitter-bootstrapflexboxbootstrap-4sticky

Flashing text compatibility across all browsers

I'm looking for a way to create text that blinks on all major web browsers. Initially, I attempted using the <blink> HTML tag, but unfortunately, it only works in Mozilla Firefox. Next, I experimented with CSS: <style> .blink {text-deco ...

javascripthtmlcss

Navigating with Angular router in a Bootstrap navigation bar

My link is not displaying as a tab (I'm using Bootstrap 4 and Angular 5). Instead, it shows up as just a plain link. This seems like it should be a simple issue, but this is my first time working with bootstrap... Thank you! <div> <nav cla ...

angularbootstrap-4angular-routerangular5

What is the best way to create a mirror effect on one div by clicking another div?

I have created a schedule grid and I am looking for a way to allow users to click on the UK hour and then have the corresponding U.S time highlighted. Is there a CSS solution for this? The functionality I need is to be able to select multiple hours. I have ...

javascriptjqueryhtmlcss

How can I change the background image using CSS instead of HTML?

I initially created a non-responsive website for an existing project. Now I need to convert it into a responsive site. I tried changing the logo image to make it responsive, but it's not working as expected. <td colspan="2" style="background-image ...

javascriptcsshtml

Group input with segmented buttons (Bootstrap 4 alpha version)

In Bootstrap 4's input-group dropdown arrow is displayed under action button: https://i.sstatic.net/eGzcb.png <div class="container"> <div class="input-group"> <input type="text" class="form ...

twitter-bootstrapbootstrap-4twitter-bootstrap-4

Issue with integrating Contact Form 7 HTML into Wordpress

I've revisited this question with a new "input" HTML tag Despite changing everything, CSS still isn't being applied. HTML Code : <form action="#" class="contact-one__form row"> <div class="col-lg-6"> ...

htmlcsswordpresscontact-form-7

I am trying to center align this image, but for some reason, it's not cooperating

Attempting to center the image using margin-left: auto and margin-right: auto properties in the code snippet above has proven unsuccessful. The image is not aligning as desired. What could be causing this issue with the code? Are there any other techniq ...

htmlcss

Ways to determine if a class is a part of the bootstrap framework

Is there a way to verify if a class like mt-3 or table-left is part of the bootstrap framework? Are there any online resources, tools, or plugins in VSCode that can assist me in determining if a class is a predefined bootstrap keyword? ...

htmlcssvisual-studio-codebootstrap-4bootstrap-5

When interacting with elements with the "user-select: none" property, WkWebView still allows text selection

When using an iOS iPad app with a single fullscreen WKWebView, an issue arises when long-pressing on an area with user-select:none - the first text in the next available area without user-select:none gets selected instead of being ignored. Is there a way t ...

cssios

Why are you leaving a trail of timestamps in your .css files?

Within certain source codes, I have observed the following: <link rel="stylesheet" href="/css/style.css?201007071609" type="text/css" /> This prompts my question: What is the purpose behind appending 201007071609 to style.css in the code snippet ab ...

csstime

Determining the optimal time to utilize the addClass function in jQuery and CSS

One of my HTML elements has the class "article": <article> Content </article> In my jQuery script, I want to add specific classes that have been predefined: $('article').addClass('rounded box-shadow gradient-bright'); I ...

jqueryhtmlcsspreload

Creating collapsible items in Bootstrap

When using the standard bootstrap collapse tool, I encountered an issue: <div class="accordion" id="accordionExample"> <div class="card"> <div class="card-header" id="headingOne"> ...

htmlcsstwitter-bootstrapbootstrap-4

I am experiencing issues with the functionality of my Boot Strap Dropdown Menus

I've been struggling with this issue for days. Is there something I'm overlooking? The drop down menu just won't work for me. <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <scrip ...

bootstrap-4

CSS for mobile devices not loading until the device is rotated

My website, redkrypt.com, is functioning perfectly on my laptop. However, I am facing an issue where the css file will only load on my iPhone 4S after I rotate it once. Once I do this, the website works both vertically and horizontally. I have tried variou ...

htmlcssiphoneresponsive-designmedia-queries

Creating a React component with a circular loader that displays percentage and texts using Material-UI

I've developed a CircularLoader component using Material UI. The issue I'm facing is that when the variant is set to 'indeterminate', the loader should display without any percentage indication. However, if the variant is 'determin ...

cssreactjsreact-hooksmaterial-ui

Difficulty with aligning textfield controls to the right

I'm currently working on adding StaticTextField controls to a page. We are using ExtJS, but we incorporate VB.NET methods for implementing ExtJS so manual coding isn't necessary. So far, I attempted to align the text to the right by using this c ...

asp.netcssasp.net-mvcvb.netextjs

Modify the background color of a pseudo-element's property value dynamically

How do I change the background color of my burger menu by clicking on an icon? This is the CSS code I have: :root{ --pseudo-backgroundcolor: yellow; } .menu__icon span, .menu__icon::before, .menu__icon::after{ background: va ...

javascripthtmlcsspseudo-element