How to make columns not dependent on each other with Bootstrap? - html

Question

There is a menu on the left with the effect of the accordion, on the right content is formed with a jinja. I need to do so that the height of the menu and the contents do not depend on each other.
as here: click
HTML:
<!-- menu -->
<div class="col-md-3">
<div class="wrapper">
<h1 class="header-tabs">Brands</h1>
<div class="tab">
{% for brand in brands %}
<button value="{{ brand.id }}">{{ brand.brand_name }
</button>
{% endfor %}
</div>
</div>
</div>
<!-- content -->
{% for sm in smartphones %}
<div class="col-md-2">
<img class="photo-phone" height="150" width="150" src="{{ sm.photo.url }}">
</div>
<div class="col-md-5">
<h3 class="header-phone">{{ sm.brand }} {{ sm.model }}</h3>
<p descr-phone>{{ sm.description }}</p>
</div>
<div class="col-md-2">
<h4 class="price">{{ sm.price }}$</h4>
<input type="button" class="button-buy" value="Buy">
</div>
{% endfor %}

Answer 1

The usual way to achieve that is by nesting. Nesting must always be done using row-column pairs i.e. never nest a column directly inside another column.
So, in your case, you'd first create a column with the class col-md-9 then put a .row inside that column and then put all your content columns inside that newly created row.
Note that inside this newly created row you now have a total of 12 column units to work with.
Click "run code snippet" below and expand to full page for testing:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="container">
<div class="row">
<!-- menu -->
<div class="col-md-3">
<div class="wrapper">
<h1 class="header-tabs">Brands:</h1>
<div class="tab">
<!-- {% for brand in brands %}-->
<button value="{{ brand.id }}">
<!-- {{ brand.brand_name }-->
Brand Name
</button>
<!-- {% endfor %}-->
</div>
</div>
</div>
<!-- content -->
<div class="col-md-9">
<div class="row">
<!-- {% for sm in smartphones %}-->
<div class="col-md-3 mb-3">
<!-- <img class="photo-phone" height="150" width="150" src="{{ sm.photo.url }}">-->
<img class="photo-phone img-fluid" src="https://placeimg.com/640/480/tech">
</div>
<div class="col-md-6">
<h3 class="header-phone">
<!-- {{ sm.brand }} {{ sm.model }}-->
Brand Model
</h3>
<p descr-phone>
<!-- {{ sm.description }}-->
Description
</p>
</div>
<div class="col-md-3 mb-3">
<h4 class="price">
<!-- {{ sm.price }}$-->
$1,000
</h4>
<input type="button" class="button-buy" value="Buy">
</div>
<div class="col-md-3 mb-3">
<!-- <img class="photo-phone" height="150" width="150" src="{{ sm.photo.url }}">-->
<img class="photo-phone img-fluid" src="https://placeimg.com/640/480/tech">
</div>
<div class="col-md-6">
<h3 class="header-phone">
<!-- {{ sm.brand }} {{ sm.model }}-->
Brand Model
</h3>
<p descr-phone>
<!-- {{ sm.description }}-->
Description
</p>
</div>
<div class="col-md-3 mb-3">
<h4 class="price">
<!-- {{ sm.price }}$-->
$1,000
</h4>
<input type="button" class="button-buy" value="Buy">
</div>
<div class="col-md-3 mb-3">
<!-- <img class="photo-phone" height="150" width="150" src="{{ sm.photo.url }}">-->
<img class="photo-phone img-fluid" src="https://placeimg.com/640/480/tech">
</div>
<div class="col-md-6">
<h3 class="header-phone">
<!-- {{ sm.brand }} {{ sm.model }}-->
Brand Model
</h3>
<p descr-phone>
<!-- {{ sm.description }}-->
Description
</p>
</div>
<div class="col-md-3 mb-3">
<h4 class="price">
<!-- {{ sm.price }}$-->
$1,000
</h4>
<input type="button" class="button-buy" value="Buy">
</div>
<!-- {% endfor %}-->
</div>
</div>
</div>
</div>
Also note the use of the spacing class mb-3 (margin-bottom 3 units).
The img-fluid class makes the images responsive.
Reference:
https://getbootstrap.com/docs/4.0/layout/grid/#nesting