Shifting text upwards within a document

I'm struggling with CSS and bootstrap as I have limited knowledge in this area. I have multiple divs on a page that I want to align based on our old website design.

The problem I'm facing is that one div is larger on the right, causing a lot of white space on the left side: (see screenshot)

Here is my UI code:

<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="e6848989929592948796a6d3c8d4c8d5">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
  <div class="col-6 col-sm-6">
    <h5><b>PRODUCER MAILINGS AND IMPORTANT UPDATES</b></h5>
    <hr class="fa-border border-primary border-1" />
    <ul class="list-unstyled">
      <li onclick="location.href='mydoc'"><img border="0" src="../images/icons/pdf.jpg" /> Name1</li>
      <li onclick="location.href='mydoc'"><img border="0" src="../images/icons/pdf.jpg" /> name goes here</li>
    </ul>
  </div>
  <div class="col-6 col-sm-6">
    <h3><b>XXXXXX Mitigation Credits</b></h3>
    <hr class="fa-border border-primary border-1" />
    <ul class="list-unstyled">
      <li onclick="location.href='mydoc'"><img border="0" src="../images/icons/pdf.jpg" /> name goes here</li>
       ... 
    </ul>

Tried rearranging elements and experimenting with various CSS techniques found through Google searches

htmlcsstextbootstrap-5whitespace

Answer №1

The foundation of Bootstrap's grid system is formed by rows and columns. In this demonstration, there is one row consisting of two divs each spanning six columns. Directly below that row is another div also occupying six columns. To position the lower div underneath the preceding one, consider placing it within the column rather than after the row.

For those delving deeper into Bootstrap, I recommend becoming well-versed in its functionality.

<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="99fbf6f6edeaedebf8e9d9acb7abb7aa">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" />
<div class="row">
  <div class="col-6 col-sm-6">
    <h5><b>PRODUCER MAILINGS AND IMPORTANT UPDATES</b></h5>
    <hr class="fa-border border-primary border-1" />
    <ul class="list-unstyled">
      <li onclick="location.href='mydoc'"><img border="0" src="../images/icons/pdf.jpg" />&nbsp;Name1</li>
      <li onclick="location.href='mydoc'"><img border="0" src="../images/icons/pdf.jpg" />&nbsp;name goes here</li>
    </ul>
    <div class="col-12 col-sm-12" style="vertical-align:top">
      <h3><b>OTHER MANUALS AND PROCEDURES</b></h3>
      <hr class="fa-border border-primary border-1" />
      <ul class="list-unstyled">
        <li onclick="location.href='mydoc'"><img border="0" src="../images/icons/pdf.jpg" />&nbsp;name goes here</li>
      </ul>
    </div>
  </div>
  <div class="col-6 col-sm-6">
    <h3><b>XXXXXX Mitigation Credits</b></h3>
    <hr class="fa-border border-primary border-1" />
    <ul class="list-unstyled">
      <li onclick="location.href='mydoc'"><img border="0" src="../images/icons/pdf.jpg" />&nbsp;name goes here</li>
      ... [remaining content truncated] ...
    </ul>
  </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

Cordova: Opening App through a Website Link Click

Embarking on my app development journey, I recently dived into creating an Android app with Cordova. However, I found myself stuck at a particular issue: In the sign-up process, users receive an email containing an activation link to click and confirm the ...

androidhtmlcordova

What is the best way to showcase specific rows with Vue.js?

After fetching data from a specific URL, I am looking to display only the 2nd and 4th rows. { "status": "ok", "source": "n", "sortBy": "top", "articles": [ { "author": "Bradford ", "title": "friends.", ...

javascripthtmlvue.jsvuejs2vue-component

Unable to display button image when using both id and style class in CSS

During my transition from Java 7 to Java 8, I've encountered a peculiar issue. Here's a brief explanation: In my FXML file, I have a button defined with style class button-red-big and id btnInput: <Button id="btnInput" fx:id="btnInput" align ...

javacssjavafx-8fxml

I need assistance with retrieving an image from a database using PHP

How can I display an image from the database on a new page using PHP? Whenever I click on the image, it always shows the same image on the new page. How can I make it so that the image displayed on the new page is the one I clicked on in the previous pag ...

phphtmlmysqlsql

Aligning a Material UI button to the far right of a row

I am struggling to align a React material-ui button to the right-most of the page and despite trying to use the justify="flex-end" attribute within the following code, it doesn't seem to be working: <Grid item justify="flex-end" ...

cssreactjsmaterial-ui

After a single click, the functionality of jquery.nav.js seems to be malfunctioning

Encountering an error message: Uncaught TypeError: Cannot read property 'top' of undefined(…) jquery.nav.js:183 In an effort to convert my web app into a Single Page Application (SPA) using the jquery.nav.js library (available at https://githu ...

javascriptjqueryhtmlcss

Customized figcaption formatting separate from the surrounding text

Is there a way to add a "figcaption" with independent settings to images placed alongside paragraphs in HTML? I have the following code snippet, but I'm unsure if I am using the figcaption tag correctly: <p><figure><span class="image ...

htmlcss

Having trouble with CSS values not being applied to dynamically injected HTML div elements in Angular 4?

Link to Codepen My Angular calendar application runs smoothly without any errors. However, I am encountering an issue where the CSS styles are not being applied to the page. When I implemented this separately, everything worked fine. But as soon as I inc ...

javascriptjqueryhtmlcssangular

Maximizing the Potential of Bootstrap 5's Grid System

I'm struggling a bit with the Bootstrap grid system. I want to create 6 divs or containers that span the full width on smaller devices like mobiles, use 25% of the width on medium devices like tablets, and display all 6 in a single row on large deskto ...

csstwitter-bootstrap

Discovering the mean value from a data set in a spreadsheet

I have been tasked with creating an HTML page for a car dealership using JQuery and Bootstrap 5. The goal is to utilize Bootstrap 5 to accomplish the following: Set up a table with appropriate form input elements that allow users to input four (4) quarter ...

javascripthtmljqueryaveragebootstrap-5

Having trouble with media queries on my iPad

I currently have a media query set up as follows: @media only screen and (max-width: 959px) It works when I resize my browser, however, it does not seem to be functioning correctly when my iPad is in portrait mode. When I include and (max-device-width: 9 ...

htmlcssmedia-queries

The jquery click event is not working as expected

Hey there, I've been working on creating a dropdown menu that can be activated by clicking for better usability on touch screens. $('a.dropsmall2').click(function() { $(this).next('ul').slideToggle(500,'easeInOutQuad'); ...

javascriptjquerycss

Whenever I try to include something within the `componentWillUnmount` function,

I'm currently learning React on my own. I've been trying to save session data in my componentWillUnmount method. However, when I add code inside componentWillUnmount, nothing seems to happen. I tried debugging by adding console logs and debugger ...

javascripthtmlreactjsreduxmaterial-ui

Utilizing :checked selector and toggle() function in jQuery

I'm facing an issue with my jQuery code where the CSS changes are not working as expected. When I test the code, it doesn't apply the CSS changes. If I remove the :checked and just use $("input"), then the CSS works but only when clicking on an i ...

jquerycsscheckbox

Tips for executing a jQuery function on multiple sets of elements

Currently, I have a list with all items sharing the same class name. There is a jQuery plugin that identifies the tallest element and sets the height of all list items to match the tallest one. My goal is to run this method for each UL group individually. ...

jqueryhtmlpluginsloops

Display a table image in a new location on the HTML page through dynamic rendering

I am working on a task where I need to retrieve the content of the 'Photo' column for a specific row in a table and display the corresponding image on an HTML page. The 'image' column contains paths to jpg images. For instance, if we s ...

pythonhtmlflaskjinja2

Expanding Gridview Width within a Container in ASP.Net: A Step-by-Step Guide

https://i.stack.imgur.com/ZaJE7.jpg After viewing the image above, I am facing a challenge with stretching and fixing a gridview to contain the entire div where it is placed. The issue arises when the gridview adjusts automatically based on the content&ap ...

javascriptc#jquerycssasp.net

Developing an interactive web interface with HTML

I've been attempting to design a flexible HTML page that replicates the layout of a Java applet clock, but I'm unsure if my current approach is correct. Below is an example of the three-clock image set that I am currently working on. My method i ...

htmlcsslayout

Stylized search input inspired by Pinterest with a bubbly design

When it comes to my search bar, I want the user's entered keywords to be displayed within a bubble that has a delete option when they press space to add another keyword. This functionality is similar to what Pinterest does with their search bar, as de ...

javascripthtmlcss

Initiating a file download using HTML

When I try to initiate a download by specifying the filename, instead of downloading, it opens in a new tab. The code snippet below shows what I am currently using. Additionally, I am working on Chrome Browser. <!DOCTYPE html> <html> < ...

javascripthtmlcssanchorhref