The width of the column is not the same

Despite setting both columns to equal widths using col-sm-6 in Bootstrap, the column widths are not actually equal. One appears smaller while the other is larger. If you have a solution to this issue that works on both mobile and laptop devices, please share. Thank you in advance.

    <div class="container"><div class="row">
<div class="col-sm-6" >
<h1 id="h1Codespeedy">Codespeedy Intern</h1>
<ul>

  // List of links...

                </ul>
        </div>
        <div class="col-sm-6" >
        <h1 id="h1Project">Projects</h1>
            <ul class="list-group">

  // More list items...
  
</ul>  

Answer №1

Don't forget to add the list-group class to the initial ul. Without it, nothing else will work correctly.

Answer №2

You have omitted the first ul element within the list-group. This is why all column widths are not equal.

Even if you apply the same class for width in percentage, it will adjust based on how its inner elements occupy space using padding, width, or height CSS styles. If it had a fixed width, it wouldn't be affected by the inner elements' occupancy.

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<div class="container">
  <div class="row">
    <div class="col-sm-6">
      <h1 id="h1Codespeedy">Codespeedy Intern</h1>
      <ul class="list-group">
        <a href="https://www.codespeedy.com/implementing-an-lstm-cell-in-python/" target="_blank">
          <li class="list-group-item">Implementing an LSTM cell in Python</li>
        </a>
        <a href="https://www.codespeedy.com/understanding-deep-belief-networks-in-python/" target="_blank">
          <li class="list-group-item">Understanding Deep Belief Networks in Python</li>
        </a>
        <a href="https://www.codespeedy.com/merge-overlapping-intervals-in-cpp/" target="_blank">
          <li class="list-group-item">How to Merge Overlapping Intervals in C++</li>
        </a>
        <a href="https://www.codespeedy.com/understanding-deep-belief-networks-in-python/" target="_blank">
          <li class="list-group-item">Python | Understanding Style Transfer using CNNs</li>
        </a>
        <a href="https://www.codespeedy.com/machine-learning-model-to-predict-bitcoin-price-in-python/" target="_blank">
          <li class="list-group-item">Machine Learning Model to predict Bitcoin Price in Python</li>
        </a>
        <a href="https://www.codespeedy.com/find-k-th-smallest-divisor-of-a-number-in-cpp/" target="_blank">
          <li class="list-group-item">Find k-th smallest divisor of a number in C++</li>
        </a>
        <a href="https://www.codespeedy.com/using-confusion-matrix-in-machine-learning-in-python/" target="_blank">
          <li class="list-group-item">Using Confusion Matrix in Machine Learning in Python</li>
        </a>
        <a href="https://www.codespeedy.com/machine-learning-customer-churn-analysis-prediction/" target="_blank">
          <li class="list-group-item">Machine Learning | Customer Churn Analysis Prediction</li>
        </a>
      </ul>
    </div>
    <div class="col-sm-6">
      <h1 id="h1Project">Projects</h1>
      <ul class="list-group">
        <li class="list-group-item" data-toggle="collapse"><button type="button" class="btn btn-light" data-toggle="collapse" data-target="#demo3">Deploying Keras model in Web APP using Tensorflow JS</button></li>
        <ul id="demo3" class="collapse">
          <a href="https://ashu131998.github.io/Webapp/Webapp/WebApp.html" target="_blank">
            <li>Web App</li>
          </a>
          <a href="https://github.com/ashu131998/Webapp" target="_blank">
            <li>Codes of Tensorflow model and Website</dd>
          </a>
        </ul>



        <li class="list-group-item" data-toggle="collapse"><button type="button" class="btn btn-light" data-toggle="collapse" data-target="#demo1">Python | Understanding Style Transfer using CNNs</button></li>
        <ul id="demo1" class="collapse">
          <a href="https://www.codespeedy.com/python-understanding-style-transfer-using-cnns/" target="_blank">
            <li>Article and Description</dd>
          </a>
          <a href="https://github.com/ashu131998/Neural-style-transfer/blob/master/NST_Complete.ipynb" target="_blank">
            <li>Code</dd>
          </a>
        </ul>
        <li class="list-group-item" data-toggle="collapse"><button type="button" class="btn btn-light" data-toggle="collapse" data-target="#demo">AI Algorithms</button></li>
        <ul id="demo" class="collapse">
          <a href="https://github.com/ashu131998/Customer-churn-prediction-using-machine-learning" target="_blank">
            <li>Customer Churn Analysis</dd>
          </a>
          <a href="https://www.codespeedy.com/machine-learning-model-to-predict-bitcoin-price-in-python/" target="_blank">
            <li>Machine Learning Model to predict Bitcoin Price in Python</dd>
          </a>
          <a href="https://github.com/ashu131998/Customer-churn-prediction-using-machine-learning/blob/master/DecisionTree.ipynb" target="_blank">
            <li>Understanding Deep Belief Networks in Python</dd>
          </a>
        </ul>

        <a href="https://github.com/ashu131998/Word-Cloud-using-python/blob/master/Final_Project_Word_cloud.ipynb" target="_blank">
          <li class="list-group-item">Word Cloud in Python</li>
        </a>

      </ul>

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

Could you please explain the mysterious space that appeared between padding-bottom and border-bottom?

I noticed a very subtle orange gap between the padding-bottom and border-bottom. What could be causing it? https://i.sstatic.net/7eFXw.png Below is the code snippet in question: p { border-bottom: 1px solid #E8E8E8; margin: 0 auto; padding-botto ...

Replace Original Image with Alternate Image if Image Error Occurs Using jQuery (Bootstrap File Input)

I am currently utilizing the Bootstrap File Input component for file uploads, and it's working splendidly. I have set up the initialPreviewConfig to display the existing image on the server. However, there are instances when there is no file available ...

Interacting with a span button within the parent element using its specific id with Selenium and Java

Can I click on a span button nested within a div element and use the input's id to ensure test stability? HTML: <div class="idit-go"> <input id="IDITForm@checkRuleVO" class="GoLong align-left idit-go-text" type="text" value="" title="Valida ...

Is there a way to alter the styling of a React element without resorting to querySelector?

Just diving into React and I'm faced with a challenge - how to update the CSS of a class based on a condition. let customizeColumn = document.querySelector(".main-table-body"); !expandFilter ? customizeColumn.setAttribute("style", ...

Tips for integrating properties into the class in jQuery

My goal is to assign properties to a class and then inherit them into individual DIV IDs. However, something seems to be off with my code. What could it be? var startItem1X = randomRange(50,100); var startItem1Y = randomRange(50,100); var startItem2X = ra ...

Having trouble transmitting POST values through AJAX requests

I am facing an issue with two separate files, bargraph.html and data.php. Here is the content of bargraph.html: <form method="POST" name="dataform" action=""> <select name="data1" id="data1-value"> <option value="DateRecorded">Dat ...

Retrieve information from ngResource (angularjs) based on the chosen item

I am currently developing a small application that needs to display a list of cities only when a country is selected using ngResource in angularjs. The problem I am facing is that the entire list of countries and cities is being rendered initially, causing ...

What could be the reason for an ASP.NET Core application not loading within an iframe on the same domain?

I am facing an issue with my ASP.NET Core MVC website, which is embedded as the src of an IFRAME within a portal. Both the portal and the .NETCore application share the same domain (e.g., site.portal.domain / portal.domain). Upon entering the portal, I en ...

JQuery may be successfully loaded, but it is not functioning as intended

Just started dabbling in JQuery (I'm a newbie) but I'm having trouble getting it to work! Initially, it worked a couple of times but then suddenly stopped working (pretty strange). I made some changes and now it doesn't work at all. JQuery a ...

Having trouble with your jQuery slideDown menu?

I am facing the exact same issue I had last week. Here is an example of my HTML code: <article class="tickets"> <div class="grid_12 left"> <div class="header"> <i class="ico ...

What is the best way to apply margins to a nested div element in relation to its parent div element using CSS?

My Coding Dilemma: #b { width: 700px; height: 150px; margin-top: 10%; margin-left: 20%; text-align: center; border: 2px solid black; } .block { width : 10%; height : 10%; border: 2px solid black; padding: 40px 40px; margin: inheri ...

Increase the height of a div dynamically in HTML during program execution

Within my datagrid, there exists an expandable/collapsible section above the content (see Picture 1 https://i.sstatic.net/N68Rl.png). Upon expanding the content, a scroll bar appears within the datagrid element to display the data (see Picture 2 https://i. ...

Updating Bootstrap variables

According to the documentation of Bootstrap, Sass variables in Bootstrap 4 come with the !default flag which allows you to override the variable's default value in your own Sass without modifying Bootstrap's source code. You can copy and paste va ...

What is the best practice for adding a DOM element at a precise location within an ng-repeat loop?

I am currently working on developing a podcast player application using AngularJS. At this point, I have successfully created a list of available podcasts that can be played, utilizing ng-repeat. The code for the list is shown below: <ul ng-controller ...

What's the reasoning behind incorporating a superscript esf in the Zap Chance typeface?

I'm working with a sample HTML file that includes the Zap Chance font. <!DOCTYPE html> <html> <head> <style> @font-face { font-family: myFirstFont; src: ...

Clear the styling of a bootstrap table to remove any highlighting

Check out an example with a table here I am looking to eliminate the highlighting from a row when it is clicked on. Currently, when hovering over a row, the background becomes grey. I want the ability to remove the grey background by clicking on the row ...

css clip-path hover effect restricted to specific shape

In the codepen I created, there are two greyscaled shapes. Currently, it's only possible to hover over one of them, as the original size is a box that overlaps both images. Is there a way to detect the shape being hovered over? Z-index hasn't pro ...

Adding CSS and JavaScript files to HTML files within a Spring MVC 4 application

I'm encountering issues when trying to import my CSS files using spring 4 Initially, I attempted the following in index.html: <link href="../../resources/css/bootstrap.min.css" rel="stylesheet"> Although Eclipse did not detect any errors, th ...

The screen size dominates all the other specifications

I've been attempting to adjust the category images based on screen size, but it seems that only the first specified width is being applied. It appears that subsequent rows of code are being overridden by the initial max-width setting (769px) on this w ...

Unable to transform dynamically loaded text area into CKEditor

Executing the get_content function upon a link click. function get_content(n) { var hr=new XMLHttpRequest(); var url="./updatecontent.php"; var vars="id="+n; hr.open("POST",url,true); hr.setRequestHeader("Content-type","application/x-w ...