Versions Compared

Old Version 4

changes.mady.by.user Melissa Chavira

Saved on

compared with

New Version 5

changes.mady.by.user Melissa Chavira

Saved on

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

...

  1. Review our code snippet library and documentation to select a snippet or code reference you would like to use.

  2. Snippets are organized by components and include a preview and an HTML tab.

    Image RemovedImage Added

  3. When you identify a code snippet you’d like to use, click on the HTML tab.

  4. The code view will load and include all of the relevant HTML and CSS classes included for you. In the top, right hand side of the tab view click copy.

    Image RemovedImage Added

  5. This will copy the entire code snippet to your computer clipboard. You can confirm that the code snippet was copied when the copy button transformed to “copied!”

    Image RemovedImage Added

  6. In Cascade CMS, click on the source code icon where you would like to include the snippet.

  7. Using CTRL+V to past your code snippet into the source code window (or right-click and select Paste.)

  8. Click Ok.

  9. Update the content as necessary. Double-click on the element you wish to change and make edits to it using Cascade’s link tools, image placement tools, or text editor.

...

Expand
titleHow do I add more space or padding between elements?

NMSU templates include a wide range of shorthand responsive margin and padding utility classes to modify an element's appearance. You can assign margin or padding values to an HTML element using shorthand CSS classes.

Info

Review thelist of shorthand classes in our documentation and on the Bootstrap 4 website.

How to add more space

or padding

between elements

  1. Click on the source code icon from the WYSIWYG editor.

  2. Locate the HTML element you’d like to add to or edit.

  3. Using the notation guide, add the appropriate notation in the CSS class. For example in the code class="mt-4" you are adding a margin of 1.4rem to the top of the element.

  4. Click ok.

Examples of using padding and margin classes

HTML CODE: <h3 class="mt-4 bold">Heading 3</h3>

On Screen: In the preview below, the Heading 3 text includes a larger margin at the top to add more space between the paragraphs. The <h3> element includes two classes. One class controls the margin and the other add the bold text style.

HTML CODE: <a class="ml-4 btn btn-outline-primary" href="#">Outline Button</a>

On Screen: In the preview below, the link element includes a larger margin to the left. The <a> element includes three classes. One class controls the margin and the other two add control the button styles.

In the WYSIWYG Editor

Note the presentation in the WYSIWYG editor for both examples does not include styling presented on screen.

Expand
titleHow do I make a card height equal in a row?a row of cards all the same height?

Cards provide a flexible and extensible content container with multiple variants and options. However you may find that the height of the columns are dictated by the amount of content you have placed in side of them. When you have cards that should appear side by side, you'll often want them to be of equal height (matching the height of the tallest).

Image Added

There is a solution that helps to keep columns size the same, no matter how much content may be placed inside.

Expand
titleI want to resize an HTML element. What are my options?

It is used to size the element. By using sizing utility, you can easily make an element as wide or as tall (relative to its parent)

How do I make a card height equal in a row?

...