What are the best practices for utilizing the Bootstrap grid system effectively?

I am currently working on setting up a login page using bootstrap. I have divided the page into 2 divs, each with col-lg-5 and col-lg-7. My goal is to place an image on the left side div and the login form on the right side div. However, regardless of the screen resolution, I always end up with col-lg-5 at the top and col-lg-7 at the bottom. Can someone please help me figure out what I might be doing wrong here?

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="d6b4b9b9a2a5a2a4b7a696e2f8e5f8e7">[email protected]</a>/dist/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1L" crossorigin="anonymous">

    <title>Hello, world!</title>
  </head>
  <body>
      <section class="Form my-4 mx-5">
        <div class="container">
          <div class="row">
            <div class="col">

              <div class="col-lg-5">
                <img src="./images/login2.png"   alt="">
              </div>

              <div class="col-lg-7">
                <form action="">
                  <div class="form-row">
                    <div class="col-lg-7">
                      <input type="email" placeholder="Email-Address" class="form-control">
                    </div>
                  </div>

                  <div class="form-row">
                    <div class="col-lg-7">
                      <input type="password" placeholder="******" class="form-control">
                    </div>
                  </div>

                  <div class="form-row">
                    <div class="col-lg-7">
                      <button type="button" class="btn1">Login</button>
                    </div>
                  </div>
                  
                  <a href="#">Forgot Password</a>
                  <p>Don't have an account yet? <a href="#">Register here</a></p>
                </form>
              </div>
              
            </div>
          </div>
        </div>
      </section>

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <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://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="f4849b84849186da9e87b4c5dac5c0dac3">[email protected]</a>/dist/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="ea8885859e999e988b9aaadec4d9c4db">[email protected]</a>/dist/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
  </body>
</html>

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

htmlcssbootstrap-4

Answer №1

Your layout appears to have nesting issues with rows and columns. For a better understanding, refer to Bootstrap's grid system documentation. Correctly nested classes are crucial for achieving the desired row/column relationship.

Remember: Columns should always be directly nested under rows for optimal results.

In your specific case, it seems like your col-5 and col-7 are mistakenly nested under one col element. Make sure each column is placed directly beneath the row without additional containers.

Furthermore, don't forget to add labels to your input fields instead of relying on the placeholder attribute as a substitute for labeling.

<div class="row">
  <div class="col-lg-5"> </div>
  <div class="col-lg-7"> </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

Implementing JavaScript to add a loading spinner to a specific cell

Currently, I'm utilizing the code below (not my original) in order to load an image into a css element (referred to as cell) and showcase an activity indicator. var cell = document.createElement('li'); cell.textContent = this.labelForIndex( ...

javascriptjquerycss

Guide for displaying information as a grid or table format using Angular 4

I am tasked with handling data from an external microservice that is not always in a standard format. The data is dynamic and can include table data, along with metadata information above the grid. My challenge is to render or identify the table data, disp ...

javascripthtmlnode.jsangularnpm

Importing .js files from the static folder in Nuxt.js: a step-by-step guide

I'm in the process of transitioning my website, which is currently built using html/css/js, to Nuxt.js so that I can automatically update it from an API. To maintain the same website structure, I have broken down my code into components and imported ...

javascriptcssvue.jsimportnuxt.js

4 innovative ways to customize internal CSS in Bootstrap

I'm just starting out with bootstrap and I could really use some guidance on how to customize it. I managed to create a sample site, but I'm struggling to make modifications beyond the basic bootstrap settings. I have a "container" with blue font ...

htmlcssbootstrap-4

What is the best method to conceal the tooltip using the html <a> title attribute?

Is there a way to prevent the tooltip from displaying when hovering over links, while still keeping the title attribute for SEO purposes? I have come across suggestions like using jQuery with $('...').removeAttr('title'), but will this ...

htmlhidetitle

How can I use CSS and jQuery to modify the background color?

I stumbled upon this page and was impressed by the continuous color changes. I looked through the source code but couldn't find the script responsible for the color changes. Can anyone direct me towards the right solution? What script was used to crea ...

jquerycss

Link aligned to the right

Recently, I added some menu links in the blue area on . However, I am now looking to add a right aligned link while keeping the others left aligned. My attempt using [method] didn't work. Any suggestions on how I can achieve this? ...

htmlcsshyperlinkalignment

Unidentified event listener

I am currently facing an issue where I keep getting the error message "addEventListerner of null" even though I have added a window.onload function. The page loads fine initially but then the error reoccurs, indicating that the eventListener is null. Str ...

javascripthtmlreactjsaddeventlistener

Crafting web design with media queries to ensure responsiveness

I have been working on creating a responsive webpage. While the header and footer are resizing properly when the browser is reduced in size, the navigation section is not behaving the same way. Currently, shrinking the page is causing the navigation block ...

htmlcss

Adjusting Flexslider to perfectly accommodate the height and width of the window dimensions

Currently, I am using Flexslider version 1.8 and seeking to set up a fullscreen image slider on my homepage. My goal is to adjust the slider to match the browser window size. While experimenting with width:100% and height:auto properties, I have managed t ...

javascripthtmlcssflexslider

Navigating a table while keeping headers in place at the top

Trying to construct a table where the thead remains fixed while the tbody scrolls. Utilizing percentages and fixed width for cell size determination, aiming for uniformity and alignment between percentage td's and thead headers. Referenced JSFiddle d ...

javascripthtmlcss

Clustering in an environment requires merging and minifying granules

While Granule is effective for minifying and merging CSS/JS files on a local environment, it presents challenges in clustered environments. The issue arises when each node of the cluster computes its own file during runtime, causing discrepancies when a us ...

javascriptcssyuiminify

Optimizing CSS usage within Django: top recommendations

Throughout a 6-month-long project, I have continuously added new URLs. However, I am now encountering an issue when using the extend 'base.html' function on other pages where the CSS overlaps and creates confusion. My question is: What are the b ...

javascriptpythonhtmlcssdjango

Switch the 360-degree images by clicking a button using Panolen.js

As a beginner in the world of html, css, and javascript, I am trying to create a webpage that displays 360 panorama images. My goal is to have the image change when a button is clicked - for example, clicking on button 1 will display image1, while clicking ...

javascripthtmlbutton

Is there a way for me to utilize VB to remotely click a button on a webpage

I've been searching for a solution to my issue but none of the suggestions from other posts seem to work for me. I am attempting to write VB code that will modify the year dropdown, populate the address field, and then initiate a search when a button ...

htmlvba

What is the best way to ensure that the size of a header is balanced on both margins?

I just recently began learning CSS about a week and a half ago, and I'm facing a challenge that I'm struggling to overcome. I want my webpage to have the same design as shown in this image, but despite trying various solutions, I can't seem ...

htmlcssheaderblockmargin

Managing the attention on a switch button

I'm struggling to maintain focus on the toggle button after it's been clicked. Currently, when I press the button, the focus jumps to the top of the page. I can't figure out what I'm doing wrong. Below is the code snippet: HTML <b ...

javascriptjqueryhtmlangularjs

Converting a 'div' element into a dropdown menu with CSS and Jquery

I am facing a challenge where I have a collection of buttons enclosed in a div that I want to resemble a dropdown: <div id = "group"> <label> Group: </ label> <div value =" 1hour "> 1h < / div> <div value =" 2hou ...

javascriptjquerycss

What is the best way to showcase the current element using jQuery?

I have this example: link HTML CODE: <div class="common-class"> <div class="trigger"> <span class="plus">+</span> <span class="minus">-</span> </div> <div class="show"></div> </div&g ...

jqueryhtmlcss

Incorporating fresh data from a node.js backend to refresh a webpage section

I'm currently working on creating an app that can retrieve the song a user is currently listening to using a web scraper. While I've managed to direct users to the page and display the current song title, they must manually refresh the entire pag ...

htmlcssnode.jsexpressejs