btn & btn-primary, etc.

These styles are intended for turning linked text or the appropriate Form inputs into virtual buttons.

| Creating Buttons | Examples |  Compare to: No Style, Insufficient Style |

Creating Buttons

The button styles should be applied to a link's HTML tag (i.e. <a … ) and not to the enclosing element such as a paragraph's HTML tag (i.e. <p …  ).

Please also note that the 'btn' style should not stand alone: it needs to also be combined with one or more modifier button styles, such as 'btn-primary' or 'btn-default' (which also should not be applied alone - see Compare section for examples of insufficiently applied styles).

For text:

• Highlight the span of text to which the link will be applied.
• Use the Insert/Edit Link tool to define the link.
• Before clicking Ok, open the CSS selector popout and pick the basic button style, 'btn'. 
• Click Ok to apply the link.
• Note: because the Link tool's CSS selector is a little tricky and can destroy previous style assignments, it is recommended that any additional style[s] needed be added after exiting the Link tool – by returning to the established link, placing your cursor within the linked text, and then selecting the other style(s) from the Formats: Custom Styles popout.
• Active, applied styles will show up in the popout listing with a marker next to them.
• Styles can also be removed:
  • place your cursor inside an existing link;
  • open the Formats: Custom Styles popout, and then
  • click on the style(s) with the marker already showing, to remove that style.
• If you are comfortable looking at the HTML, open that editor (Tools: Source Code) and review the style assignments for the links in question.

YES:
<p><a class="btn btn-primary" href="#"> . . . </a></p>

NO:
<p class="btn btn-primary"><a href="#"> . . . </a></p>

For Form items:

Applying these styles to form input tags will require editing the HTML (Tools: Source Code). The btn, btn-primary, etc. styles should be applied to the appropriate form input tags as part of a class attribute; e.g. as in the two input tags illustrated below:

<input class="btn btn-primary" id="submitsample" value=" Send Feedback " type="submit" />

<input class="btn btn-default" id="resetsample" value=" Reset " type="reset" />

Other examples

The following linked text shows btn together with other modifying button styles

Note: for demonstration purposes only, these links are generally simple same-page-links.

Using btn, btn-primary:
button: btn-primary

Using btn, btn-primary, btn-sm:
button: btn-primary, btn-sm

Using btn, btn-primary, btn-xs:
button: btn-primary, btn-xs

Using btn, btn-default, btn-xs:
button: btn-default, btn-xs

Using btn, btn-primary, btn-lg:
button: btn-primary, btn-lg

For an overview of Button styles used at UH, see: 
Web Marketing's Bootstrap pages.
(Button above uses: btn, btn-success)

The following show form "submit" type inputs:

respectively, with no style applied; with btn only applied; and with both btn and btn-primary applied.

Compare to:

This paragraph-formatted sentence has no specific style applied to it.

This paragraph-formatted sentence contains the following: linked text with no style applied.

The following words and phrases have insufficiently applied button styles:

Using 'btn' only

Using 'btn-default' only

Using 'btn-primary' only

Return to: Using the Styles Popout - Custom CSS Selector