Boost your web design skills with Bootstrap

Bootstrap Cheat Sheet

Boost your web design skills

[{"selector":"#anim-0eca5e25-52c2-4e49-adcf-813951ff97cd","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-56753430-1289-4a4b-a62f-60fc2179a872","keyframes":{"transform":["translate3d(-105.50725%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-f5b3ab3e-7bd1-49c3-b507-aec7528a3b55","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-f8c4ad7e-711a-4fee-bf99-1fd5976c6d63","keyframes":{"transform":["translate3d(-106.30137%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] This quick reference guide packs commonly used classes, components, and syntax with examples into one place for your convenience. Click here

Say hello to Bootstrap!

[{"selector":"#anim-e239bea3-7f8f-4756-9fcd-fbb47096c404","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-2eff49b1-6dff-4021-977a-774d28dfe7f1","keyframes":{"transform":["translate3d(-106.66666%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-852e75eb-9605-48d9-999c-5ff53d9f18af","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-951f7d92-8ae7-4f8a-91fc-a4f81560be64","keyframes":{"transform":["translate3d(-106.30137%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] A popular front-end development framework to create responsive websites. It includes pre-built CSS, JavaScript, and HTML templates that simplify web design. Click here

Become a Bootstrap Pro with this Cheat Sheet

[{"selector":"#anim-532edd7d-e333-41d6-a306-c4e930ef8da5","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-ad1359c9-701a-427f-a248-deca7fc68616","keyframes":{"transform":["translate3d(-105.50725%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-9648349e-8793-4842-ac48-adbc38260d36","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-6e25f143-00c0-4a0f-9a84-bae24c2d65c3","keyframes":{"transform":["translate3d(-106.30137%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] From beginner basics to advanced concepts, this cheat sheet has everything you need to master Bootstrap. Get ready to become a Bootstrap pro & create stunning designs in no time! Click here

Carousel- Bootstrap

[{"selector":"#anim-dbe1267d-7904-42d5-a057-500d5d75f1a6","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-9cd8efd7-1ab7-4514-90cd-19ac3ccb6a61","keyframes":{"transform":["translate3d(-105.75343%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-400d0b79-bdfe-491b-ba6e-09b049d5f73d","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-befa2ec8-ec37-46a1-bd31-c515a844fe9f","keyframes":{"transform":["translate3d(-104.63769%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] 1. Carousel slide adds animation & CSS transition effects. <div class="carousel slide" data-ride="carousel"> 2. Carousel-caption adds caption for individual slides <div class="carousel-caption"> Click here

Cards in Bootstrap

[{"selector":"#anim-3e8b07aa-7bef-4bd1-8637-41302cd9975e","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-ca5c6bb7-48c0-483c-995d-a380522da5b3","keyframes":{"transform":["translate3d(-106.66666%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-663b9679-2ee4-415c-bdd7-4f6dbd0bcddd","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-51d12938-52c5-40e4-afb3-9e4002cad89c","keyframes":{"transform":["translate3d(-105.75343%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] 1. Card-body holds the content of the card. <div class="card-body">InterviewBit</div> 2. Card-link is used for adding a link to a card. <a href="#!" class="card-link">InterviewBit</a> Click here

Tables in Bootstrap

[{"selector":"#anim-1f5c73ab-8f85-492a-9d00-b27e8b86fb27","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-31977e41-3caf-46ae-99a8-cdf305cab6f2","keyframes":{"transform":["translate3d(-105.50725%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-73c8e646-ca61-4288-ab37-46f88fd32772","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-8b345b86-a220-4bfc-a2df-ace2861a55ac","keyframes":{"transform":["translate3d(-106.30137%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] 1. Table-sm creates a table with a small size. <table class="table table-sm"> 2. Table-info adds blue background to the table. <tr class="table-info"> Click here

Navigation and Navbar

[{"selector":"#anim-bd3fa716-388d-4080-a6cf-dd10281d2418","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-56dda886-8d5c-4c42-bbed-831d9e52c7c7","keyframes":{"transform":["translate3d(-105.50725%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-4e32061a-ee6a-4c58-be6b-70fbc1f99f97","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-d63c24f8-f80a-4ca8-8ccb-dac1c52012d6","keyframes":{"transform":["translate3d(-106.30137%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] 1. Navbar-brand highlights a brand, project, logo of page. <a class="navbar-brand" href="#">InterviewBit</a> 2. Navbar fixed-top fixes navbar attop. <nav class="navbar fixed-top navbar-dark"> Click here

Dive into the world of Bootstrap & improve your web design skills.

[{"selector":"#anim-9eaaf1ce-afa4-4ac8-b035-3d81405d3857","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-ab17c303-a248-4920-9c54-cf7540af2630","keyframes":{"transform":["translate3d(0px, -239.91578%, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] SWIPE UP

Don't miss out on the chance to upskill yourself with IntervewBit's engaging web stories.

[{"selector":"#anim-2a44f8fc-1d26-45a2-ab1d-62c5e724fe33 [data-leaf-element=\"true\"]","keyframes":{"transform":["translate3d(7.812499744007886%, 0, 0) translate(25%, 0%) scale(1.5)","translate3d(0%, 0, 0) translate(0%, 0%) scale(1)"]},"delay":0,"duration":2000,"fill":"forwards"}] [{"selector":"#anim-54cce45e-2e46-4cdf-aa9a-f72f656d9357","keyframes":{"opacity":[0,1]},"delay":0,"duration":1000,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-d093db38-0ecb-4696-a260-9bb5225de11a","keyframes":{"transform":["translate3d(0px, -211.49618%, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":1000,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-c7e6e2a1-96af-4623-b65a-9b73ff0f210d","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-8c735bc4-f68a-4952-8f34-838e1523551a","keyframes":{"transform":["translate3d(0px, -621.00265%, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] Step Up Your Game with InterviewBit Web Stories SWIPE UP

Bootstrap Cheat Sheet

A Quick Guide to Responsive Web Design