Semantic-UI Message Compact Variation

Semantic UI is an open-source framework that uses CSS and jQuery to build great user interfaces. It is the same as a bootstrap for use and has great different elements to use to make your website look more amazing. It uses a class to add CSS to the elements. Semantic-UI has really cool headers that can be used with Text, Icons, and many more.

A message shows information related to some content. Semantic-UI has a really cool message element that can be used with Text, Icons, and many more. Semantic UI has different types of message variations such as size variations, warning variations, compact variations, and colored variations messages. In this article, we will learn about the compact variation of messages in Semantic UI.

The compact message in semantic UI can only take up the width of its content. It does not take the width of its parent container like a normal message element. To convert a normal message element into a compact message in semantic UI, we use the compact class along with the ui and message classes.

Semantic UI message compact variation class:

• compact: The compact class makes the message element take up only the width of its contents.

Syntax:

<div class="ui compact message">
content....
</div>

Example 1: This example demonstrates the difference between a normal and compact message element in semantic UI.

Output:

Example 2: This example demonstrates the compact message element with different colors in semantic UI.

Output:

Reference: https://semantic-ui.com/collections/message.html#compact