In these exercises you will learn how to make use of pre-built HTML and CSS templates for UI interface elements such as buttons and forms.
Your task is to add Bootstrap to each index.html file and following the designs from the provided figma file create beautiful components by using Bootstrap templates.
Bootstrap is a powerful toolkit - a collection of HTML, CSS, and JavaScript tools for creating and building web pages and web applications. It's open-source and free to use.
There are several ways of how to add Bootstrap, but for the purposes of this task, just follow the steps below:
- Add this link element between
<head></head>tags in yourindex.htmlfile
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous" />
- Add this script at the end inside
<body></body>tags in yourindex.htmlfile
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous" ></script>
All you have to do is find the desired elements in the sidebar of Docs (check out Components) and copy paste them in your project. If some elements need additional styling, do that in styles.css files.
- Create a profile in figma.com.
- Download the provided
.figfiles fromAssetsdirectory.
-
Add the downloaded
.figfiles to yourDraftsin the figma homepage. -
Open the files from
Drafts.
