Ashutosh Khandelwal
Ashutosh Khandelwal

Reputation: 11

Column width not equal

My bootstrap column width are not equal inspite of setting them equal Column width not equal. I set them using col-sm-6. Both are not equal one is smaller and one is larger. Please help if you know how to resolve this issue. I want them to work in both mobile and laptop. Thanks in advance.

    <div class="container"><div class="row">
<div class="col-sm-6" >
<h1 id="h1Codespeedy">Codespeedy Intern</h1>
<ul>
    <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">Depoying Keras model in WebAPP using Tensorflow Js</button></li> 
         <ul id="demo3"  class="collapse">
         <a href="https://ashu131998.github.io/Webapp/Webapp/WebApp.html"target = "_blank"><li>WebApp</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 Discription</dd></a> 
        <a href="https://github.com/ashu131998/Nueral-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>  

Upvotes: 1

Views: 64

Answers (2)

Avinash Dalvi
Avinash Dalvi

Reputation: 9291

You are missing list-group first ul element. This is reason all column width are not same width.

Event if you use same class for width as it in percentage so it will change its outer space according inner element how its occupied using padding or width or height css style. if it was fixed width its not impacted whether inside element how its occupied.

<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">Depoying Keras model in WebAPP using Tensorflow Js</button></li>
        <ul id="demo3" class="collapse">
          <a href="https://ashu131998.github.io/Webapp/Webapp/WebApp.html" target="_blank">
            <li>WebApp</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 Discription</dd>
          </a>
          <a href="https://github.com/ashu131998/Nueral-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>

Upvotes: 1

qɐʇǝɥɐW
qɐʇǝɥɐW

Reputation: 389

Nothing else, You are just forget to give list-group class to first ul.

Upvotes: 1

Related Questions