Custom fields in Joomla is introduced from 3.7 version. These can be added in your content items, contacts or users.

You can enable or disable custom fields from the options of the respective component. To enable creation of custom fields,

Options → Integration → Select Yes in "Enable Custom Fields" option.

Types of Custom Fields

There are 15 types of custom fields that can be added:

  1. Calendar
  2. Check boxes
  3. Color
  4. Editor
  5. Integer
  6. List (Dropdown)
  7. List of Images
  8. Media
  9. Radio
  10. SQL (Dropdown)
  11. Text
  12. Text Area
  13. URL
  14. User 
  15. User Groups List

You can disable any of the type in Plugins (Select Type: fields)

Options

You have many options to customize the display of these custom fields on your website. 

  • Show fields to specific users based on their access levels.
  • Show or hide the label of the field when it is displayed.
  • Where to display the field - after title, before content, after content or not to display at all.
  • You can add class attributes when the field is displayed.

There are some options for specific field type. You can set default options from the respective plugins.

Bootstrap makes it easy to style different types of forms with the simple HTML markup and extended classes. Bootstrap provides three types of form layouts:

  1. Vertical form (default)
  2. In-line form
  3. Horizontal form
<form role = "form">

 <div class = "form-group">
 <label for = "name">Name</label>
 <input type = "text" class = "form-control" id = "name" placeholder = "Enter Name">
 </div>
 
 <div class = "form-group">
 <label for = "inputfile">File input</label>
 <input type = "file" id = "inputfile">
 </div>
 
 <div class = "checkbox">
 <label><input type = "checkbox"> Check me out</label>
 </div>
 
 <button type = "submit" class = "btn btn-default">Submit</button>
</form>

Basic Form

To create a basic form, you need to do the following:

  1. Add a role form to the parent <form> element.
  2. Wrap labels and controls in a <div> with class .form-group. This is needed for optimum spacing.
  3. Add a class of .form-control to all textual <input>, <textarea> and <select> elements.

Inline Form

To create a form where all of the elements are inline, left aligned and labels are alongside, add the class .form-inline to the <form> tag.

Horizontal Form

To create horizontal form, add class .form-horizontal to the <form> element. Also, add class .control-label to all <label> elements.

Bootstrap provides three classes that can be used to apply some simple styles to the images.

.img-rounded

Adds border-radius:6px to give the image rounded corners

.img-circle

Makes the entire image round by adding border-radius:500px

.img-thumbnail

Adds a bit of padding and a gray border

Responsive Images

Responsive images automatically adjust to fit the size of the screen.

You can create responsive images by adding an .img-responsive class to the <img> tag. The .img-responsive class applies display: block; and max-width: 100%; and height: auto; to the image.

You can add button classes on <a>, <button>, or <input> elements. You need to add class .btn to make a link or element look like a button. Bootstrap provides many options to style buttons.

Contextual Colors and Styles

  • .btn-default
  • .btn-primary
  • .btn-success
  • .btn-info
  • .btn-warning
  • .btn-danger
  • .btn-link

Sizes

Bootstrap provides five button sizes.

  • .btn-lg
  • .btn-md
  • .btn-sm
  • .btn-xs
  • .btn-block

State (Active or Disabled)

A button can be set to an active (pressed) or a disabled (not clickable) state.

  • .active
  • .disabled