[Resolved] Styling labels and custom fields in bootstrap layout

[Author]

Posts

[samuelH]

Hi,
I need to style individual labels and or custom fields placed in bootstrap layout. Could you help me out with some excample code to style individual labels and indvidual custom fields.

[Waqar]

Hi Samuel,

Thanks for asking! I'd be happy to help.

To check which CSS code is applying to different page elements, you can use Google Chrome's inspect element tool, as explained in this guide:
hidden link

To apply different styles to different labels or any HTML tag in a form, you can assign different IDs to them. For example:

<label id="special-label-green">Label 1</label>
......

<label id="special-label-red">Label 2</label>
......

<label id="special-label-yellow">Label 3</label>
......

These IDs will allow you to assign different styles to these labels. For example:

#special-label-green {
color: green;
}

#special-label-red {
color: red;
}

#special-label-yellow {
color: yellow;
}

Here are some useful tutorials on using ID and class selectors:
hidden link
hidden link

I hope this helps and please let me know if you need any further assistance around this.

regards,
Waqar

[samuelH]

Hi,
I also need some help regarding styling cred fields within bootstrap columns. I would like to make radiobuttons inline within one particular column, but leave them as block in another.

May I wrap the credfield in a div?

[Waqar]

Hi Samuel,

Thanks for writing back and your understanding is correct.

As can be seen in the screenshot you shared earlier, each field's shortcode is already wrapped inside a div container of its own, with class "form-group" (and some class for the Bootstrap's grid).

Screenshot: hidden link

You can include additional class names into these div tags to style them differently.

Tip: Bootstrap library offers built-in class "form-check-inline" to show inline checkboxes and radio elements:
hidden link

Example of a form field with inline radion buttons:

<div class="form-group form-check-inline">
	<label for="wpv-wpcf-field-slug">[wpml-string context="wpv-views"]Field[/wpml-string]</label>
	Field shortcode
</div>

regards,
Waqar

[samuelH]

My issue is resolved now. Thank you!