Use the below semantic ui CDN links inside the <head> section of your HTML document to enable semantic ui in your web application. This is the latest version of semantic ui CDN.
<!--Paste these CDN links inside <head> section of your html--> <script src="https://code.jquery.com/jquery-3.1.1.min.js" crossorigin="anonymous"></script> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.css"> <script src="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.js"></script>
Semantic ui CDN example
Below is a working example of semantic ui with its CDN links. Remember that semantic ui will not be applied to your web page if jQuery is not imported into your HTML document. This is the reason that we have imported jQuery as well to make semantic ui work.
Click on the try it now button to see how it works:
Example:
<!DOCTYPE html>
<html>
<head>
<!--Links goes here-->
<script src="https://code.jquery.com/jquery-3.1.1.min.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.css">
<script src="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.js"></script>
</head>
<body>
<h2>This is a semantic ui heading.</h2>
<button class="ui red button">Semantic ui Button</button>
</body>
</html>
How to use Semantic ui CDN?
You just need to put all the three CDN links inside the <head> section your of HTML document. You can follow the above live example.
If you are getting any jQuery error, try placing jQuery CDN at the footer of your HTML document.
If any of your semantic ui elements is not loading properly, try putting the corresponding JavaScript code inside your JS file. It will solve the problem.
For example, if you are using semantic dropdown, it is necessary to place the below JavaScript code inside your JS file, otherwise, it won’t work properly.
$('.ui.dropdown')
.dropdown()
;
