{"id":10798,"date":"2024-10-18T19:40:19","date_gmt":"2024-10-18T19:40:19","guid":{"rendered":"https:\/\/lite14.net\/blog\/?p=10798"},"modified":"2024-10-18T19:40:19","modified_gmt":"2024-10-18T19:40:19","slug":"how-to-create-a-responsive-website-with-bootstrap","status":"publish","type":"post","link":"https:\/\/lite14.net\/blog\/2024\/10\/18\/how-to-create-a-responsive-website-with-bootstrap\/","title":{"rendered":"How to create a responsive website with Bootstrap"},"content":{"rendered":"<p>Bootstrap is a powerful front-end framework that enables developers to create responsive and mobile-first websites quickly. This guide will walk you through the entire process of setting up and developing a responsive website using Bootstrap, from initial setup to advanced features.<\/p>\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_76 counter-hierarchy ez-toc-counter ez-toc-grey ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">Table of Contents<\/p>\n<span class=\"ez-toc-title-toggle\"><a href=\"#\" class=\"ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle\" aria-label=\"Toggle Table of Content\"><span class=\"ez-toc-js-icon-con\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #999;color:#999\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #999;color:#999\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/lite14.net\/blog\/2024\/10\/18\/how-to-create-a-responsive-website-with-bootstrap\/#Table_of_Contents\" >Table of Contents<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/lite14.net\/blog\/2024\/10\/18\/how-to-create-a-responsive-website-with-bootstrap\/#1_Understanding_Bootstrap\" >1. Understanding Bootstrap<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/lite14.net\/blog\/2024\/10\/18\/how-to-create-a-responsive-website-with-bootstrap\/#What_is_Bootstrap\" >What is Bootstrap?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/lite14.net\/blog\/2024\/10\/18\/how-to-create-a-responsive-website-with-bootstrap\/#Key_Features\" >Key Features<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/lite14.net\/blog\/2024\/10\/18\/how-to-create-a-responsive-website-with-bootstrap\/#2_Setting_Up_Your_Development_Environment\" >2. Setting Up Your Development Environment<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/lite14.net\/blog\/2024\/10\/18\/how-to-create-a-responsive-website-with-bootstrap\/#Downloading_Bootstrap\" >Downloading Bootstrap<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/lite14.net\/blog\/2024\/10\/18\/how-to-create-a-responsive-website-with-bootstrap\/#Including_Bootstrap_in_Your_Project\" >Including Bootstrap in Your Project<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/lite14.net\/blog\/2024\/10\/18\/how-to-create-a-responsive-website-with-bootstrap\/#3_Bootstrap_Grid_System\" >3. Bootstrap Grid System<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-9\" href=\"https:\/\/lite14.net\/blog\/2024\/10\/18\/how-to-create-a-responsive-website-with-bootstrap\/#Understanding_the_Grid\" >Understanding the Grid<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-10\" href=\"https:\/\/lite14.net\/blog\/2024\/10\/18\/how-to-create-a-responsive-website-with-bootstrap\/#Creating_Responsive_Layouts\" >Creating Responsive Layouts<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-11\" href=\"https:\/\/lite14.net\/blog\/2024\/10\/18\/how-to-create-a-responsive-website-with-bootstrap\/#4_Bootstrap_Components\" >4. Bootstrap Components<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-12\" href=\"https:\/\/lite14.net\/blog\/2024\/10\/18\/how-to-create-a-responsive-website-with-bootstrap\/#Navigation_Bars\" >Navigation Bars<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-13\" href=\"https:\/\/lite14.net\/blog\/2024\/10\/18\/how-to-create-a-responsive-website-with-bootstrap\/#Buttons\" >Buttons<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-14\" href=\"https:\/\/lite14.net\/blog\/2024\/10\/18\/how-to-create-a-responsive-website-with-bootstrap\/#Cards\" >Cards<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-15\" href=\"https:\/\/lite14.net\/blog\/2024\/10\/18\/how-to-create-a-responsive-website-with-bootstrap\/#Forms\" >Forms<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-16\" href=\"https:\/\/lite14.net\/blog\/2024\/10\/18\/how-to-create-a-responsive-website-with-bootstrap\/#5_Customizing_Bootstrap\" >5. Customizing Bootstrap<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-17\" href=\"https:\/\/lite14.net\/blog\/2024\/10\/18\/how-to-create-a-responsive-website-with-bootstrap\/#Customizing_with_CSS\" >Customizing with CSS<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-18\" href=\"https:\/\/lite14.net\/blog\/2024\/10\/18\/how-to-create-a-responsive-website-with-bootstrap\/#Using_Bootstrap_Variables\" >Using Bootstrap Variables<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-19\" href=\"https:\/\/lite14.net\/blog\/2024\/10\/18\/how-to-create-a-responsive-website-with-bootstrap\/#Theming_with_Bootstrap\" >Theming with Bootstrap<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-20\" href=\"https:\/\/lite14.net\/blog\/2024\/10\/18\/how-to-create-a-responsive-website-with-bootstrap\/#6_Responsive_Images_and_Media\" >6. Responsive Images and Media<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-21\" href=\"https:\/\/lite14.net\/blog\/2024\/10\/18\/how-to-create-a-responsive-website-with-bootstrap\/#Implementing_Responsive_Images\" >Implementing Responsive Images<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-22\" href=\"https:\/\/lite14.net\/blog\/2024\/10\/18\/how-to-create-a-responsive-website-with-bootstrap\/#Using_Media_Objects\" >Using Media Objects<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-23\" href=\"https:\/\/lite14.net\/blog\/2024\/10\/18\/how-to-create-a-responsive-website-with-bootstrap\/#7_Utilizing_Bootstrap_Utilities\" >7. Utilizing Bootstrap Utilities<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-24\" href=\"https:\/\/lite14.net\/blog\/2024\/10\/18\/how-to-create-a-responsive-website-with-bootstrap\/#Spacing_Utilities\" >Spacing Utilities<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-25\" href=\"https:\/\/lite14.net\/blog\/2024\/10\/18\/how-to-create-a-responsive-website-with-bootstrap\/#Text_Utilities\" >Text Utilities<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-26\" href=\"https:\/\/lite14.net\/blog\/2024\/10\/18\/how-to-create-a-responsive-website-with-bootstrap\/#Display_Utilities\" >Display Utilities<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-27\" href=\"https:\/\/lite14.net\/blog\/2024\/10\/18\/how-to-create-a-responsive-website-with-bootstrap\/#8_Testing_and_Debugging\" >8. Testing and Debugging<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-28\" href=\"https:\/\/lite14.net\/blog\/2024\/10\/18\/how-to-create-a-responsive-website-with-bootstrap\/#Cross-Browser_Compatibility\" >Cross-Browser Compatibility<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-29\" href=\"https:\/\/lite14.net\/blog\/2024\/10\/18\/how-to-create-a-responsive-website-with-bootstrap\/#Mobile_Responsiveness\" >Mobile Responsiveness<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-30\" href=\"https:\/\/lite14.net\/blog\/2024\/10\/18\/how-to-create-a-responsive-website-with-bootstrap\/#9_Deploying_Your_Website\" >9. Deploying Your Website<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-31\" href=\"https:\/\/lite14.net\/blog\/2024\/10\/18\/how-to-create-a-responsive-website-with-bootstrap\/#Choosing_a_Hosting_Provider\" >Choosing a Hosting Provider<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-32\" href=\"https:\/\/lite14.net\/blog\/2024\/10\/18\/how-to-create-a-responsive-website-with-bootstrap\/#Uploading_Your_Files\" >Uploading Your Files<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-33\" href=\"https:\/\/lite14.net\/blog\/2024\/10\/18\/how-to-create-a-responsive-website-with-bootstrap\/#_Conclusion\" >\u00a0Conclusion<\/a><\/li><\/ul><\/nav><\/div>\n<h2><span class=\"ez-toc-section\" id=\"Table_of_Contents\"><\/span>Table of Contents<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<ol>\n<li><strong>Understanding Bootstrap<\/strong>\n<ul>\n<li>What is Bootstrap?<\/li>\n<li>Key Features<\/li>\n<\/ul>\n<\/li>\n<li><strong>Setting Up Your Development Environment<\/strong>\n<ul>\n<li>Downloading Bootstrap<\/li>\n<li>Including Bootstrap in Your Project<\/li>\n<\/ul>\n<\/li>\n<li><strong>Bootstrap Grid System<\/strong>\n<ul>\n<li>Understanding the Grid<\/li>\n<li>Creating Responsive Layouts<\/li>\n<\/ul>\n<\/li>\n<li><strong>Bootstrap Components<\/strong>\n<ul>\n<li>Navigation Bars<\/li>\n<li>Buttons<\/li>\n<li>Cards<\/li>\n<li>Forms<\/li>\n<\/ul>\n<\/li>\n<li><strong>Customizing Bootstrap<\/strong>\n<ul>\n<li>Customizing with CSS<\/li>\n<li>Using Bootstrap Variables<\/li>\n<li>Theming with Bootstrap<\/li>\n<\/ul>\n<\/li>\n<li><strong>Responsive Images and Media<\/strong>\n<ul>\n<li>Implementing Responsive Images<\/li>\n<li>Using Media Objects<\/li>\n<\/ul>\n<\/li>\n<li><strong>Utilizing Bootstrap Utilities<\/strong>\n<ul>\n<li>Spacing Utilities<\/li>\n<li>Text Utilities<\/li>\n<li>Display Utilities<\/li>\n<\/ul>\n<\/li>\n<li><strong>Testing and Debugging<\/strong>\n<ul>\n<li>Cross-Browser Compatibility<\/li>\n<li>Mobile Responsiveness<\/li>\n<\/ul>\n<\/li>\n<li><strong>Deploying Your Website<\/strong>\n<ul>\n<li>Choosing a Hosting Provider<\/li>\n<li>Uploading Your Files<\/li>\n<\/ul>\n<\/li>\n<li><strong>Conclusion<\/strong><\/li>\n<\/ol>\n<h2><span class=\"ez-toc-section\" id=\"1_Understanding_Bootstrap\"><\/span>1. Understanding Bootstrap<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<h3><span class=\"ez-toc-section\" id=\"What_is_Bootstrap\"><\/span>What is Bootstrap?<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Bootstrap is an open-source front-end framework developed by Twitter that facilitates web development by providing pre-designed components and a responsive grid system. It simplifies the process of creating layouts that work seamlessly across devices of all sizes.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"Key_Features\"><\/span>Key Features<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<ul>\n<li><strong>Responsive Grid System<\/strong>: Automatically adjusts your layout for various screen sizes.<\/li>\n<li><strong>Pre-designed Components<\/strong>: Offers buttons, modals, navigation bars, and more.<\/li>\n<li><strong>Customizable<\/strong>: Easily adjustable styles through Sass variables and built-in classes.<\/li>\n<li><strong>JavaScript Plugins<\/strong>: Enhanced interactivity through modals, tooltips, carousels, and more.<\/li>\n<\/ul>\n<h2><span class=\"ez-toc-section\" id=\"2_Setting_Up_Your_Development_Environment\"><\/span>2. Setting Up Your Development Environment<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<h3><span class=\"ez-toc-section\" id=\"Downloading_Bootstrap\"><\/span>Downloading Bootstrap<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>You can either download Bootstrap or include it from a CDN (Content Delivery Network). Here\u2019s how to do both:<\/p>\n<ul>\n<li><strong>Download<\/strong>: Visit <a target=\"_new\" rel=\"noopener\">getbootstrap.com<\/a> and download the compiled CSS and JS files.<\/li>\n<li><strong>CDN<\/strong>: Include the following links in your HTML <code>&lt;head&gt;<\/code> section:<\/li>\n<\/ul>\n<div class=\"contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative bg-token-sidebar-surface-primary dark:bg-gray-950\">\n<div class=\"flex items-center text-token-text-secondary px-4 py-2 text-xs font-sans justify-between rounded-t-md h-9 bg-token-sidebar-surface-primary dark:bg-token-main-surface-secondary\">html<\/div>\n<div class=\"sticky top-9 md:top-[5.75rem]\">\n<div class=\"absolute bottom-0 right-2 flex h-9 items-center\">\n<div class=\"flex items-center rounded bg-token-sidebar-surface-primary px-2 font-sans text-xs text-token-text-secondary dark:bg-token-main-surface-secondary\"><span class=\"\" data-state=\"closed\"><button class=\"flex gap-1 items-center py-1\">Copy code<\/button><\/span><\/div>\n<\/div>\n<\/div>\n<div class=\"overflow-y-auto p-4\" dir=\"ltr\"><code class=\"!whitespace-pre hljs language-html\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">link<\/span> <span class=\"hljs-attr\">rel<\/span>=<span class=\"hljs-string\">\"stylesheet\"<\/span> <span class=\"hljs-attr\">href<\/span>=<span class=\"hljs-string\">\"https:\/\/stackpath.bootstrapcdn.com\/bootstrap\/4.5.2\/css\/bootstrap.min.css\"<\/span>&gt;<\/span><br \/>\n<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">script<\/span> <span class=\"hljs-attr\">src<\/span>=<span class=\"hljs-string\">\"https:\/\/code.jquery.com\/jquery-3.5.1.slim.min.js\"<\/span>&gt;<\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">script<\/span>&gt;<\/span><br \/>\n<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">script<\/span> <span class=\"hljs-attr\">src<\/span>=<span class=\"hljs-string\">\"https:\/\/cdn.jsdelivr.net\/npm\/@popperjs\/core@2.9.2\/dist\/umd\/popper.min.js\"<\/span>&gt;<\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">script<\/span>&gt;<\/span><br \/>\n<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">script<\/span> <span class=\"hljs-attr\">src<\/span>=<span class=\"hljs-string\">\"https:\/\/stackpath.bootstrapcdn.com\/bootstrap\/4.5.2\/js\/bootstrap.min.js\"<\/span>&gt;<\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">script<\/span>&gt;<\/span><br \/>\n<\/code><\/div>\n<\/div>\n<h3><span class=\"ez-toc-section\" id=\"Including_Bootstrap_in_Your_Project\"><\/span>Including Bootstrap in Your Project<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Create a folder structure for your project:<\/p>\n<div class=\"contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative bg-token-sidebar-surface-primary dark:bg-gray-950\">\n<div class=\"flex items-center text-token-text-secondary px-4 py-2 text-xs font-sans justify-between rounded-t-md h-9 bg-token-sidebar-surface-primary dark:bg-token-main-surface-secondary\">bash<\/div>\n<div class=\"sticky top-9 md:top-[5.75rem]\">\n<div class=\"absolute bottom-0 right-2 flex h-9 items-center\">\n<div class=\"flex items-center rounded bg-token-sidebar-surface-primary px-2 font-sans text-xs text-token-text-secondary dark:bg-token-main-surface-secondary\"><span class=\"\" data-state=\"closed\"><button class=\"flex gap-1 items-center py-1\">Copy code<\/button><\/span><\/div>\n<\/div>\n<\/div>\n<div class=\"overflow-y-auto p-4\" dir=\"ltr\"><code class=\"!whitespace-pre hljs language-bash\">\/your-project<br \/>\n    \/css<br \/>\n    \/js<br \/>\n    \/images<br \/>\n    index.html<br \/>\n<\/code><\/div>\n<\/div>\n<p>Add the Bootstrap CSS and JS files to the appropriate folders if you downloaded them. Reference them in your <code>index.html<\/code>:<\/p>\n<div class=\"contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative bg-token-sidebar-surface-primary dark:bg-gray-950\">\n<div class=\"flex items-center text-token-text-secondary px-4 py-2 text-xs font-sans justify-between rounded-t-md h-9 bg-token-sidebar-surface-primary dark:bg-token-main-surface-secondary\">html<\/div>\n<div class=\"sticky top-9 md:top-[5.75rem]\">\n<div class=\"absolute bottom-0 right-2 flex h-9 items-center\">\n<div class=\"flex items-center rounded bg-token-sidebar-surface-primary px-2 font-sans text-xs text-token-text-secondary dark:bg-token-main-surface-secondary\"><span class=\"\" data-state=\"closed\"><button class=\"flex gap-1 items-center py-1\">Copy code<\/button><\/span><\/div>\n<\/div>\n<\/div>\n<div class=\"overflow-y-auto p-4\" dir=\"ltr\"><code class=\"!whitespace-pre hljs language-html\"><span class=\"hljs-meta\">&lt;!DOCTYPE <span class=\"hljs-keyword\">html<\/span>&gt;<\/span><br \/>\n<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">html<\/span> <span class=\"hljs-attr\">lang<\/span>=<span class=\"hljs-string\">\"en\"<\/span>&gt;<\/span><br \/>\n<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">head<\/span>&gt;<\/span><br \/>\n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">meta<\/span> <span class=\"hljs-attr\">charset<\/span>=<span class=\"hljs-string\">\"UTF-8\"<\/span>&gt;<\/span><br \/>\n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">meta<\/span> <span class=\"hljs-attr\">name<\/span>=<span class=\"hljs-string\">\"viewport\"<\/span> <span class=\"hljs-attr\">content<\/span>=<span class=\"hljs-string\">\"width=device-width, initial-scale=1.0\"<\/span>&gt;<\/span><br \/>\n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">title<\/span>&gt;<\/span>Your Responsive Website<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">title<\/span>&gt;<\/span><br \/>\n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">link<\/span> <span class=\"hljs-attr\">rel<\/span>=<span class=\"hljs-string\">\"stylesheet\"<\/span> <span class=\"hljs-attr\">href<\/span>=<span class=\"hljs-string\">\"css\/bootstrap.min.css\"<\/span>&gt;<\/span><br \/>\n<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">head<\/span>&gt;<\/span><br \/>\n<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">body<\/span>&gt;<\/span><br \/>\n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">script<\/span> <span class=\"hljs-attr\">src<\/span>=<span class=\"hljs-string\">\"js\/bootstrap.bundle.min.js\"<\/span>&gt;<\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">script<\/span>&gt;<\/span><br \/>\n<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">body<\/span>&gt;<\/span><br \/>\n<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">html<\/span>&gt;<\/span><br \/>\n<\/code><\/div>\n<\/div>\n<h2><span class=\"ez-toc-section\" id=\"3_Bootstrap_Grid_System\"><\/span>3. Bootstrap Grid System<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<h3><span class=\"ez-toc-section\" id=\"Understanding_the_Grid\"><\/span>Understanding the Grid<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Bootstrap\u2019s grid system uses a series of containers, rows, and columns to layout and align content. The grid is responsive, adapting to different screen sizes.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"Creating_Responsive_Layouts\"><\/span>Creating Responsive Layouts<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Here\u2019s how to create a simple layout using the grid system:<\/p>\n<div class=\"contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative bg-token-sidebar-surface-primary dark:bg-gray-950\">\n<div class=\"flex items-center text-token-text-secondary px-4 py-2 text-xs font-sans justify-between rounded-t-md h-9 bg-token-sidebar-surface-primary dark:bg-token-main-surface-secondary\">html<\/div>\n<div class=\"sticky top-9 md:top-[5.75rem]\">\n<div class=\"absolute bottom-0 right-2 flex h-9 items-center\">\n<div class=\"flex items-center rounded bg-token-sidebar-surface-primary px-2 font-sans text-xs text-token-text-secondary dark:bg-token-main-surface-secondary\"><span class=\"\" data-state=\"closed\"><button class=\"flex gap-1 items-center py-1\">Copy code<\/button><\/span><\/div>\n<\/div>\n<\/div>\n<div class=\"overflow-y-auto p-4\" dir=\"ltr\"><code class=\"!whitespace-pre hljs language-html\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"container\"<\/span>&gt;<\/span><br \/>\n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"row\"<\/span>&gt;<\/span><br \/>\n        <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"col-md-4\"<\/span>&gt;<\/span>Column 1<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span><br \/>\n        <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"col-md-4\"<\/span>&gt;<\/span>Column 2<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span><br \/>\n        <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"col-md-4\"<\/span>&gt;<\/span>Column 3<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span><br \/>\n    <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span><br \/>\n<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span><br \/>\n<\/code><\/div>\n<\/div>\n<p>In this example, on medium screens and above, there will be three equal columns. On smaller screens, these columns will stack vertically.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"4_Bootstrap_Components\"><\/span>4. Bootstrap Components<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<h3><span class=\"ez-toc-section\" id=\"Navigation_Bars\"><\/span>Navigation Bars<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Creating a responsive navigation bar is straightforward with Bootstrap. Here\u2019s an example:<\/p>\n<div class=\"contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative bg-token-sidebar-surface-primary dark:bg-gray-950\">\n<div class=\"flex items-center text-token-text-secondary px-4 py-2 text-xs font-sans justify-between rounded-t-md h-9 bg-token-sidebar-surface-primary dark:bg-token-main-surface-secondary\">html<\/div>\n<div class=\"sticky top-9 md:top-[5.75rem]\">\n<div class=\"absolute bottom-0 right-2 flex h-9 items-center\">\n<div class=\"flex items-center rounded bg-token-sidebar-surface-primary px-2 font-sans text-xs text-token-text-secondary dark:bg-token-main-surface-secondary\"><span class=\"\" data-state=\"closed\"><button class=\"flex gap-1 items-center py-1\">Copy code<\/button><\/span><\/div>\n<\/div>\n<\/div>\n<div class=\"overflow-y-auto p-4\" dir=\"ltr\"><code class=\"!whitespace-pre hljs language-html\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">nav<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"navbar navbar-expand-lg navbar-light bg-light\"<\/span>&gt;<\/span><br \/>\n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">a<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"navbar-brand\"<\/span> <span class=\"hljs-attr\">href<\/span>=<span class=\"hljs-string\">\"#\"<\/span>&gt;<\/span>Brand<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">a<\/span>&gt;<\/span><br \/>\n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">button<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"navbar-toggler\"<\/span> <span class=\"hljs-attr\">type<\/span>=<span class=\"hljs-string\">\"button\"<\/span> <span class=\"hljs-attr\">data-toggle<\/span>=<span class=\"hljs-string\">\"collapse\"<\/span> <span class=\"hljs-attr\">data-target<\/span>=<span class=\"hljs-string\">\"#navbarNav\"<\/span> <span class=\"hljs-attr\">aria-controls<\/span>=<span class=\"hljs-string\">\"navbarNav\"<\/span> <span class=\"hljs-attr\">aria-expanded<\/span>=<span class=\"hljs-string\">\"false\"<\/span> <span class=\"hljs-attr\">aria-label<\/span>=<span class=\"hljs-string\">\"Toggle navigation\"<\/span>&gt;<\/span><br \/>\n        <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">span<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"navbar-toggler-icon\"<\/span>&gt;<\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">span<\/span>&gt;<\/span><br \/>\n    <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">button<\/span>&gt;<\/span><br \/>\n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"collapse navbar-collapse\"<\/span> <span class=\"hljs-attr\">id<\/span>=<span class=\"hljs-string\">\"navbarNav\"<\/span>&gt;<\/span><br \/>\n        <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">ul<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"navbar-nav\"<\/span>&gt;<\/span><br \/>\n            <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">li<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"nav-item active\"<\/span>&gt;<\/span><br \/>\n                <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">a<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"nav-link\"<\/span> <span class=\"hljs-attr\">href<\/span>=<span class=\"hljs-string\">\"#\"<\/span>&gt;<\/span>Home<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">a<\/span>&gt;<\/span><br \/>\n            <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">li<\/span>&gt;<\/span><br \/>\n            <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">li<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"nav-item\"<\/span>&gt;<\/span><br \/>\n                <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">a<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"nav-link\"<\/span> <span class=\"hljs-attr\">href<\/span>=<span class=\"hljs-string\">\"#\"<\/span>&gt;<\/span>Features<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">a<\/span>&gt;<\/span><br \/>\n            <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">li<\/span>&gt;<\/span><br \/>\n            <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">li<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"nav-item\"<\/span>&gt;<\/span><br \/>\n                <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">a<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"nav-link\"<\/span> <span class=\"hljs-attr\">href<\/span>=<span class=\"hljs-string\">\"#\"<\/span>&gt;<\/span>Pricing<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">a<\/span>&gt;<\/span><br \/>\n            <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">li<\/span>&gt;<\/span><br \/>\n        <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">ul<\/span>&gt;<\/span><br \/>\n    <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span><br \/>\n<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">nav<\/span>&gt;<\/span><br \/>\n<\/code><\/div>\n<\/div>\n<h3><span class=\"ez-toc-section\" id=\"Buttons\"><\/span>Buttons<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>You can easily create buttons with various styles:<\/p>\n<div class=\"contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative bg-token-sidebar-surface-primary dark:bg-gray-950\">\n<div class=\"flex items-center text-token-text-secondary px-4 py-2 text-xs font-sans justify-between rounded-t-md h-9 bg-token-sidebar-surface-primary dark:bg-token-main-surface-secondary\">html<\/div>\n<div class=\"sticky top-9 md:top-[5.75rem]\">\n<div class=\"absolute bottom-0 right-2 flex h-9 items-center\">\n<div class=\"flex items-center rounded bg-token-sidebar-surface-primary px-2 font-sans text-xs text-token-text-secondary dark:bg-token-main-surface-secondary\"><span class=\"\" data-state=\"closed\"><button class=\"flex gap-1 items-center py-1\">Copy code<\/button><\/span><\/div>\n<\/div>\n<\/div>\n<div class=\"overflow-y-auto p-4\" dir=\"ltr\"><code class=\"!whitespace-pre hljs language-html\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">a<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"btn btn-primary\"<\/span> <span class=\"hljs-attr\">href<\/span>=<span class=\"hljs-string\">\"#\"<\/span> <span class=\"hljs-attr\">role<\/span>=<span class=\"hljs-string\">\"button\"<\/span>&gt;<\/span>Primary Button<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">a<\/span>&gt;<\/span><br \/>\n<\/code><\/div>\n<\/div>\n<h3><span class=\"ez-toc-section\" id=\"Cards\"><\/span>Cards<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Cards are flexible content containers:<\/p>\n<div class=\"contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative bg-token-sidebar-surface-primary dark:bg-gray-950\">\n<div class=\"flex items-center text-token-text-secondary px-4 py-2 text-xs font-sans justify-between rounded-t-md h-9 bg-token-sidebar-surface-primary dark:bg-token-main-surface-secondary\">html<\/div>\n<div class=\"sticky top-9 md:top-[5.75rem]\">\n<div class=\"absolute bottom-0 right-2 flex h-9 items-center\">\n<div class=\"flex items-center rounded bg-token-sidebar-surface-primary px-2 font-sans text-xs text-token-text-secondary dark:bg-token-main-surface-secondary\"><span class=\"\" data-state=\"closed\"><button class=\"flex gap-1 items-center py-1\">Copy code<\/button><\/span><\/div>\n<\/div>\n<\/div>\n<div class=\"overflow-y-auto p-4\" dir=\"ltr\"><code class=\"!whitespace-pre hljs language-html\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"card\"<\/span> <span class=\"hljs-attr\">style<\/span>=<span class=\"hljs-string\">\"width: 18rem;\"<\/span>&gt;<\/span><br \/>\n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">img<\/span> <span class=\"hljs-attr\">src<\/span>=<span class=\"hljs-string\">\"images\/card-image.jpg\"<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"card-img-top\"<\/span> <span class=\"hljs-attr\">alt<\/span>=<span class=\"hljs-string\">\"Card image cap\"<\/span>&gt;<\/span><br \/>\n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"card-body\"<\/span>&gt;<\/span><br \/>\n        <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">h5<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"card-title\"<\/span>&gt;<\/span>Card title<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">h5<\/span>&gt;<\/span><br \/>\n        <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">p<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"card-text\"<\/span>&gt;<\/span>Some quick example text.<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">p<\/span>&gt;<\/span><br \/>\n        <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">a<\/span> <span class=\"hljs-attr\">href<\/span>=<span class=\"hljs-string\">\"#\"<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"btn btn-primary\"<\/span>&gt;<\/span>Go somewhere<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">a<\/span>&gt;<\/span><br \/>\n    <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span><br \/>\n<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span><br \/>\n<\/code><\/div>\n<\/div>\n<h3><span class=\"ez-toc-section\" id=\"Forms\"><\/span>Forms<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Bootstrap forms are styled for better usability:<\/p>\n<div class=\"contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative bg-token-sidebar-surface-primary dark:bg-gray-950\">\n<div class=\"flex items-center text-token-text-secondary px-4 py-2 text-xs font-sans justify-between rounded-t-md h-9 bg-token-sidebar-surface-primary dark:bg-token-main-surface-secondary\">html<\/div>\n<div class=\"sticky top-9 md:top-[5.75rem]\">\n<div class=\"absolute bottom-0 right-2 flex h-9 items-center\">\n<div class=\"flex items-center rounded bg-token-sidebar-surface-primary px-2 font-sans text-xs text-token-text-secondary dark:bg-token-main-surface-secondary\"><span class=\"\" data-state=\"closed\"><button class=\"flex gap-1 items-center py-1\">Copy code<\/button><\/span><\/div>\n<\/div>\n<\/div>\n<div class=\"overflow-y-auto p-4\" dir=\"ltr\"><code class=\"!whitespace-pre hljs language-html\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">form<\/span>&gt;<\/span><br \/>\n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"form-group\"<\/span>&gt;<\/span><br \/>\n        <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">label<\/span> <span class=\"hljs-attr\">for<\/span>=<span class=\"hljs-string\">\"exampleInputEmail1\"<\/span>&gt;<\/span>Email address<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">label<\/span>&gt;<\/span><br \/>\n        <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">input<\/span> <span class=\"hljs-attr\">type<\/span>=<span class=\"hljs-string\">\"email\"<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"form-control\"<\/span> <span class=\"hljs-attr\">id<\/span>=<span class=\"hljs-string\">\"exampleInputEmail1\"<\/span> <span class=\"hljs-attr\">aria-describedby<\/span>=<span class=\"hljs-string\">\"emailHelp\"<\/span> <span class=\"hljs-attr\">placeholder<\/span>=<span class=\"hljs-string\">\"Enter email\"<\/span>&gt;<\/span><br \/>\n    <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span><br \/>\n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">button<\/span> <span class=\"hljs-attr\">type<\/span>=<span class=\"hljs-string\">\"submit\"<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"btn btn-primary\"<\/span>&gt;<\/span>Submit<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">button<\/span>&gt;<\/span><br \/>\n<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">form<\/span>&gt;<\/span><br \/>\n<\/code><\/div>\n<\/div>\n<h2><span class=\"ez-toc-section\" id=\"5_Customizing_Bootstrap\"><\/span>5. Customizing Bootstrap<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<h3><span class=\"ez-toc-section\" id=\"Customizing_with_CSS\"><\/span>Customizing with CSS<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>While Bootstrap provides many built-in styles, you may want to customize them. Create a <code>styles.css<\/code> file and link it in your HTML:<\/p>\n<div class=\"contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative bg-token-sidebar-surface-primary dark:bg-gray-950\">\n<div class=\"flex items-center text-token-text-secondary px-4 py-2 text-xs font-sans justify-between rounded-t-md h-9 bg-token-sidebar-surface-primary dark:bg-token-main-surface-secondary\">html<\/div>\n<div class=\"sticky top-9 md:top-[5.75rem]\">\n<div class=\"absolute bottom-0 right-2 flex h-9 items-center\">\n<div class=\"flex items-center rounded bg-token-sidebar-surface-primary px-2 font-sans text-xs text-token-text-secondary dark:bg-token-main-surface-secondary\"><span class=\"\" data-state=\"closed\"><button class=\"flex gap-1 items-center py-1\">Copy code<\/button><\/span><\/div>\n<\/div>\n<\/div>\n<div class=\"overflow-y-auto p-4\" dir=\"ltr\"><code class=\"!whitespace-pre hljs language-html\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">link<\/span> <span class=\"hljs-attr\">rel<\/span>=<span class=\"hljs-string\">\"stylesheet\"<\/span> <span class=\"hljs-attr\">href<\/span>=<span class=\"hljs-string\">\"css\/styles.css\"<\/span>&gt;<\/span><br \/>\n<\/code><\/div>\n<\/div>\n<p>Override styles in your <code>styles.css<\/code>:<\/p>\n<div class=\"contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative bg-token-sidebar-surface-primary dark:bg-gray-950\">\n<div class=\"flex items-center text-token-text-secondary px-4 py-2 text-xs font-sans justify-between rounded-t-md h-9 bg-token-sidebar-surface-primary dark:bg-token-main-surface-secondary\">css<\/div>\n<div class=\"sticky top-9 md:top-[5.75rem]\">\n<div class=\"absolute bottom-0 right-2 flex h-9 items-center\">\n<div class=\"flex items-center rounded bg-token-sidebar-surface-primary px-2 font-sans text-xs text-token-text-secondary dark:bg-token-main-surface-secondary\"><span class=\"\" data-state=\"closed\"><button class=\"flex gap-1 items-center py-1\">Copy code<\/button><\/span><\/div>\n<\/div>\n<\/div>\n<div class=\"overflow-y-auto p-4\" dir=\"ltr\"><code class=\"!whitespace-pre hljs language-css\"><span class=\"hljs-selector-tag\">body<\/span> {<br \/>\n    <span class=\"hljs-attribute\">background-color<\/span>: <span class=\"hljs-number\">#f8f9fa<\/span>;<br \/>\n}<br \/>\n<span class=\"hljs-selector-class\">.navbar<\/span> {<br \/>\n    <span class=\"hljs-attribute\">background-color<\/span>: <span class=\"hljs-number\">#007bff<\/span>;<br \/>\n}<br \/>\n<\/code><\/div>\n<\/div>\n<h3><span class=\"ez-toc-section\" id=\"Using_Bootstrap_Variables\"><\/span>Using Bootstrap Variables<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>If you\u2019re using Sass, you can customize Bootstrap\u2019s variables. Install Bootstrap via npm or download the source files to access <code>_variables.scss<\/code> and modify the values.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"Theming_with_Bootstrap\"><\/span>Theming with Bootstrap<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>You can create a custom theme by overriding Bootstrap\u2019s default variables or using Bootstrap\u2019s theming features. Explore the official documentation for guidance on creating your theme.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"6_Responsive_Images_and_Media\"><\/span>6. Responsive Images and Media<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<h3><span class=\"ez-toc-section\" id=\"Implementing_Responsive_Images\"><\/span>Implementing Responsive Images<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Bootstrap provides a class for responsive images, ensuring they scale with the parent element:<\/p>\n<div class=\"contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative bg-token-sidebar-surface-primary dark:bg-gray-950\">\n<div class=\"flex items-center text-token-text-secondary px-4 py-2 text-xs font-sans justify-between rounded-t-md h-9 bg-token-sidebar-surface-primary dark:bg-token-main-surface-secondary\">html<\/div>\n<div class=\"sticky top-9 md:top-[5.75rem]\">\n<div class=\"absolute bottom-0 right-2 flex h-9 items-center\">\n<div class=\"flex items-center rounded bg-token-sidebar-surface-primary px-2 font-sans text-xs text-token-text-secondary dark:bg-token-main-surface-secondary\"><span class=\"\" data-state=\"closed\"><button class=\"flex gap-1 items-center py-1\">Copy code<\/button><\/span><\/div>\n<\/div>\n<\/div>\n<div class=\"overflow-y-auto p-4\" dir=\"ltr\"><code class=\"!whitespace-pre hljs language-html\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">img<\/span> <span class=\"hljs-attr\">src<\/span>=<span class=\"hljs-string\">\"images\/image.jpg\"<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"img-fluid\"<\/span> <span class=\"hljs-attr\">alt<\/span>=<span class=\"hljs-string\">\"Responsive image\"<\/span>&gt;<\/span><br \/>\n<\/code><\/div>\n<\/div>\n<h3><span class=\"ez-toc-section\" id=\"Using_Media_Objects\"><\/span>Using Media Objects<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Bootstrap\u2019s media object class allows for flexible media and text alignment:<\/p>\n<div class=\"contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative bg-token-sidebar-surface-primary dark:bg-gray-950\">\n<div class=\"flex items-center text-token-text-secondary px-4 py-2 text-xs font-sans justify-between rounded-t-md h-9 bg-token-sidebar-surface-primary dark:bg-token-main-surface-secondary\">html<\/div>\n<div class=\"sticky top-9 md:top-[5.75rem]\">\n<div class=\"absolute bottom-0 right-2 flex h-9 items-center\">\n<div class=\"flex items-center rounded bg-token-sidebar-surface-primary px-2 font-sans text-xs text-token-text-secondary dark:bg-token-main-surface-secondary\"><span class=\"\" data-state=\"closed\"><button class=\"flex gap-1 items-center py-1\">Copy code<\/button><\/span><\/div>\n<\/div>\n<\/div>\n<div class=\"overflow-y-auto p-4\" dir=\"ltr\"><code class=\"!whitespace-pre hljs language-html\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"media\"<\/span>&gt;<\/span><br \/>\n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">img<\/span> <span class=\"hljs-attr\">src<\/span>=<span class=\"hljs-string\">\"images\/media.jpg\"<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"mr-3\"<\/span> <span class=\"hljs-attr\">alt<\/span>=<span class=\"hljs-string\">\"Generic placeholder image\"<\/span>&gt;<\/span><br \/>\n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"media-body\"<\/span>&gt;<\/span><br \/>\n        <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">h5<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"mt-0\"<\/span>&gt;<\/span>Media heading<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">h5<\/span>&gt;<\/span><br \/>\n        Cras sit amet nibh libero, in gravida nulla.<br \/>\n    <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span><br \/>\n<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span><br \/>\n<\/code><\/div>\n<\/div>\n<h2><span class=\"ez-toc-section\" id=\"7_Utilizing_Bootstrap_Utilities\"><\/span>7. Utilizing Bootstrap Utilities<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<h3><span class=\"ez-toc-section\" id=\"Spacing_Utilities\"><\/span>Spacing Utilities<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Bootstrap includes utility classes for margin and padding. For example:<\/p>\n<div class=\"contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative bg-token-sidebar-surface-primary dark:bg-gray-950\">\n<div class=\"flex items-center text-token-text-secondary px-4 py-2 text-xs font-sans justify-between rounded-t-md h-9 bg-token-sidebar-surface-primary dark:bg-token-main-surface-secondary\">html<\/div>\n<div class=\"sticky top-9 md:top-[5.75rem]\">\n<div class=\"absolute bottom-0 right-2 flex h-9 items-center\">\n<div class=\"flex items-center rounded bg-token-sidebar-surface-primary px-2 font-sans text-xs text-token-text-secondary dark:bg-token-main-surface-secondary\"><span class=\"\" data-state=\"closed\"><button class=\"flex gap-1 items-center py-1\">Copy code<\/button><\/span><\/div>\n<\/div>\n<\/div>\n<div class=\"overflow-y-auto p-4\" dir=\"ltr\"><code class=\"!whitespace-pre hljs language-html\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"mt-3 mb-3\"<\/span>&gt;<\/span>This div has top and bottom margin.<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span><br \/>\n<\/code><\/div>\n<\/div>\n<h3><span class=\"ez-toc-section\" id=\"Text_Utilities\"><\/span>Text Utilities<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Control text alignment and color easily:<\/p>\n<div class=\"contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative bg-token-sidebar-surface-primary dark:bg-gray-950\">\n<div class=\"flex items-center text-token-text-secondary px-4 py-2 text-xs font-sans justify-between rounded-t-md h-9 bg-token-sidebar-surface-primary dark:bg-token-main-surface-secondary\">html<\/div>\n<div class=\"sticky top-9 md:top-[5.75rem]\">\n<div class=\"absolute bottom-0 right-2 flex h-9 items-center\">\n<div class=\"flex items-center rounded bg-token-sidebar-surface-primary px-2 font-sans text-xs text-token-text-secondary dark:bg-token-main-surface-secondary\"><span class=\"\" data-state=\"closed\"><button class=\"flex gap-1 items-center py-1\">Copy code<\/button><\/span><\/div>\n<\/div>\n<\/div>\n<div class=\"overflow-y-auto p-4\" dir=\"ltr\"><code class=\"!whitespace-pre hljs language-html\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">p<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"text-center\"<\/span>&gt;<\/span>Centered text<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">p<\/span>&gt;<\/span><br \/>\n<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">p<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"text-danger\"<\/span>&gt;<\/span>This text is red!<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">p<\/span>&gt;<\/span><br \/>\n<\/code><\/div>\n<\/div>\n<h3><span class=\"ez-toc-section\" id=\"Display_Utilities\"><\/span>Display Utilities<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Show or hide elements based on the viewport size:<\/p>\n<div class=\"contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative bg-token-sidebar-surface-primary dark:bg-gray-950\">\n<div class=\"flex items-center text-token-text-secondary px-4 py-2 text-xs font-sans justify-between rounded-t-md h-9 bg-token-sidebar-surface-primary dark:bg-token-main-surface-secondary\">html<\/div>\n<div class=\"sticky top-9 md:top-[5.75rem]\">\n<div class=\"absolute bottom-0 right-2 flex h-9 items-center\">\n<div class=\"flex items-center rounded bg-token-sidebar-surface-primary px-2 font-sans text-xs text-token-text-secondary dark:bg-token-main-surface-secondary\"><span class=\"\" data-state=\"closed\"><button class=\"flex gap-1 items-center py-1\">Copy code<\/button><\/span><\/div>\n<\/div>\n<\/div>\n<div class=\"overflow-y-auto p-4\" dir=\"ltr\"><code class=\"!whitespace-pre hljs language-html\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"d-none d-md-block\"<\/span>&gt;<\/span>This is visible on medium screens and up.<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span><br \/>\n<\/code><\/div>\n<\/div>\n<h2><span class=\"ez-toc-section\" id=\"8_Testing_and_Debugging\"><\/span>8. Testing and Debugging<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<h3><span class=\"ez-toc-section\" id=\"Cross-Browser_Compatibility\"><\/span>Cross-Browser Compatibility<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Test your website in multiple browsers (Chrome, Firefox, Safari, Edge) to ensure compatibility. Use tools like BrowserStack for comprehensive testing.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"Mobile_Responsiveness\"><\/span>Mobile Responsiveness<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Use the developer tools in your browser to simulate different devices. Ensure your website adjusts correctly across various screen sizes.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"9_Deploying_Your_Website\"><\/span>9. Deploying Your Website<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<h3><span class=\"ez-toc-section\" id=\"Choosing_a_Hosting_Provider\"><\/span>Choosing a Hosting Provider<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Select a hosting provider that suits your needs. Options include:<\/p>\n<ul>\n<li><strong>Shared Hosting<\/strong>: Affordable for small projects (e.g., Bluehost, SiteGround).<\/li>\n<li><strong>VPS Hosting<\/strong>: More control for growing sites.<\/li>\n<li><strong>Dedicated Hosting<\/strong>: For high-traffic websites.<\/li>\n<\/ul>\n<h3><span class=\"ez-toc-section\" id=\"Uploading_Your_Files\"><\/span>Uploading Your Files<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Use an FTP client (like FileZilla) to upload your project files to your server. Make sure to upload the files in the root directory so they can be accessed directly through your domain.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"_Conclusion\"><\/span>\u00a0Conclusion<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Building a responsive website using Bootstrap is efficient and effective. By leveraging Bootstrap&#8217;s powerful features, you can create a visually appealing and mobile-friendly website with minimal effort. As you gain experience, explore advanced features and customization options to further.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Bootstrap is a powerful front-end framework that enables developers to create responsive and mobile-first websites quickly. This guide will walk you through the entire process&#8230;<\/p>\n","protected":false},"author":210,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[88],"tags":[],"class_list":["post-10798","post","type-post","status-publish","format-standard","hentry","category-technology-updates"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v24.9 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>How to create a responsive website with Bootstrap - Lite14 Tools &amp; Blog<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/lite14.net\/blog\/2024\/10\/18\/how-to-create-a-responsive-website-with-bootstrap\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to create a responsive website with Bootstrap - Lite14 Tools &amp; Blog\" \/>\n<meta property=\"og:description\" content=\"Bootstrap is a powerful front-end framework that enables developers to create responsive and mobile-first websites quickly. This guide will walk you through the entire process...\" \/>\n<meta property=\"og:url\" content=\"https:\/\/lite14.net\/blog\/2024\/10\/18\/how-to-create-a-responsive-website-with-bootstrap\/\" \/>\n<meta property=\"og:site_name\" content=\"Lite14 Tools &amp; Blog\" \/>\n<meta property=\"article:published_time\" content=\"2024-10-18T19:40:19+00:00\" \/>\n<meta name=\"author\" content=\"admin3\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"admin3\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"4 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/lite14.net\/blog\/2024\/10\/18\/how-to-create-a-responsive-website-with-bootstrap\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/lite14.net\/blog\/2024\/10\/18\/how-to-create-a-responsive-website-with-bootstrap\/\"},\"author\":{\"name\":\"admin3\",\"@id\":\"https:\/\/lite14.net\/blog\/#\/schema\/person\/3fcb0f4c8bd53264d6447eb6a6d36e81\"},\"headline\":\"How to create a responsive website with Bootstrap\",\"datePublished\":\"2024-10-18T19:40:19+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/lite14.net\/blog\/2024\/10\/18\/how-to-create-a-responsive-website-with-bootstrap\/\"},\"wordCount\":774,\"publisher\":{\"@id\":\"https:\/\/lite14.net\/blog\/#organization\"},\"articleSection\":[\"Technology\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/lite14.net\/blog\/2024\/10\/18\/how-to-create-a-responsive-website-with-bootstrap\/\",\"url\":\"https:\/\/lite14.net\/blog\/2024\/10\/18\/how-to-create-a-responsive-website-with-bootstrap\/\",\"name\":\"How to create a responsive website with Bootstrap - Lite14 Tools &amp; Blog\",\"isPartOf\":{\"@id\":\"https:\/\/lite14.net\/blog\/#website\"},\"datePublished\":\"2024-10-18T19:40:19+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/lite14.net\/blog\/2024\/10\/18\/how-to-create-a-responsive-website-with-bootstrap\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/lite14.net\/blog\/2024\/10\/18\/how-to-create-a-responsive-website-with-bootstrap\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/lite14.net\/blog\/2024\/10\/18\/how-to-create-a-responsive-website-with-bootstrap\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/lite14.net\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How to create a responsive website with Bootstrap\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/lite14.net\/blog\/#website\",\"url\":\"https:\/\/lite14.net\/blog\/\",\"name\":\"Lite14 Tools &amp; Blog\",\"description\":\"Email Marketing Tools &amp; Digital Marketing Updates\",\"publisher\":{\"@id\":\"https:\/\/lite14.net\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/lite14.net\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/lite14.net\/blog\/#organization\",\"name\":\"Lite14 Tools &amp; Blog\",\"url\":\"https:\/\/lite14.net\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/lite14.net\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/lite14.net\/blog\/wp-content\/uploads\/2025\/09\/cropped-lite-logo.png\",\"contentUrl\":\"https:\/\/lite14.net\/blog\/wp-content\/uploads\/2025\/09\/cropped-lite-logo.png\",\"width\":191,\"height\":178,\"caption\":\"Lite14 Tools &amp; Blog\"},\"image\":{\"@id\":\"https:\/\/lite14.net\/blog\/#\/schema\/logo\/image\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\/\/lite14.net\/blog\/#\/schema\/person\/3fcb0f4c8bd53264d6447eb6a6d36e81\",\"name\":\"admin3\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/lite14.net\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/6a47a48d3f454a7aa919c16c5d03a6b63ff4ecdd1d2405bfba02f09414226574?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/6a47a48d3f454a7aa919c16c5d03a6b63ff4ecdd1d2405bfba02f09414226574?s=96&d=mm&r=g\",\"caption\":\"admin3\"},\"url\":\"https:\/\/lite14.net\/blog\/author\/adeyemoemmanuel001\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How to create a responsive website with Bootstrap - Lite14 Tools &amp; Blog","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/lite14.net\/blog\/2024\/10\/18\/how-to-create-a-responsive-website-with-bootstrap\/","og_locale":"en_US","og_type":"article","og_title":"How to create a responsive website with Bootstrap - Lite14 Tools &amp; Blog","og_description":"Bootstrap is a powerful front-end framework that enables developers to create responsive and mobile-first websites quickly. This guide will walk you through the entire process...","og_url":"https:\/\/lite14.net\/blog\/2024\/10\/18\/how-to-create-a-responsive-website-with-bootstrap\/","og_site_name":"Lite14 Tools &amp; Blog","article_published_time":"2024-10-18T19:40:19+00:00","author":"admin3","twitter_card":"summary_large_image","twitter_misc":{"Written by":"admin3","Est. reading time":"4 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/lite14.net\/blog\/2024\/10\/18\/how-to-create-a-responsive-website-with-bootstrap\/#article","isPartOf":{"@id":"https:\/\/lite14.net\/blog\/2024\/10\/18\/how-to-create-a-responsive-website-with-bootstrap\/"},"author":{"name":"admin3","@id":"https:\/\/lite14.net\/blog\/#\/schema\/person\/3fcb0f4c8bd53264d6447eb6a6d36e81"},"headline":"How to create a responsive website with Bootstrap","datePublished":"2024-10-18T19:40:19+00:00","mainEntityOfPage":{"@id":"https:\/\/lite14.net\/blog\/2024\/10\/18\/how-to-create-a-responsive-website-with-bootstrap\/"},"wordCount":774,"publisher":{"@id":"https:\/\/lite14.net\/blog\/#organization"},"articleSection":["Technology"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/lite14.net\/blog\/2024\/10\/18\/how-to-create-a-responsive-website-with-bootstrap\/","url":"https:\/\/lite14.net\/blog\/2024\/10\/18\/how-to-create-a-responsive-website-with-bootstrap\/","name":"How to create a responsive website with Bootstrap - Lite14 Tools &amp; Blog","isPartOf":{"@id":"https:\/\/lite14.net\/blog\/#website"},"datePublished":"2024-10-18T19:40:19+00:00","breadcrumb":{"@id":"https:\/\/lite14.net\/blog\/2024\/10\/18\/how-to-create-a-responsive-website-with-bootstrap\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/lite14.net\/blog\/2024\/10\/18\/how-to-create-a-responsive-website-with-bootstrap\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/lite14.net\/blog\/2024\/10\/18\/how-to-create-a-responsive-website-with-bootstrap\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/lite14.net\/blog\/"},{"@type":"ListItem","position":2,"name":"How to create a responsive website with Bootstrap"}]},{"@type":"WebSite","@id":"https:\/\/lite14.net\/blog\/#website","url":"https:\/\/lite14.net\/blog\/","name":"Lite14 Tools &amp; Blog","description":"Email Marketing Tools &amp; Digital Marketing Updates","publisher":{"@id":"https:\/\/lite14.net\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/lite14.net\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/lite14.net\/blog\/#organization","name":"Lite14 Tools &amp; Blog","url":"https:\/\/lite14.net\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/lite14.net\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/lite14.net\/blog\/wp-content\/uploads\/2025\/09\/cropped-lite-logo.png","contentUrl":"https:\/\/lite14.net\/blog\/wp-content\/uploads\/2025\/09\/cropped-lite-logo.png","width":191,"height":178,"caption":"Lite14 Tools &amp; Blog"},"image":{"@id":"https:\/\/lite14.net\/blog\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/lite14.net\/blog\/#\/schema\/person\/3fcb0f4c8bd53264d6447eb6a6d36e81","name":"admin3","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/lite14.net\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/6a47a48d3f454a7aa919c16c5d03a6b63ff4ecdd1d2405bfba02f09414226574?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/6a47a48d3f454a7aa919c16c5d03a6b63ff4ecdd1d2405bfba02f09414226574?s=96&d=mm&r=g","caption":"admin3"},"url":"https:\/\/lite14.net\/blog\/author\/adeyemoemmanuel001\/"}]}},"_links":{"self":[{"href":"https:\/\/lite14.net\/blog\/wp-json\/wp\/v2\/posts\/10798","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/lite14.net\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/lite14.net\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/lite14.net\/blog\/wp-json\/wp\/v2\/users\/210"}],"replies":[{"embeddable":true,"href":"https:\/\/lite14.net\/blog\/wp-json\/wp\/v2\/comments?post=10798"}],"version-history":[{"count":1,"href":"https:\/\/lite14.net\/blog\/wp-json\/wp\/v2\/posts\/10798\/revisions"}],"predecessor-version":[{"id":10799,"href":"https:\/\/lite14.net\/blog\/wp-json\/wp\/v2\/posts\/10798\/revisions\/10799"}],"wp:attachment":[{"href":"https:\/\/lite14.net\/blog\/wp-json\/wp\/v2\/media?parent=10798"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/lite14.net\/blog\/wp-json\/wp\/v2\/categories?post=10798"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/lite14.net\/blog\/wp-json\/wp\/v2\/tags?post=10798"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}