Using Semantic UI

How to use Semantic UI in your project

You can either copy the files to your project in your .css files or .js files similar to Bootstrap. A simpler way is to download the Semantic file from and include that file in your project folder.

Making a Menu Bar

A menu bar is great for navigating your website, you can easily jump to different pages for example a home page or a login page. Creating a menu bar with semantic is quite simple, I will show you a code sample.

Using the class ui stackable inverted menu the background color will be black and makes it mobile friendly.

Making a Form

Forms are great for obtaining information from a user to send to the database. For example, if you have a new user and they would like to sign up for your website you could ask them for their first and last name, a username, and password.


There are many neat things you can do with semantic UI which I will show in another post. But even with just the two examples I showed you can customize them a lot from color to how they work with loading on your website. If you go to semantic website, you can see a lot of what they have to offer.



Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store