Reputation: 11
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
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
Reputation: 389
Nothing else, You are just forget to give list-group
class to first ul
.
Upvotes: 1