Having trouble vertically centering a div within a grid using bootstrap

How can I vertically center the card with the other content in the right div?

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

This is my code:

le="margin-bottom:100px"> I Agree With the terms and service Request Code 

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
  <div class="col-lg-8">
    <div style="border-radius:2px;padding:10px;background-color:#2120220e;word-wrap: break-word;text-align:center;width:100%;height:auto" id="description" >Testing</div>

      <div class="line"></div>
    <h3>Your Answer</h3>
    <div style="margin-bottom:100px">
      <div  style="padding:10px"  class="form-group">
        <textarea rows="10" placeholder="Description" class="form-control" id="upload-editor"></textarea >
    </div>
    <div class="form-group">
        <label class="control control--checkbox">I Agree With the terms and service   <input type="checkbox" id="TOS" name="scales"></label>
        <button style="float:right" onclick="upload()"  class="btn btn-primary mb-2">Request Code</button>
    </div>   
    </div>
  

  </div>
  <div class="col-lg-4">
    <div class="card" style="width: 18rem;">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6>
        <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
        <a href="#" class="card-link">Card link</a>
        <a href="#" class="card-link">Another link</a>
      </div>
    </div>
  </div>
</div>
</div>

htmlcssbootstrap-4

Answer №1

To center the divs in the row, I would suggest removing the margin-bottom: 100px; and adding the class align-self-center to each div. This will ensure that your content remains centered, even if you apply padding-top or bottom to the col-lg class.

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.6.0/css/bootstrap.min.css">

<div class="container">
  <div class="row">
    <div class="col-lg-8 align-self-center">
      <div style="border-radius:2px;padding:10px;background-color:#2120220e;word-wrap: break-word;text-align:center;width:100%;height:auto" id="description">Testing</div>
      <div class="line"></div>
      <h3>Your Answer</h3>
      <div>
        <div style="padding:10px" class="form-group">
          <textarea rows="10" placeholder="Description" class="form-control" id="upload-editor"></textarea>
        </div>
        <div class="form-group">
          <label class="control control--checkbox">I Agree With the terms and service <input
                                type="checkbox" id="TOS" name="scales"></label>
          <button style="float:right" onclick="upload()" class="btn btn-primary mb-2">Request
                            Code</button>
        </div>
      </div>


    </div>
    <div class="col-lg-4 align-self-center">
      <div class="card" style="width: 18rem;">
        <div class="card-body">
          <h5 class="card-title">Card title</h5>
          <h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6>
          <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
          <a href="#" class="card-link">Card link</a>
          <a href="#" class="card-link">Another link</a>
        </div>
      </div>
    </div>
  </div>
</div>


<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.1/umd/popper.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.6.0/js/bootstrap.min.js"></script>

If this solution doesn't work for you, feel free to reach out for further assistance.

Answer №2

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container h-100">
<div class="row h-100 justify-content-center align-items-center">
  <div class="col-lg-8">
    <div style="border-radius:2px;padding:10px;background-color:#2120220e;word-wrap: break-word;text-align:center;width:100%;height:auto" id="description" >Testing</div>

      <div class="line"></div>
    <h3>Your Answer</h3>
    <div style="margin-bottom:100px">
      <div  style="padding:10px"  class="form-group">
        <textarea rows="10" placeholder="Description" class="form-control" id="upload-editor"></textarea >
    </div>
    <div class="form-group">
        <label class="control control--checkbox">I Agree With the terms and service   <input type="checkbox" id="TOS" name="scales"></label>
        <button style="float:right" onclick="upload()"  class="btn btn-primary mb-2">Request Code</button>
    </div>   
    </div>
  

  </div>
  <div class="col-lg-4">
    <div class="card" style="width: 18rem;">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6>
        <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
        <a href="#" class="card-link">Card link</a>
        <a href="#" class="card-link">Another link</a>
      </div>
    </div>
  </div>
</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

Exploring Selenium WebDriver: Manipulating Table Elements and Iterating Through Rows

Is there a more efficient way to iterate through tables row by row without using Absolute Xpath? In my test case, I need to search for specific data in each row. This was the previous logic of my code: private static int iRow; WebElement sWorkUnitRows = ...

javahtmlselenium-webdriver

When incorporating web animation into an SVG graphic, the animation may malfunction if used as a background

Recently, I created an SVG-based loading indicator using an online tool. However, every time a page with this loading indicator loads, Chrome displays a warning about SMIL animations being deprecated. To address this issue, I decided to explore replacing t ...

javascriptcsssvgbackground-imageweb-animations

Adjusting the size of a React element containing an SVG (d3)

In my simple react app, I have the following component structure: <div id='app'> <Navbar /> <Graph /> <Footer /> </div> The Navbar has a fixed height of 80px. The Footer has a fixed height of 40px. The Graph i ...

cssreactjsd3.jssvgresize

Load the content of a text file that contains values separated by commas, and store them in an array

I have a text document that I need to parse. An example of the content in the text file is shown below: Login,Name,Surname Rd-001,Raj,Dolka RS-932,Ram,Selmen I am interested in extracting only the login information and storing it in an array for future d ...

javascripthtmlarraysfile

Utilizing Cordova for Filesystem Operations: A Comprehensive Guide

I'm in the midst of developing an Android application that involves interaction with the filesystem. I'm struggling to understand how to utilize the native filesystem (the one accessed through the cordova-plugin-file) – can someone provide guid ...

javascriptandroidhtmlcordova

Share the hyperlink to a webpage with someone else

In my SQL command, I have a unique feature that retrieves the complete URL value of the current page: [##cms.request.rawurl##]. This code returns the entire URL. I need to send this address to another page and load it into a special div called "load-fac". ...

javascriptjqueryhtml

Display a dropdown menu when clicking on a close button in a single element using Vanilla JavaScript

I'm currently in the process of learning Javascript and trying to grasp the concept of events and selectors. My aim is to have a close button that, when clicked, triggers a specific dropdown related to the card it's attached to. I plan to achie ...

javascripthtmlcss

Is the "sizes" attribute of the "picture" element functional in Chrome when it comes to <source>?

The incredible <picture> element has been functioning flawlessly in the Chrome browser for well over a year, yet regrettably, I seem to be encountering an obstacle when attempting to make use of the powerful sizes attribute within the <source> ...

htmlimageresponsive-images

Tips for compressing css styles with webpack version 3

My goal is to optimize and minify my CSS for production, but I'm encountering errors with my current implementation. Here's a snippet of my webpack 3 configuration in config.production.js: var webpack = require("webpack"); var path = require("pa ...

javascriptcssnode.jswebpackfrontend

A guide to adjusting the width without affecting the td element

Currently, I am facing a challenge while coding in HTML. I am trying to create a table with a header (time range) that fits on a single line without affecting the width of the td elements. Below is the code snippet: <table style="border:1px solid #8c ...

htmlcss

Using the HTML5 Video Element on an iPad

Having trouble playing a Quicktime movie (.mov) on my iPad. Instead of the video, I just see a black area. Not sure if using the VIDEO tag will work for Quicktime videos. Does the VIDEO tag even support the .mov format? What's the best way to play a ...

ipadhtmlvideoquicktime

Arrange elements in a vertical flow based on the height of the container

I am attempting to alter the direction of Elements to be vertical. Here is an example: By default, HTML elements are displayed horizontally like this:- #container { position: absolute; width: 400px; height: 200px; border: 1px solid gree ...

javascriptjqueryhtmlcss

Expert tips for adding spacing between images in carousel sliders and eliminating glitches during slides

After creating a carousel following the guidance of this source and initially sharing it on this platform, I encountered an issue with the padding on the first image. As a solution, I removed the padding from the first image, but this caused the image to b ...

jqueryhtmlcsstwitter-bootstrapbootstrap-4

JavaScript Glitches

Embarking on the journey of web design and programming, I am venturing into the world of creating a simple gallery using JavaScript. Despite the convenience offered by jQuery, unfortunately, it is off-limits for this particular assignment. The challenge l ...

javascripthtml

Enhance Your HTML Table Layout with Dual Column Borders

Can I increase the space between columns while still keeping borders on both sides? Check out the illustration below: ...

htmlcss

Confirm that the form is valid prior to displaying the Bootstrap modal popup

My PHP file contains a simple form and a Bootstrap modal. When the submit button is clicked, the Bootstrap modal will be displayed. The form includes: https://i.sstatic.net/10R2r.png I want to validate the fields in the form. If successful, I then need ...

javascriptphpjqueryhtmlbootstrap-modal

Tips for swapping out a new line character in JavaScript

Hello! I'm currently facing a challenge with some code. I have a function designed to replace specific HTML character values, such as tabs or new lines. However, it's not functioning as expected. var replaceHTMLCharacters = function(text){ tex ...

javascripthtmlarraysstringascii

Tips for closing a popup without exiting the entire webpage

I'm facing an issue while trying to create a video playlist using two HTML files (index.html and video.html). In my video.html file, I have set up a popup for playing videos. However, whenever I close the popup or click anywhere on the page, it redire ...

javascripthtmljquery-mobile

CSS grid tracks remain fixed in size while other tracks expand

Why won't the grid track cells dynamically shrink when other cells are enlarged in the following code? In this snippet, hovering over any track section causes that cell to grow to 75% of the viewpoint. However, instead of the other sections shrinking ...

htmlcsscss-grid

Changing the background color of the dropdown button in Vue Bootstrap: A step-by-step guide

I've been struggling to modify the background color of a dropdown button, but no method seems to work. I've attempted changing it by using ID, removing its class and applying a new one, and even using !important to override the styles, but the ba ...

javascriptcssvue.jsnuxt.jsbootstrap-vue