Unable to display divs in a stacked format using Bootstrap 5

I need help aligning div's vertically on the page. Currently, all my elements are displaying next to each other instead of stacking one below the other.

body {
    height: 100vh;
}
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="52303d3d26212620332212677c617c62">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/@popperjs/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="f0939f8295b0c2dec1c1dec8">[email protected]</a>/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="36545959424542445746760318051806">[email protected]</a>/dist/js/bootstrap.min.js"></script>
<script src="https://kit.fontawesome.com/b7fb98327c.js"></script>

<div class="landing d-flex align-items-center justify-content-center h-100" id="start">
    <div id="start-app">
      <p id="app-name" class="header h1">App Name</p>
    </div>
    <div>
      <label for="email" class="form-label">Email:</label>
      <input type="email" class="form-control" id="email" placeholder="Enter email" name="email">
    </div>
    <br><br>
    <div>
      <label for="pwd" class="form-label">Password:</label>
      <input type="password" class="form-control" id="pwd" placeholder="Enter password" name="pswd">
    </div>
    <div>
      <label class="form-check-label">
      <input class="form-check-input" type="checkbox" name="remember"> Remember me
      </label>
    </div>
    <div>
      <p><i class="fa-solid fa-circle-play" id="start-icon"></i></p>
    </div>
  </div>

I am looking to have the divs stack on top of each other rather than side by side. Using <br> tag doesn't seem to solve the issue either.

javascripthtmlcssalignmentbootstrap-5

Answer №1

To ensure proper styling, you should include the flex-column Class in your code. More information can be found at: https://getbootstrap.com/docs/5.0/utilities/flex/#direction

(I opted to remove the height: 100vh property as it was causing a display issue)

<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="7d1f1212090e090f1c0d3d48534e534d">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/@popperjs/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="06656974634634283737283e">[email protected]</a>/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="83e1ececf7f0f7f1e2f3c3b6adb0adb3">[email protected]</a>/dist/js/bootstrap.min.js"></script>
<script src="https://kit.fontawesome.com/b7fb98327c.js"></script>

<div class="landing d-flex align-items-center justify-content-center h-100 flex-column" id="start">
    <div id="start-app">
      <p id="app-name" class="header h1">App Name</p>
    </div>
    <div>
      <label for="email" class="form-label">Email:</label>
      <input type="email" class="form-control" id="email" placeholder="Enter email" name="email">
    </div>
    <br><br>
    <div>
      <label for="pwd" class="form-label">Password:</label>
      <input type="password" class="form-control" id="pwd" placeholder="Enter password" name="pswd">
    </div>
    <div>
      <label class="form-check-label">
      <input class="form-check-input" type="checkbox" name="remember"> Remember me
      </label>
    </div>
    <div>
      <p><i class="fa-solid fa-circle-play" id="start-icon"></i></p>
    </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

Creating transparent overlay boxes with CSS grid

I'm working on a design where I need to display text information over an image. The challenge is aligning the text properly, especially when the screen size changes due to using a grid system (1140). Currently, I have a div with transparent background ...

cssoverlaytransparent

Guide to parsing the HTML structure of a webpage from a different domain

Struggling with parsing the DOM of a remote webpage using AJAX. Can't find any examples or tutorials on this process. My goal is to navigate through the DOM of a remote page, locate a tag with a specific id/class, extract the content within that tag, ...

htmlajaxjsonjquery

Troubleshooting a problem with jQuery: alter background color when checkbox is

I recently created a script to change the background color when a radio button is selected. While it works for checkboxes, I noticed that when another radio button is selected, the previous one still remains with the selected color. <script type="text/ ...

javascriptjqueryhtml

Using JSTL within JavaScript

Can JavaScript be used with JSTL? I am attempting to set <c:set var="abc" value="yes"/> and then later retrieve this value in HTML and execute some code. The issue I'm facing is that the c:set always executes even when the JavaScript condition ...

javascripthtmljspjstl

Tips for invoking a reduce mechanism within a separate function

I need assistance with implementing a reduce function: users.reduce(function (acc, obj) { return acc + obj.age/3; }, 0); within the following function structure: function calculateUserAverageAge(users) {}; To analyze this array of objects and calculate ...

javascriptarraysobjectreduce

Tips on sending a form to the server with ajax technology

I'm struggling with sending a button id to my server through ajax in order to submit a form without having to constantly reload the page every time I click on a button. Unfortunately, it's not working as expected and I can't figure out why. ...

javascripthtmljquerydjangoajax

The results generated by the Google Maps API are consistently consistent

const request = require('request'); var geocodeAddress = (location) => { var encodedLocation = encodeURIComponent(location); request({ url: `http://www.mapquestapi.com/geocoding/v1/address?key=APIKey&location=${encodedLocation}` ...

javascriptnode.js

What should be done in Android when the app crashes due to incoming HTML content?

If I register using an email and password, the process is successful if the email exists within the domain. However, if a malformed email address like [email protected] is used, it returns HTML and crashes my app. How can I handle this issue? publi ...

androidhtmljson

Using Javascript to set up a callback that alerts when a script file is done loading with the attributes "async" and "defer"

My app is loading the platform.js file asynchronously with the attributes of async defer. <script src="https://apis.google.com/js/platform.js?onload=onLoadCallback" async defer> </script> I am looking for a callback function that will alert m ...

javascript

Integrate Arduino's capabilities with Johnny-Five within an HTML JavaScript document

As a beginner in the world of JavaScript, I set out to embark on a project involving turning on a connected LED on an Arduino board by simply pressing a button on an HTML page. After doing some research, I came across a JavaScript library called "johnny- ...

javascripthtmlarduino

Guide to dynamically setting a value in an input field using JavaScript's document.querySelector

My goal is to input a value using Javascript. Check out my project link! Click on "add to cart" and then proceed to checkout to reach the checkout page. I am trying to automatically add a Zipcode value to the checkout page. I attempted this method but it ...

javascriptjqueryinput

Managing a collection of input values

Is there a way to effectively manage an array of input fields using reactjs? Take for instance this text field: <input type="text" value="" name="test[]" /> Below is the code I'm currently working with: render () { ...

javascriptreactjs

It's essential to ensure that this property remains responsive, whether through the data option or by initializing the property for class-based components

This code snippet contains the template and path information. <template> <div class=""> <c1 :text="message1"></c1> <c1 :text="message2"></c1> </div> </templa ...

javascriptvue.jsnuxt.js

What is the process for importing DataTables using npm?

My attempt to import "datatables.net-select" using the usual method doesn't seem to be working. After checking the website, I found that the correct way to do it is: var $ = require( 'jquery' ); var dt = require( 'datatable ...

javascriptreactjsdatatablenpm

The issue with using useState on arrays is that it is not functioning properly with React Hooks

const [LatestNews, setLatestNews] = useState([]); useEffect(() => { async function fetchLatestData() { const result = await database.collection('latestnews').get(); result.docs.forEach(doc => ...

javascriptreactjsreact-hooks

When selecting a different file after initially choosing one, the Javascript file upload event will return e.target as null

Currently, I have implemented file uploading using <input>. However, when attempting to change the file after already selecting one, the website crashes and states that event.target is null. <Button label="Upload S3 File"> <input ...

javascriptreactjstypescriptreact-hooks

Exploring the options for accepting various file formats with Swal SweetAlert

Currently, I am using Swal Sweet Alert within my Vue.js application. I have successfully implemented code to allow image files, but now I am seeking assistance on how to extend this functionality to include multiple file types such as PDFs, PPTs, and Doc ...

javascriptvue.jsyii

"Utilize the parent component's functionality by extending/inheriting it

export default function PageTemplate() { return ( <div className="layout"> <LeftMenu /> <div className="content"> <TopMenu /> <div id="other-contents"> ...

javascriptreactjsinheritancenext.jssingle-page-application

The Sizzle.js error, "Uncaught TypeError: undefined (reading 'expr')," is causing some trouble

$.expr[':'].containsCaseInsensitive = function (n, i, m) { return jQuery(n).text().toUpperCase().indexOf(m[3].toUpperCase()) >= 0; }; .expr is not recognized. To ensure it's defined, I included a CDN link below: <script src=&qu ...

javascript

I possess a certain input and am seeking a new and distinct output

I am looking to insert a word into an <input> and see an altered output. For example, Input = Michael Output = From Michael Jordan function modifyOutput() { var inputWord = document.getElementById("inputField").value; var outputText = "print ...

javascripthtml