BuddyPress.org

In [your-bp-theme-dir]/members/single/profile/profile-loop.php, you’ll see a profile loop beginning while ( bp_profile_fields() ) : bp_the_profile_field();. Inside of that profile loop you will be able to use various profile functions to test values. For instance,

<?php if ( bp_the_profile_field_name() == 'color' ) {

if ( bp_the_profile_field_value() == 'red' )

echo '<img src="redbadge.png" />';

if ( bp_the_profile_field_value() == 'green'

echo '<img src="greenbadge.png" />';

// etc.

}

?>

I have not tested this but it should work fine with some tweaking.

Your issue with appearance is a CSS thing, most likely that the ul elements are set to display: inline. Try setting them to display: block.