I'm having trouble with keeping my centered form in place when I try to use container-fluid. How can I ensure it stays in the center?

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

While attempting to apply a gradient color to the entire screen, I encountered an issue where the centered form within a card was shifting to the left when using the container-fluid class. Below is the code snippet:

<div class="container-fluid form">
    <div class="row form-row">
      <div class="col-sm-9 col-md-7 col-lg-5 mx-auto signinform">
        <div class="card card-signin my-5">
          <div class="card-body">
            <h5 class="card-title text-center">Sign In</h5>
            <form class="form-signin">
              <div class="form-label-group">
                <input type="email" id="inputEmail" class="form-control" placeholder="Email address" required autofocus>
                <label for="inputEmail">Email address</label>
              </div>
              <div class="form-label-group">
                <input type="password" id="inputPassword" class="form-control" placeholder="Password" required>
                <label for="inputPassword">Password</label>
              </div>
              <div class="custom-control custom-checkbox mb-3">
                <input type="checkbox" class="custom-control-input" id="customCheck1">
                <label class="custom-control-label" for="customCheck1">Remember password</label>
              </div>
              <button class="btn btn-lg btn-primary btn-block text-uppercase" type="submit">Sign in</button>
              <hr class="my-4">
              <button class="btn btn-lg btn-google btn-block text-uppercase" type="submit"><i class="fab fa-google mr-2"></i> Sign in with Google</button>
              <button class="btn btn-lg btn-facebook btn-block text-uppercase" type="submit"><i class="fab fa-facebook-f mr-2"></i> Sign in with Facebook</button>
            </form>
          </div>
        </div>
      </div>
    </div>
  </div>

CSS

:root {
  --input-padding-x: 1.5rem;
  --input-padding-y: .75rem;
}

.container-fluid,.row {
  height: 100vh;
  text-align: center;
  background: #FF512F;  /* fallback for old browsers */
  background: -webkit-linear-gradient(to right, #DD2476, rgb(47, 120, 255));  /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(to right, #DD2476, rgb(47, 95, 255)); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */

}

.card.card-signin.my-5 {
  background-color: rgba(255, 255, 255, 0.6);
}

.col-sm-9.col-md-7.col-lg-5.mx-auto {
  align-items: center;
  display: flex;
}

.card-signin {
  border: 0;
  border-radius: 1rem;
  box-shadow: 0 0.5rem 1rem 0 rgba(0, 0, 0, 0.1);
}

/* Additional CSS properties go here */

Due to the limitations of the Angular project's structure, I am unable to utilize the body tag. How can I ensure that the form remains centered without shifting to the left? What could be the issue?

Answer №1

To position the element in the center, you can use the CSS property margin: 0 auto;

.card.card-signin.my-5 {
  background-color: rgba(255, 255, 255, 0.6);
  margin: 0 auto;
}

Demo Link

Answer №2

To center your content on a column row, simply add the class justify-content-center


<div class="col-sm-9 col-md-7 col-lg-5 justify-content-center mx-auto signinform">

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

Tips for Maintaining Consistent Height and Width of Cards

My latest project involves a code snippet with 3 CSS cards displayed in a row using bootstrap. <div class="container mt-4"> <div class="row"> <div class="col-auto mb-3"> ...

Troubleshooting Problem with Responsive Bootstrap Navbar

I've been working on creating a menubar using Bootstrap where the logo image is centered instead of being on the left side of the bar. However, I'm facing an issue where the right links in the menu go off the screen. When I view the page with a w ...

Using Node.js for HTML redirections involves creating routes and setting

I am currently attempting to connect my Node.js API with my HTML pages. For the most part, everything is functioning correctly, but I have encountered some confusion along the way. Is there a more efficient method for redirecting an HTML page? Typically, ...

Maintaining hover functionality of menu button while navigating through sub-menu options

Creating a CSS dropdown menu is straightforward, but maintaining the hover state on the main menu button while navigating through the dropdown selections can be tricky. In the past, I used JavaScript to change the class and retain the background image, but ...

The layout of the divs becomes distorted when the window is resized

When adjusting the window size, all elements in the center become cramped and unresponsive. Even the navigation items in the header do not resize properly. Here is my Triangle.js file: import React from 'react' import { motion } from 'fram ...

Ellipsis malfunctioning in text overflow

It is known that the display type table-cell does not work with text-overflow ellipsis. However, this is where my issue lies. I am dealing with a file input control that appears like this: <div class="ui-select form-input" style="display:inline-block; ...

Floating elements in IE are dropping below a floated input within an unordered list, while in Chrome everything displays correctly

I've been troubleshooting this issue for an hour now with no success. I'm facing a problem in Internet Explorer and can't figure out why. This is a snippet of the HTML code I'm using to display my registration form: <ul id="registe ...

An error occurred: Reaching the maximum call stack size when utilizing the .map function in jQuery

Encountering a console error: Uncaught RangeError: Maximum call stack size exceeded This is the jQuery snippet causing trouble: $(document).on("change","select.task_activity", function(){ selected_activity = $("select.task_activity :selected").map(fu ...

Total Output Calculation

In my latest coding project, I have crafted a unique algorithm to calculate exam scores with the inclusion of interactive buttons! function incorrectResponse() { var calc = 0; var calc2 = 1; var divElement = document.createElement("div"); divEle ...

What is the process for implementing JavaScript in Django?

I'm a newcomer to this and although I've tried searching on Google, I haven't found a solution. I'm facing an issue where I can include JavaScript within the HTML file, but it doesn't work when I try to separate it into its own fil ...

Guide to incorporating crispy forms with Bootstrap 4 in Django

I'm struggling to integrate a bootstrap upload form with a Django form using crispy forms. Does anyone know how to incorporate crispy forms into a bootstrap form? This is an example of a Django crispy form: <form method="post" en ...

I am searching for a way to apply a conditional class to the chosen element in react, as the toggle method does not

I'm working on customizing a dropdown menu and I want to add a functionality where if a parent li menu has an arrow class before the ul element, then clicking on that parent li menu will add a class called showMenu only to that specific sub-menu. Her ...

Stacking images with CSS styling

I'm currently working on creating a CSS design template. Within this project, I have two images named imageOne and imageTwo. Both images are styled with position: relative, as setting one to position: absolute would compromise the responsiveness of ...

What is the process for deselecting a checkbox?

I am facing a situation where I need to uncheck a checkbox that is always checked based on user input from another section of my form. Specifically, I have implemented an onChange="functionName" event on a select box. Can someone guide me on how to accom ...

What is the mechanism behind YouTube automatically playing music videos when we visit a channel's homepage?

Since Chrome version 66, autoplay of videos with music has been restricted to muted playback. However, I recently noticed that on certain YouTube channel pages, the videos were autoplaying with sound, even when using the HTML video API. How is YouTube able ...

Angular 7 data update causing issues with Bootstrap carousel functionality

I am encountering an issue with the Bootstrap carousel in my Angular 7 application. The carousel contains data that needs to be updated at regular intervals. Initially, the carousel works as expected. However, once the HTTP service updates the array of sli ...

Choosing jQuery over JQuery Mobile for a standard web application to effectively manage different devices

Creating a Unique Web Application In the works is a unique web application, similar to Trello, that divides a page into columns where tasks/cards can be added and moved between them. This desktop-focused platform will feature an information column on the ...

Adding a linear gradient with a fade effect to Highcharts sparkline chart: Step by step guide

I am working with a Highcharts sparkline chart, and the design in my Figma file resembles the image provided below. I would like to customize the chart by adding transparency and a linear-gradient effect. Can anyone provide guidance on how to achieve this? ...

Finding the main directory in JavaScript: a step-by-step guide

My website uses mod_rewrite to reformat the URLs like this: The issue arises when making AJAX calls to a file: I want to access login.php from the root without specifying the full URL or using the "../" method due to varying folder levels. So, I need a ...

Tips for choosing the class=" * " using jQuery's .html() function

Is there a way to target the string "class" or any other specified string within code retrieved from .html()? If we have an element's HTML content stored in another element (similar to a snippet with preview) <div class="myClass">1</div> ...