I know this question has been asked a lot of time but, since I am new to HTML, I still need some guidance.
Based on the code below, how can I reduce the spacing in between the links in each column?
Code:
a {
color: white;
}
.footer-background {
padding-top: 20px;
padding-bottom: 20px;
background-color: #1c2a48;
}
.logo,
.nav {
margin-bottom: 10px;
}
.nav-pills {
display: flex;
flex-direction: column;
justify-content: center;
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="footer-background container-fluid">
<div class="row">
<div class="col-xs-6 col-sm-4 center-block">
<ul class="nav nav-pills">
<li><a href="https://www.b.org/opengovernment/prr/Pages/default.aspx">Public Records Request</a></li>
<li><a href="https://www.b.org/AgenciesAndServices/Pages/Default.aspx">Contact Us</a></li>
<li><a href="https://www.b.org/ReportAComplaint/Pages/Default.aspx">Report a Complaint</a></li>
<li><a href="https://www.b.org/Terms/Pages/Default.aspx">Terms of Use</a></li>
<li><a href="https://www.b.org/Terms/Pages/Default.aspxx">Accessiblity Statement</a></li>
<li><a href="https://lp.constantcontactpages.com/su/ErJFVZz/BrowardLife">Subscribe</a></li>
</ul>
</div>
<div class="col-xs-6 col-sm-4 center-block">
<ul class="nav nav-pills">
<li><a href="https://b.granicus.com/ViewPublisher.php?view_id=15">Watch Meetings</a></li>
<li><a href="https://www.b.org/Pages/Welcome.aspx">Copyrights 2022, Government</a></li>
</ul>
</div>
<div class="col-xs-12 col-sm-4">
<div class="text-white" style="padding-top: 3rem; text-align: center;">
<ul class="nav nav-pills">
</ul>
</div>
</div>
</div>
</div>
3
Answers
if you using flexbox you can just use
gap
Each column has a
padding
of15px
left and right. You could reduce it e.g. to8px
to reduce the spacing.Here is the edit code, to see what i mean.
Hint: Maybe there is a css-utility-class for this within bootstrap.
For the mentioned case in the comments, you need to change the
padding
of each<a href="..." />
.In the Dev Tools (e.g. the google chrome ones) you can the that there is already a selector (
.nav>li>a
) setting a padding of each<a href="..." />
. So to overwrite the padding of this selector we need a higher specificity. So i added.external-link
to each<a href="..." />
and added following selector.The line-height is set to "line-height: 1.42857143;", which can be reset to "1" for your nav-pills class. Otherwise the classes are being controlled by your imported "bootstrap.css" stylesheet.