I’m trying to display bullet points on a screen with bootstrap and of course on my laptop the sizing is perfect, but when I try to display this onto a large TV screen or use the responsive tool in the browser, the fonts are not automatically increasing in size as I thought they would using bootstrap’s Display 1 where they specifically note that the font should resize automatically.
Is there a way to do this using only bootstrap or is custom CSS required to auto-size the font as different screen breakpoints are met?
This is what I’ve tried:
`<body>
<div class="container-fluid vh-100">
<div class="row">
<div class="col justify-content-start mx-3">
{% for point in bullet_points %}
<div class="row mb-3">
<h1 class="display-1 fw-bold">
{{ point }}
</h1>
</div>
{% endfor %}
</div>
<div class="col w-50 vh-100">
<div class="d-flex justify-content-end vh-100">
<img src="{% static 'images/background.png' %}" clas="img-fluid">
</div>
</div>
</div>
</div>
<script src="{% static 'bootstrap/js/bootstrap.bundle.min.js' %}"></script>
`
Tyler Careless is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.