Hello guys, this will be my first intro post on using bootstrap in building front-end applications. Bootstrap is technically the solution in framing your website building stuff with fewer codes. In summary,
Build responsive, mobile-first projects on the web with the world’s most popular front-end component library.
Bootstrap is an open-source toolkit for developing with HTML, CSS, and JS. Quickly prototype your ideas or build your entire app with our Sass variables and mixins, responsive grid system, extensive prebuilt components, and powerful plugins built on jQuery.
Building with bootstrap is absolutely free but there are costs for users that want to buy a complete theme. https://getbootstrap.com/
To build with bootstrap, you will mostly need the CDN which is clearly explained in the https://getbootstrap.com/docs/4.4/getting-started/introduction/ there are many cool things about bootstrap. There are ready-made UIs component that is meant to fasten UI designs. I will be pasting the starter template here:
<html lang="en">
<head>
(html comment removed: Required meta tags )
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
(html comment removed: Bootstrap CSS )
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<title>Hello, world!</title>
</head>
<body>
<h1>Hello, world!</h1>
(html comment removed: Optional JavaScript )
(html comment removed: jQuery first, then Popper.js, then Bootstrap JS )
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
</body>
</html>
This is all you mostly need to start building your UI. But you can as well download Bootstrap to get the compiled CSS and JavaScript, and include in your code with npm or other package managers.
This post is just to get your mind ready for the coming themes I will be building and I will be sharing the codes on Codepen for all to see. Also, before then I will talk about the wonderful classes in bootstrap which would reduce the styling we will be doing on our CSS file.
I will start from Alerts, Forms, Navbars, Displays, Badges, Form input group, Pagination, Flexbox, Breadcrumbs, Custom forms, Popover, Misc, Buttons, Grid, Progress, Positioning, Button group, Images, Scrollspy, Sizing, Button Modifiers, Jumbotron, Spinner, Spacing, Cards, List group, Tables, Texts, Carousel, Media Objects, Toasts, Collapse, Modal, Tooltips, Dropdowns, Navs, Typography, Borders, Colors, and more.
Stay around here as I start building some nice UI designed and how to use the classes effectively.