In the feed page I need to hide the dotted line in the mobile screens. So here you can see how its can be done in Bootstrap.
d-none d-md-flex: shows only on md and up (desktop/tablet)d-block d-md-none: shows only on mobiletext-nowrap: prevents text from wrapping
<div class="mb-3">
<!-- Desktop layout -->
<div class="d-none d-md-flex align-items-center">
<a href="{{ .Permalink }}" class="text-decoration-none fw-medium me-2 text-nowrap">
Sample heading
</a>
<div class="flex-grow-1 border-bottom dotted-line mx-2"></div>
<p class="text-muted small text-nowrap mb-0">Date</p>
</div>
<!-- Mobile layout -->
<div class="d-block d-md-none">
<a href="{{ .Permalink }}" class="text-decoration-none fw-medium d-block mb-1">
Sample heading
</a>
<p class="text-muted small mb-0">Date</p>
</div>
</div>
What are your thoughts on this post?
I’d love to hear from you! Click this link to email me—I reply to every message!
Also use the share button below if you liked this post. It makes me smile, when I see it.