semantic ui how to offset

Question

How can you offset columns in Semantic ui like you can in Bootstrap?

eg- in bootstrap a column with class "col-sm-5 col-sm-offset-2" is 5 column wide and skipping the first 2 column of the page.

score 12 · Accepted Answer · answered Jul 25 '16 at 11:44

12

As offsets are not supported in Semantic UI's grid the only way I could think of working around this limitation is to insert an empty column where you need the offset:

<div class="one wide column"></div>

answered Jul 25 '16 at 11:44

Space

2,022
1
19
29

1

Thanks Ben. This way you have to right a little extra code but I found semantic's gridding system works better than bootstrap's. – Sarthak Jul 25 '16 at 15:40

score 2 · Answer 2 · answered May 23 '16 at 11:50

2

There is no predefined classes available for Offsetting Grids in Semantic UI.

https://github.com/Semantic-Org/Semantic-UI/issues/863

answered May 23 '16 at 11:50

Rajdeep Gautam

642
9
15

score 0 · Answer 3 · answered Jul 28 '20 at 11:48

0

within a Form.Group with e.g. 2 columns you can use

<Form.Group>
    <Form.Field inline width={8}/>
    <Form.Field>...(element which should have offset)...</Form.Field>
</Form.Group>

answered Jul 28 '20 at 11:48

oFace

216
3
5

semantic ui how to offset

3 Answers3