Venutius

This is a plugin aimed at BP users that do not use a theme specifically built for BP, for those that have the basic list provided by BP and want to make this look a lot more professional. It’s also aimed at those of you who know how to use CSS to turn this into a grid but find the results disappointing in that this technique fails to provide a uniform grid due to the squares being of inconsistent length.
What’s required is some nifty JavaScript that makes sure the grid squares are uniform that works with either Legacy or Nouveau themes – That’s where BP Directory Views comes in.
This is a pretty simple plugin that extends the work done by Hugo – hnla with his Style Modules work. This original code has been extended so that it resizes the grid tiles to uniform length every time the directory view changes.

BP Directory Views

Creates a uniform grid view for the Groups and Members directory pages.

hardlyneutral

This plugin is built to display BuddyPress groups on the new user registration page. Groups can be displayed as:
<ul>
<li>a list of checkboxes</li>
<li>a list of checkboxes in a scrollable container</li>
<li>a list of radio buttons</li>
</ul>
New users will automatically join any of the groups selected during the registration process.
Options are available in the admin area to configure the title of the groups list on the registration page, the 
description of the groups list, whether private groups are visible to new users, the order in which groups are 
displayed, and how many groups will be visible.
<h3>Custom Styles</h3>
This plugin includes specific CSS for changing the way content is displayed. The default CSS will place the group after the “Profile Details” section and before the “Complete Sign Up” button on the register page. You can view <code>includes/styles.css</code> in this plugin directory to see how to target each element.
Here is a list of the current selectors used in <code>includes/styles.css</code>.
Groups section:
<pre><code>#registration-groups-section {
 float: right;
 width: 48%;
}
</code></pre>
Checkboxes:
<pre><code>.reg_groups_group_checkbox {
 margin: 0 5px 0 0;
}
</code></pre>
Form labels:
<pre><code>#buddypress .standard-form label.reg_groups_group_label,
.reg_groups_group_label {
 display: inline;
 font-weight: normal;
}
</code></pre>
Groups section – responsive:
<pre><code>@media only screen and (max-width: 480px) {
 #registration-groups-section {
 float: none;
 width: 100%;
 }
}
</code></pre>
List items:
<pre><code>.reg_groups_item {
 list-style: none;
}
</code></pre>
No groups message:
<pre><code>.reg_groups_none {
 font-style: italic;
 color: gray;
}
</code></pre>
Multiselect:
<pre><code>.reg_groups_list_multiselect {
 height: 8em;
 border: 1px solid #ccc;
 background: #fafafa;
 padding: 6px;
 overflow: auto;
}
</code></pre>

BuddyPress Registration Groups

Allows a new BuddyPress user to select groups to join during the registration process.

BP Directory Views vs BuddyPress Registration Groups