Bootstrap is one of the most famous CSS framework in web development field. I used bootstrap to solve a challenge from front end mentor which is NFT card component and the solution is here. It was done by bootstrap, html5 and CSS3.
In this post I explain some of the bootstrap parts which I used to complete a simple project. The part that I will be explaining is bootstrap
- Card
- Flex
- Typography
- Border
Bootstrap Card: Bootstrap's cards provide a flexible and extensible content container with multiple variants and options. It include option for images, headers, footers and body. The parent element will have the "card" class. All the card option will be inside the element with the 'Card' class. The image will container card-img-top class. If there is any need of header or sub-header they they will be with Card-header and card-subheader. The text and title will be inside card-body class element. And for footer part they will be inside card-footer. For more info you can read Bootstrap Card.
Bootstrap Flex. The parent element which always container display flex in css, for bootstrap it will be d-flex class; easy way to remember is display flex. For flex direction the class will be flex-{direction}; the {direction} will be row, column, row-reverse, column-reverse etc. For justify content the class will be justify-content-{direction}; the direction will be center, start, end, between, around and so is same for align-items which class is align-items-{direction}. For more info you can read Boostrap Flex
Typography It is not complex like other component. You can align the text using text-align-{direction} where the direction will be center, start, justify etc. You can use `lead' class to make the certain text stand out from other text. Click here to read more
Border TO use the border you must always user border class. Then use border-{number} where number is any real number(1,2,3,4,5); for border size. rounded is to work on border-radius and rounded-circle to make any element circle.Here, you can learn more
Top comments (0)