垂直对齐项目列表

Question

I have a screenshot as shown below which I have to replicate in wordpress.

At this moment, I am able to replicate the above logo but not the text at the left and right.

The code which I have used in order to replicate the B logo is:

<div class="footer-content">
<div class="row">
<div class="col-xs-12">[edsanimate_start entry_animation_type= "rotateIn" entry_delay= "0" entry_duration= "1" entry_timing= "ease-in-out" exit_animation_type= "" exit_delay= "" exit_duration= "" exit_timing= "" animation_repeat= "1" keep= "yes" animate_on= "scroll" scroll_offset= "1" custom_css_class= ""]<img class="aligncenter size-full wp-image-517 center-block" src="http://thebettersoftwarecompany.com/wp-content/uploads/2017/01/logo-footer.png" alt="" width="160" height="160" />[edsanimate_end]</div>

I am not sure how to make a fiddle in wordpress so decided to put the code.

Problem Statement:

What changes should I make in the above HTML code to replicate the content at the left( Home Our Story BPRO Media ) and right( Blog Careers Contact Us Customers )?

Answer 1

You're using bootstrap. Do 3 columns of 4 instead of 1 column of 12.

<div class="col-sm-4">[list-items]</div>
<div class="col-sm-4">[B Logo]</div>
<div class="col-sm-4">[list-items]</div>