The columns seem to be refusing to cooperate, despite my careful calculations with the Bootstrap grid system

I'm currently working on a project and trying to set up a Blog page that displays various article cards in different columns. I have 4 columns in total - the first being Col-6, the second Col-4, the third Col-2, and the fourth Col-10.

The first and second columns feature highlighted articles, while the third column serves as a space for displaying writers (which is not a primary focus compared to the articles).

The fourth column contains less prioritized cards. My goal is to align the First & Second columns with the Fourth column. However, due to the length of content in the Third column, I am unable to achieve this alignment and there's a gap between them which you can see in the code snippet below.

If you want to take a look at my code, please visit: https://i.sstatic.net/nnoqo.png

You can find the full code here: https://github.com/doublechai/tfwi/blob/main/knowledge_sharing.html

Any help or suggestions would be greatly appreciated. Thank you in advance!

htmlcssbootstrap-4

Answer №1

https://codepen.io/landingheart-the-animator/pen/rNyKvQg

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="75171a1a01060107140535405b455b44">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
    <script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="31535e5e45424543504171041f011f00">[email protected]</a>/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script>

</head>
<body>
  <nav class="navbar navbar-expand-lg navbar-light bg-light">
    <div class="container-fluid">
      <a class="navbar-brand" href="#">
        <img width="60px" height="60px" src="LOGO" >ThoughtForward Institute</img>
        </a>
      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>  
      <ul class="navbar-nav me-auto mb-2 mb-lg-0">
         <!-- Other nav items here -->
      </ul>
      <form class="d-flex">
         <!-- Search form here -->
      </form>
    </div>
  </nav>

  <div class="container">
     <!-- Main content section -->
  </div>
  <div class="container">
     <!-- Cards and content to display -->
  </div>

</body>
</html>

<style>
  hr{
    padding: 0px;
    margin: 0px;    
  }

  a{
    color: white;
    text-decoration: none;
  }
</style>

This is the codepen link that can help you with your issue. If you found this helpful, please consider accepting it as the answer. Thank you.

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

Integrate the CSS content page into the ASP.NET masterpage

Why am I unable to add a CSS Content Page in my Master Page Asp.Net? I've tried the following: <asp:TextBox ID="name" runat="server"></asp:TextBox> I then added the following CSS: #name { width:300px; height: 300px; } However, ...

cssasp.netmaster-pages

Connect with HTML icon links - utilize buttons or <a> tags styled with CSS icons

I'm a bit of a novice when it comes to coding, but we all have to start somewhere, right? I've been spinning my wheels trying to search for the answer to this question. How can I create a row of icons that perform specific functions, such as logg ...

htmlcsssymfonyhyperlinkicons

Form Validation Issues Detected

Could someone help explain why the code below is causing an error according to W3C guidelines: <form id="" method="post" action="" /> <input type="text" name="" title="" tabindex="10" class="" /> <inp ...

phphtmlcss

Display information from a MySQL database in a tabular format using PHP

I am currently learning PHP and attempting to retrieve data from a database to display it in an HTML table. However, I am facing an issue where the total number of records returned is 13 but only 12 records are being displayed in the table (it seems to be ...

phpmysqlhtml

The alignment of columns in Bootstrap 4 no longer follows the horizontal pattern seen in Bootstrap 3

After migrating to Bootstrap 4, I noticed that my columns are all vertically aligned. I have updated the boostrap-min.css from version 3 to 4 and double-checked the code for any errors, but everything seems correct. To further troubleshoot, I used a JS fi ...

htmlcssbootstrap-4

Children divs unexpectedly showing up outside of their parent divs

I have reviewed similar questions on this matter, but none of them seem to provide a solution for the issue I am facing. Currently, my goal is to display a stylized list, but I am encountering more difficulties than expected. You can find a fiddle linked ...

csshtml

Disappear solely upon clicking on the menu

Currently, I am working on implementing navigation for menu items. The functionality I want to achieve is that when a user hovers over a menu item, it extends, and when they move the mouse away, it retracts. I have been able to make the menu stay in the ex ...

javascriptjqueryhtmlcss

The CSS property overflow-x:hidden; is not functioning properly on mobile devices despite trying multiple solutions recommended online

Seeking help on a persistent issue, but previous solutions haven't worked for me. Looking to implement a hamburger menu that transitions in from offscreen. The design appears correctly on desktop and simulating mobile, but actual mobile view require ...

javascripthtmlcss

Make sure to load the HTML content before requesting any input from the user through the prompt function

Could you please help me with a question? I'm looking to load HTML content before prompting the user for input using JavaScript's prompt() function. However, currently the HTML is only loaded after exiting the prompt. Below is the code that I hav ...

javascripthtml

Successful execution of Ajax request is yielding no results

Hey there! I'm new to Ajax and PHP, so please bear with me if my question seems silly. I've been trying to set up a live search feature using ajax, but despite researching extensively online, I can't seem to make it work. I have 4 files - on ...

javascriptphpjqueryhtmlajax

Customize border color for a single cell in a table using Bootstrap 4

I'm facing an issue where I'm trying to apply a red border color to a specific cell, but it's not appearing on the top and left sides of the cell. It seems like the border color of other cells is taking precedence over the one I'm tryin ...

htmlcsstwitter-bootstrapbootstrap-4

The output display is not visible

I am currently working on a tutorial to showcase contact details on my webpage. However, I am facing an issue where the code is not displaying the first and last name as expected. Below is the code snippet for reference. Snippet from index.html <!DOCT ...

javascripthtmlangularjs

Require assistance in building a responsive two-column div with full-height, vertical-center content in one div, and an image carousel in the second div

I am trying to develop a responsive layout with two columns, where the right column will have vertically centered content and the left column will contain a full-height and width image carousel. For mobile and tablet screens, the design should look like t ...

jqueryhtmlcss

How can we align divs in the center horizontally inside a parent div?

This question has been asked many times, but I can't seem to figure it out in my situation as I am new to HTML. I have three divs (boxes: QM, Audit, PM) and I want to center them within a parent div called Services. In the photo provided, you can see ...

htmlcss

Why is Validators.pattern not functioning in production when it works perfectly in my local development environment for Angular?

Why is Validators.pattern not working in the production environment but functioning fine in my local development setup? I implemented Validators.pattern and '*ngIf="email.errors.pattern"' for email validation on an existing form. Every ...

javascripthtmlangular

displaying a pair of inputs next to each other

Is it possible to display two input fields side by side? I am using Angular's matInput forms, but struggling to position the second input next to the first. What I would like to achieve is to have "input1 , input2" on the same line. Here is my code: ...

javascriptcsshtmlangular

The Vue.js Modal component appears in the list of components, but it fails to display when triggered

My goal is to show an item's details when a button is clicked. I've managed to pass the data to the modal correctly, but I'm struggling to make the modal appear. Despite trying various modal implementations in the template, the closest I got ...

javascripthtmlvue.js

What's the best way to determine the horizontal scroll amount of a div using jQuery?

I'm facing an issue with a large div element that has specific configurations: <div class="divImagem" style="position:relative; width: 1424px; height: 790px; overflow:hidden;"> Due to its size, this div is causing a horizontal scroll bar to ap ...

jquerycsshtmlscroll

Exploring Bootstrap 2.3.2: How to Align the Width of Inline Form Controls

I am currently working on creating a form that needs to have a specific layout as shown in the screenshot below. The Amount control group consists of three input elements, but the right edge of the last element should align with the Frequency object' ...

htmlcsstwitter-bootstraptwitter-bootstrap-2

Nextjs fails to render components

I have my own website and I'm trying to create a contact section for it. Here is the code snippet I am using: <section className={styles.contact}> <p>Test</p> </section> Additionally, I've imported a style sheet with an ...

htmlcssnext.js