1

I have a small issue. I've added a bottom navbar with 3 social icons and a text to present what are these icons. Screenshot

I would like to put this text really at the right, or left, but not like this. It does the same thing if I do in the other side.

Like that the icons would be really at the middle.

<nav class="navbar navbar-default navbar-fixed-bottom" role="navigation">
    <div class="container">
        <p class="navbar-text navbar-right text-right">Suivre l'IUT de Lens</p>
        <div class="social">
            <ul>
                <li><a href="URL"><i class="fa fa-lg fa-facebook"></i></a></li>
                <li><a href="URL"><i class="fa fa-lg fa-twitter"></i></a></li>
                <li><a href="URL"><i class="fa fa-lg fa-google-plus"></i></a></li>
            </ul>
        </div>
    </div>
</nav>
Pier-Luc Gendreau
  • 13,553
  • 4
  • 58
  • 69
XeloOw
  • 27
  • 1
  • 6

1 Answers1

0

First, I should comment that I don't see any question marks in your "question." I would urge you to edit your question to be more clear for future readers' sake. In any case, I think I know what you are asking (the picture did help). The answer is, you need CSS!

There are more than one way to accomplish the spacing and placement you want. Here's one:

HTML (I removed some stuff that didn't seem to matter):

<nav>
<p style="width:100%"> 
    <div class="linktext">
        Suivre l'IUT de Lens
    </div>
    <div class="linkgroup">
        <a href="URL"><i class="link fa fa-lg fa-facebook"></i></a>
        <a href="URL"><i class="link fa fa-lg fa-twitter"></i></a>
        <a href="URL"><i class="link fa fa-lg fa-google-plus"></i></a>
    </div>
</p>

CSS:

.link {
    padding-right: 10px
}
.linkgroup{
    padding-right:20px;
    float:right;
}
.linktext {
    padding-right:20px;
    float: right;
}

So, you just need to define your properties in the CSS, then assign the relevant CSS class to your <div>/<p>/<whatever>

Here is a JSFiddle: http://jsfiddle.net/af8rpc99/

BryanOfEarth
  • 715
  • 11
  • 26