Place icons on a menu with bootstrap4

Navigation
3

I have a little problem, I'm trying to make a footer where I have some icons above and below I have a navbar, something like this:

And I did this: 

  <div class="footer">
    <div class="container">
        <div class="row ">
            <div class="col-12 in-line d-flex justify-content-center">
                    <i class="fab fa-twitter"></i>
                    <i class="fab fa-google-plus-g"></i>
                    <i class="fab fa-whatsapp"></i>
            </div>
        </div>
        <div class="row">
                    <div class="col-12 d-flex justify-content-center icons">
                            <nav class="navbar navbar-expand-lg navbar-sucess my-navbar">
                                <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
                                  <span class="navbar-toggler-icon"></span>
                                </button>
                                <div class="collapse navbar-collapse" id="navbarNav">
                                 <strong>
                                  <ul class="navbar-nav">
                                    <li class="nav-item active">
                                      <a class="nav-link" href="#"><p>Home</p></a>
                                    </li>
                                    <li class="nav-item">
                                      <a class="nav-link" href="#">My gifts</a>
                                    </li>
                                    <li class="nav-item">
                                      <a class="nav-link" href="#">Contact</a>
                                    </li>
                                    <li class="nav-item">
                                      <a class="nav-link" href="#">Register</a>
                                    </li>
                                    <li class="nav-item">
                                        <a class="nav-link" href="#">Login </a>
                                    </li>
                                  </ul>
                                  </strong>
                                </div>
                          </nav>
                          </div>
                    </div>
                    <div class="row">
                        <div class="col-12 ">
                    <p class="text-center">Lorem ipsum dolor sit amet.</p>
                </div>
            </div>

    </div>
</div>

but the problem is that I'm running a lot of intermediate space between each line break? What I need is that they are closer to each other as the example I gave.

I tried to do it without placing him and but I get one next to the other.

    
asked by Victor Escalona 18.03.2018 в 05:28
source

1 answer

2

Currently they are elements of the navigation bar that have padding and margins that make "a lot" of space. If you set these properties to 0, you have a much more "adjusted" result. It is already up to you how you want to modify said 0 by another value. 

.footer .navbar,
.footer .navbar-nav .nav-link {
  padding-bottom: 0;
  padding-top: 0;
}

.footer .nav-link p {
  margin-bottom: 0;
}
<link href="https://use.fontawesome.com/releases/v5.0.8/css/all.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
  <div class="footer">
    <div class="container">
        <div class="row ">
            <div class="col-12 in-line d-flex justify-content-center">
                    <i class="fab fa-twitter"></i>
                    <i class="fab fa-google-plus-g"></i>
                    <i class="fab fa-whatsapp"></i>
            </div>
        </div>
        <div class="row">
                    <div class="col-12 d-flex justify-content-center icons">
                            <nav class="navbar navbar-expand-sm navbar-sucess my-navbar">
                                <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
                                  <span class="navbar-toggler-icon"></span>
                                </button>
                                <div class="collapse navbar-collapse" id="navbarNav">
                                 <strong>
                                  <ul class="navbar-nav">
                                    <li class="nav-item active">
                                      <a class="nav-link" href="#"><p>Home</p></a>
                                    </li>
                                    <li class="nav-item">
                                      <a class="nav-link" href="#">My gifts</a>
                                    </li>
                                    <li class="nav-item">
                                      <a class="nav-link" href="#">Contact</a>
                                    </li>
                                    <li class="nav-item">
                                      <a class="nav-link" href="#">Register</a>
                                    </li>
                                    <li class="nav-item">
                                        <a class="nav-link" href="#">Login </a>
                                    </li>
                                  </ul>
                                  </strong>
                                </div>
                          </nav>
                          </div>
                    </div>
                    <div class="row">
                        <div class="col-12 ">
                    <p class="text-center">Lorem ipsum dolor sit amet.</p>
                </div>
            </div>

    </div>
</div>
    
answered by 18.03.2018 / 05:41
source
Error: ENOENT: no such file or directory, stat 'C: \ public \ index.html' How to apply style to an HTML table generated with PHP?