Using Bootstrap in KB articles: Buttons

Bootstrap allows elements such as buttons and alert sections to be added to knowledge base articles. The article source must be edited to insert the alert. Buttons can be used for logging into systems and for downloading files.

To place a button in an article:

  1. While editing or creating an article, press Enter to create a blank line in the place in the article where you want to place a button.
  2. Click the Source button.
    screenshot with Source button indicated, first button in toolbar
  3. Find the blank line you created in the article. The HTML for the blank line will look like this:
    <p>&nbsp;</p>
  4. Select “<p>&nbsp;</p>” so that it will be replaced.
  5. Select the code for the green login button or the code for the blue Download button.

    Log into [SYSTEM] button
    <p><a class="btn btn-success" target="_blank" href="https://help.uark.edu/"><span aria-hidden="true" aria-label="icon" contenteditable="false" role="region" tabindex="-1"><span class="fa fa-lg fa-arrow-circle-o-right"></span></span> Log into [SYSTEM]</a></p>
     

    Log into [SYSTEM]

    Download [SOFTWARE] button
    <p><a class="btn btn-info" href="https://help.uark.edu/"><span aria-hidden="true" aria-label="icon" contenteditable="false" role="region" tabindex="-1"><span class="fa fa-lg fa-arrow-circle-o-down"></span></span>Download [SOFTWARE]</a></p>
     

    6. Download [SOFTWARE]

  6. Paste the code into the article source using ctrl/v or right-click, Paste.
  7. Replace:
    https://help.uark.edu/
    in the pasted content with the URL (address) of the page or file that should be accessed when the button is clicked.
    Note: Make sure to keep the quotation marks around the URL.  
    Note: Make sure to include http:// or https:// at the beginning of the URL. (Some URLs could also begin with file://)
    Note: Button text can also be edited while in the source.
    Note: The Login link will open in a new tab or window; to prevent this, remove:
    target="_blank"
  8. Click the Source button to exit source.
  9. Edit the button text.
    1. Click into the button text; the cursor will be placed at the beginning, before the arrow.
    2. Use arrow keys to move the cursor to the end of the text.
    3. Backspace over [SYSTEM] or [SOFTWARE] and type the appropriate text.

Note: Button text can also be edited in the source.

Bootstrap Buttons

TDX: Bootstrap CSS/JavaScript Framework

Print Article