I have searched for solutions to this issue but none of them on this forum have been helpful. Hopefully, someone here can offer some assistance. I am facing a problem with displaying 4 columns of data in one row:
Here is the code snippet causing the layout issue:
<hr class="mb-4">
<div>
<h3>{{ player.full_name }}</h3>
<h4> {{ player.position }}</h4>
<h5> {{ player.team }}</h5>
</div>
<hr class="mb-4">
<div class="row">
<div class="col-xs-3 col-sm-3">
<div class="text-center font-weight-bold">
Form
</div>
<div class="text-center ">
{{ player.form }}
</div>
</div>
<!-- more content -->
The problem arises when viewing this on smaller screens where the columns do not remain in one row as intended. Here's what it looks like:
No matter what changes I make, I cannot seem to resolve this issue. I want all columns to be displayed in the same row even on smaller screens. Any help would be greatly appreciated.
Edit The root cause of the problem seems to be in the header section of my page.
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- more head content -->
</head>
It appears that the issue arises from using Bootstrap 4 instead of Bootstrap 3 as seen in the example below. Is this behavior intentional?