Buzut Buzut - 1 month ago 14
HTML Question

Semantic UI floats

Semantic UI newbie here, I couldn't find anywhere in the docs how (if it's possible) to float a simple element without having it to be something else (like a button or a segment).

For instance, I have at the bottom of a page a step navigation/counter that is written like so:

<div class="row three column">
<div class="column">
<p class="ui left floated compact basic segment stepper">Step 2 of 3</p>
<a class="ui right floated compact basic segment stepper">Go back</a>

Beside the fact that having to place a
before the floating elements looks kinda weird to me, isn't it possible to just add classes like
left floated
and have the thing foat? Like we'd with bootstrap with
for instance…

If I understand well, segment is for grouping related contents (corresponding semantically to the HTML5
tag). Therefore, it seems a bit overkill – if not semantically wrong – to use
s in such situations.


Currently there are no global utilities like pull-left in bootstrap. Whenever right float , for example, is defined in the SUI code, it is always in association with an element such as button, segment, list, etc.

You can simply define your own global utility, without need to "overkill" with any SUI elements:

div [class*="left floated"] {
  float: left;
  margin-left: 0.25em;

div [class*="right floated"] {
  float: right;
   margin-right: 0.25em;

Though for your situation, an icon button might be semantically suited for both the elements.