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.