Partners links in footer

Dazzling
1

Hi everybody,

As I am currently at the end of the building part of my website, I am now totally involved in the footer part.
So the thing is, I want to add partners links in footer but that is not the problem, the problem is how partners links are displayed.

I made two divs, one for the first column of partners and a second one for the last column.
It could look like :

<div class=“partners1”>
Partners : <br />
Partner Y <br />
…
</div> ← end of div 1 →
<div class=“partners2”>
Partner X <br />
…
</div> ← end of div 2 →

I already made css class for these divs :

.partenaires1 {
margin-top: 10px;
margin-bottom: 2px;
margin-right: 10px;
float: none;
text-align: justify;
display: inline-block;
}
.partenaires2 {
margin-top: 10px;
margin-bottom: 2px;
float: none;
text-align: justify;
display: inline-block;
}

At the moment, with this kind of code partners are displayed in the footer, well, but under the Copyright text zone and I want it on same lines as this text…

To help you understanding me, in the footer.php, divs are written between :
<nav role=“navigation” class=“col-md-6”> and <?php dazzling_footer_links(); ?>

I hope someone could help me on this point because this is one of the last I have to work before release it. :slight_smile:

Thanks a lot to all the Colorlib community.

GuillaumeVZ

2

I really need to see this one on a live website to be able to help.

One thing that comes in mind is floats, that they could be used to get element in line or probably just have to arrange HTML because col-md-6 for both menu and footer copyright take the entire row by default.

Btw, your CSS code can be refactored like this:

.partenaires1,
.partenaires2 {
	margin-top: 10px;
	margin-bottom: 2px;
	float: none;
	text-align: justify;
	display: inline-block;
}
.partenaires1 {
	margin-right: 10px;
}

This is much shorter version and will be easier to edit if/when needed.

3

Huh I really want to show you how it works but it is actually worked in local with WampServer… Not ready for release yet.

Thanks for the tips with css classes !! :smiley:

Ok I will see this col-md-6 in the code, I searched before I think I could find it again !!

Thanks for your help, maybe if I send you a screenshot it will be better ?

4

Sorry for the double posts that are following, but what do you think about creating a class as .col-md-6 in the stylesheet.css ? Will it work ?

5

It is Bootstrap class and you can read more about it here. It is basicaly style like this

.col-md-6 {
width: 50%;
}

For tablets and larger devices but for mobile is takes 100% width.

To make 3 columns you can use .col-md-4 + .col-md-4 + .col-md-4 Just see Bootstrap website to understand how it works and maybe it is enough to tweak those columns.

6

Ok thanks I just saw for the Bootstrap class.
I was thinking about making 4 columns of two lines with an inline-block spec in css.

7

That’s easy by using Bootstrap and you will just need:

.col-md-3 + .col-md-3 + .col-md-3 + .col-md-3

And they will be already inline thanks to floats, so no other adjustment will be required.