Expanding Column Width Dynamically with Bootstrap When Text is Added

My HTML Code presents a challenge that I need help with:

<!DOCTYPE html>
<html lang="en">
    <head>
    
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
        <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
    </head>
    
    <style>
    
    .card
    {
        background-color: #EFF3FC!important;
    }
    
    .btnBlue
    {
        background: #1467ba;
        height: 25px;
        width: 70px;
        font-size: 14px; 
        color: white;   
    }
    
    </style> 
    
    <body>
        <div class="container-fluid d-flex flex-column min-vh-100 justify-content-center align-items-center text-center">
            <div class="row no-gutters">
                <div class="col-md-4">
                    <div class="card card-block w-100 h-100">
                
                            <nav class="navbar navbar-expand-lg navbar-light" style="background-color: #EFF3FC;">
                    
                                
                                
                            </nav>

                            <p class="h3 text-primary">
                                Sign In
                                <br>
                                <br>
                            </p>
                
                            <form action="{% url 'landing' %}" method="POST">

    
                                <input type="email" id="Username" name="username" placeholder="Username">
                                <br> <br> 
    
                                <input type="password" id="Password" name="password" placeholder="Password">
                                <br> <br>
    

                                <h6>
                                <p class="text-danger"> 
                                    <small> The Username or Password you entered does not match our records. Please try again. </small> 
                                    <br>
                                </p>
                                </h6>

    
                                <button type="submit" class="btn btn-primary align-center btn-sm">Log In</button>

                            </form>

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

                <div class="col-md-8">
                    <div class="card card-block w-100 h-100">
                        <p class="h3 text-primary">
                            <br> <br> 
                            Sign Up
                            <br>
                            <br>
                        </p>

                        <p>
                            Don't have an account yet? Enter your username and we'll send you a link for a secure sign-up experience!
                            <br>
                            <br>
                        </p>

                        <div class="form-group">
                            <input type="email" id="Email" name="Email" placeholder="Email">
                            <br>
                        </div>

                        <h6>
                        <p class="text-danger" hidden> 
                            <small> Please check the email you've entered and try again! </small>
                            <br>
                        </p>
                        </h6>

                        <div class="form-group">
                            <button type="submit" class="btn btn-primary align-center btn-sm">Submit</button>
                        </div>
                        
                        
                    </div>
                </div>
                </div>
        </div>
    </body>
</html>

The sizing of the Columns (md-4 and md-8) keeps changing based on the amount of text present. Removing certain lines affects their width dynamically. How can this be fixed to maintain a consistent width irrespective of the content?

htmlcssbootstrap-5

Answer №1

There seems to be an issue with the first div and its classes. I made some changes to the 'i' attribute, give this a try.

<!DOCTYPE html>
<html lang="en">
    <head>
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
        <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
    </head>
    
    <style>
    .card
    {
        background-color: #EFF3FC!important;
    }
    
    .btnBlue
    {
        background: #1467ba;
        height: 25px;
        width: 70px;
        font-size: 14px; 
        color: white;   
    }
    </style> 
    
    <body>
        <div class="container-fluid d-block  text-center" style="position: absolute;top:50%;transform: translateY(-50%);">
            <div class="row no-gutters ">
                <div class="col-md-4 ">
                    <div class="card card-block w-100 h-100">
                        <nav class="navbar navbar-expand-lg navbar-light" style="background-color: #EFF3FC;"></nav>

                        <p class="h3 text-primary">
                            Sign In
                            <br><br>
                            </br>
                        </p>
                        
                        <form action="{% url 'landing' %}" method="POST">
                            <input type="email" id="Username" name="username" placeholder="Username">
                            <br> <br> 

                            <input type="password" id="Password" name="password" placeholder="Password">
                            <br> <br>

                            <h6>
                                </h6>
                            <button type="submit" class="btn btn-primary align-center btn-sm">Log in</button>
                        </form>

                    </div>
                </div>

                <div class="col-md-8">
                    <div class="card card-block w-100 h-100">
                        <p class="h3 text-primary">
                        <br> <br> 
                            Sign Up
                            <br>
                            <br>
                        </p>

                        <div class="form-group">
                            <input type="email" id="Email" name="Email" placeholder="Email">
                            <br>
                        </div>

                        <h6>
                        <p class="text-danger" hidden> 
                            <small> Please check the email you've entered and try again! </small>
                            <br>
                        </p>
                        </h6>

                        <div class="form-group">
                            <button type="submit" class="btn btn-primary align-center btn-sm">Submit</button>
                        </div>
                        
                    </div>
                </div>
            </div>
        </div>
    </body>
</html>

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 is the most effective way to choose and give focus to an input using JavaScript or jQuery?

How do you use JavaScript or jQuery to focus on and select an input? This is the relevant snippet of my code: <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> </he ...

javascripthtmljquery

Include a carbon copy when generating a script for an email

I am working on a form that sends emails, and I need to include a cc email address in the recipient list. Can someone guide me on how to modify the line below to achieve this? Thank you. mail("<a href="/cdn-cgi/l/email-protection" class="__cf_email__ ...

phphtml

What are some ways to utilize symbol fonts such as marvosym within a web browser?

Are you looking to use special LaTeX fonts like \Pluto from marvosym in your web development projects? Wondering how to display this symbol with HTML / JavaScript / CSS without relying on an image? You can download the font from This symbol corresp ...

javascripthtmlcssfonts

Transfer the html div element to the ajax request

My server-side code runs multiple bigquery queries and organizes the results in a table. The client calls this code via an ajax request. I want to send the table/div generated by the server-side code to the client so that it can be rendered there. Is this ...

javascriptjqueryhtmlnode.jsajax

I'm attempting to insert a line break after HTML elements that are being added from JavaScript code inside a `display: flex` div

I'm facing an issue where line breaks are not added after HTML elements are inserted via JavaScript upon clicking a button. For instance, the data from the inputs doesn't get separated even when I click submit multiple times: https://i.sstatic. ...

javascripthtmlcss

Utilizing Modernizr for detecting support of background-clip:text functionality

Recently, I decided to utilize Modernizr in order to check for support of the css property background-clip: text. After some research, I came across this page:https://github.com/Modernizr/Modernizr/issues/199 I then added the following code to my website ...

csshtmlmodernizr

Experiencing issues with exporting <SVG> file due to corruption

I received some downvotes on my previous post, and I'm not sure why. My question was clear, and I provided a lot of information. Let's give it another shot. My issue is with exporting <SVG> files from an HTML document. When I try to open t ...

javascripthtmlcsssvg

The animation using Jquery and CSS is experiencing some glitches on Safari when viewed on an

Why is smooth animation not working on iPad Safari with jQuery animate? $('#myId').css({ 'left': '-100%' }).animate({ 'left': '0' }, 300, 'linear'); I also tried using the addClass option and in ...

javascriptjqueryhtmlcss

A div element set to a width of 100% that holds a lengthy text will expand to the entire width of the window,

Check out this simple webpage: https://jsfiddle.net/enxgz2Lm/1/ The webpage is structured with a side menu and a tasks container. Within the tasks container, there is a row container that includes a checkbox, title on the left, and details on the right. ...

htmlcss

Is there a way for me to incorporate a feature where the user has the option to choose the number of passwords they would

I created a password generator for my company and now I want to implement the feature where the user can choose how many passwords they want. My attempt at using str_repeat ($output , $password_amount ) resulted in duplicate passwords being generated, mak ...

phphtmlregex

What is the method for altering the font color of the orderlist when a checkbox is checked?

I am currently working on a list with checkboxes for car options. The list is stored in an array and I am struggling to change the font color using AngularJS and HTML. This resembles a to-do list page where each car option has checkboxes for "yes" and "no ...

htmlangularjs

The animation unexpectedly resets to 0 just before it begins

Currently, I am developing a coverflow image slider with jQuery animate. However, there are two issues that I am facing. Firstly, when the animation runs for the first time, it starts at `0` instead of `-500`. Secondly, after reaching the end and looping b ...

javascriptjquerycssjquery-animatecss-transforms

The issue persists where Tailwind Inline color decorators are unable to function properly alongside CSS variables

In my current project using Tailwind CSS with CSS variables for styling, I have noticed a peculiar issue. The color previewers/decorators that usually appear when defining a color are not showing up in my class names. These previewers are quite helpful in ...

javascriptcssreactjsvisual-studio-codetailwind-css

Alter the font color upon clicking the menu using jQuery

When I click on the menu and sub-menu items, I want to change their colors along with their parent. You can see an example of how I want it to work here. However, currently, when I click on a sub-menu item, the color of the parent menu item gets removed. ...

javascriptjqueryhtmlcss

Dropmenu | Designing with Materials | Pair of Choices | Intersection

My goal is to incorporate dropdown fields with material design only. After researching various examples online, I have noticed a recurring issue. When there are two dropdown items close to each other, they end up overlapping. Check out this example: http ...

javascripthtmlcssmaterial-design

What is the best way to convert JavaScript to JSON in Python programming?

I encountered a situation where I have an HTML page that contains a lengthy product list, making it too large for me to upload. The products are stored within the script section of the page, specifically in one variable. Initially, I mistook this data for ...

javascriptpythonhtmljson

The jQuery webUI popover does not allow for focusing

Encountering an issue with webUI popover functionality. I have 2 links that each open a popover upon click, and I am trying to copy the contents of both popovers without refreshing the page. When I successfully copy the content from one popover and then tr ...

javascriptjqueryhtmlpopoverwebui

What is the best way to shuffle the displayed images on a website to make the order random?

I'm looking to create a unique collage using 10 image files in a folder with vanilla JS. The goal is to randomize the images within a Bootstrap container on a website while maintaining their aspect ratio by utilizing a grid layout. However, I've ...

javascripthtmlcssbootstrap-4

Numerous asynchronous AJAX requests accompanied by various loading indicators

My ASP.net MVC page is utilizing ajax calls to load data for each of the six divs. To handle the loading indicator, I have created two methods as shown below. $("#divId").loading(); $("#divId").stopLoading(); Here is an example of one of my ajax calls ( ...

javascriptjqueryhtmlajax

Selector in CSS targeted by using target selector

When you click on the anchor tag "Click me," is there a way to use only CSS to display the p tag with the text "This is my answer"? I am aware that placing the p tag after the anchor tag is a solution, but I am curious if there is a method to achieve this ...

javascriptjqueryhtmlcss