Is there a Semantic UI equivalent to Bootstrap's .container class?

Question

Having used Twitter Bootstrap for some time and always wanting more in the way of admin UI features, I've decided to give Semantic UI a try. The Semantic docs are a lot less concise than Bootstrap's, but each individual tool is fairly easy to implement. However, I've begun creating a basic UI to try out Semantic UI and I'm having trouble figuring out some of the basic stuff, like what to use as a suitable replacement for Bootstrap's .container, etc.

Guthrie

Answer 1

Semantic UI author here. I will be adding a generic container class in next minor release.

Aspen

Answer 2

semantic-ui works differently while expecting about the grid system and the class ui page grid make the similar approach like bootstrap. You can see this example template too http://ehkoo.github.io/semantic-ui-examples/jumbotron where in the template you can change the classes to test. When class ui grid is applied, it takes the full-width and with ui page grid it works for 992px width with padding-right and padding-left. you can find the media queries for screen min-width 992px :

@media only screen and (min-width: 992px) {
    .ui.page.grid {
        padding: 0 8%;
    }
}

Besides, there is an issue you can follow. Link: https://github.com/Semantic-Org/Semantic-UI/issues/175

And You can follow the documentation page: http://semantic-ui.com/collections/grid.html

I don't know if it's helpful for you or not.

Flouncing

Answer 3

Yes, You can do the following:

    <div class='ui centered grid'>
         <div class='fifteen wide column'>
          <!-- Below you can write your code -->
           <div class='ui menu'>
           <a class='active item'>Editorials</a>
           <a class='item'>Reviews</a>
           <a class='item'>Upcoming Events</a>
          </div>
         <!-- your code ends here -->
       </div>
    </div>

Boutis