{"id":3159,"date":"2025-09-08T08:14:53","date_gmt":"2025-09-08T08:14:53","guid":{"rendered":"https:\/\/webtoolslab.io\/blog\/responsive-layouts-bootstrap-5\/"},"modified":"2025-09-08T08:14:53","modified_gmt":"2025-09-08T08:14:53","slug":"responsive-layouts-bootstrap-5","status":"publish","type":"post","link":"https:\/\/webtoolslab.io\/blog\/responsive-layouts-bootstrap-5\/","title":{"rendered":"Build Responsive Layouts with Bootstrap 5"},"content":{"rendered":"<article>\n<h2>Introduction<\/h2>\n<p>Creating responsive layouts is essential in modern web development, especially with the rise of mobile devices. Bootstrap 5, a popular front-end framework, simplifies this process with its grid system and utility classes. This guide will walk you through the steps to build responsive layouts using Bootstrap 5, complete with code examples and practical tips.<\/p>\n<h2>Getting Started with Bootstrap 5<\/h2>\n<p>Before diving into responsive layouts, ensure you have Bootstrap 5 included in your project. You can either download Bootstrap or use a CDN link. Here\u2019s how to include Bootstrap via CDN:<\/p>\n<pre><code>&lt;link href=\"https:\/\/cdn.jsdelivr.net\/npm\/bootstrap@5.3.0\/dist\/css\/bootstrap.min.css\" rel=\"stylesheet\"&gt;\n&lt;script src=\"https:\/\/cdn.jsdelivr.net\/npm\/bootstrap@5.3.0\/dist\/js\/bootstrap.bundle.min.js\"&gt;&lt;\/script&gt;\n<\/code><\/pre>\n<h2>Understanding Bootstrap&#8217;s Grid System<\/h2>\n<p>Bootstrap 5 uses a 12-column grid system to create responsive layouts. The grid system allows you to design layouts that adapt to different screen sizes seamlessly. The grid is divided into rows and columns:<\/p>\n<pre><code>&lt;div class=\"container\"&gt;\n    &lt;div class=\"row\"&gt;\n        &lt;div class=\"col-md-6\"&gt;Column 1&lt;\/div&gt;\n        &lt;div class=\"col-md-6\"&gt;Column 2&lt;\/div&gt;\n    &lt;\/div&gt;\n&lt;\/div&gt;\n<\/code><\/pre>\n<h3>Breakpoints<\/h3>\n<p>Bootstrap 5 provides five default breakpoints:<\/p>\n<ul>\n<li>Extra small (xs): &lt;576px<\/li>\n<li>Small (sm): \u2265576px<\/li>\n<li>Medium (md): \u2265768px<\/li>\n<li>Large (lg): \u2265992px<\/li>\n<li>Extra large (xl): \u22651200px<\/li>\n<\/ul>\n<h2>Creating a Simple Responsive Layout<\/h2>\n<p>Let\u2019s create a simple responsive layout using Bootstrap 5:<\/p>\n<pre><code>&lt;div class=\"container\"&gt;\n    &lt;div class=\"row\"&gt;\n        &lt;div class=\"col-lg-4 col-md-6 col-sm-12\"&gt;Column 1&lt;\/div&gt;\n        &lt;div class=\"col-lg-4 col-md-6 col-sm-12\"&gt;Column 2&lt;\/div&gt;\n        &lt;div class=\"col-lg-4 col-md-12 col-sm-12\"&gt;Column 3&lt;\/div&gt;\n    &lt;\/div&gt;\n&lt;\/div&gt;\n<\/code><\/pre>\n<p>This layout will stack columns on smaller screens and display them side by side on larger screens.<\/p>\n<h2>Utilizing Bootstrap Utility Classes<\/h2>\n<p>Bootstrap 5 comes with various utility classes for spacing, alignment, and more. Here\u2019s an example of how to use utility classes:<\/p>\n<pre><code>&lt;div class=\"container mt-5\"&gt;\n    &lt;div class=\"row\"&gt;\n        &lt;div class=\"col text-center\"&gt;Centered Column&lt;\/div&gt;\n    &lt;\/div&gt;\n&lt;\/div&gt;\n<\/code><\/pre>\n<p>The class <code>mt-5<\/code> adds a top margin, while <code>text-center<\/code> centers the text.<\/p>\n<h2>Testing Responsiveness<\/h2>\n<p>After building your layout, it\u2019s crucial to test its responsiveness. You can use the <a href=\"https:\/\/webtoolslab.io\/tools\/responsive-simulator.php\">Responsive Simulator<\/a> to see how your layout behaves across various devices.<\/p>\n<h2>Advanced Layout Techniques<\/h2>\n<h3>Flexbox and Grid<\/h3>\n<p>Bootstrap 5 supports Flexbox and CSS Grid, allowing for more complex layouts. Here\u2019s an example using Flexbox:<\/p>\n<pre><code>&lt;div class=\"d-flex justify-content-between\"&gt;\n    &lt;div&gt;Item 1&lt;\/div&gt;\n    &lt;div&gt;Item 2&lt;\/div&gt;\n&lt;\/div&gt;\n<\/code><\/pre>\n<h3>Creating Cards<\/h3>\n<p>Cards are a great way to display content. Here\u2019s how to create a responsive card layout:<\/p>\n<pre><code>&lt;div class=\"row\"&gt;\n    &lt;div class=\"col-sm-6 col-md-4\"&gt;\n        &lt;div class=\"card\"&gt;\n            &lt;div class=\"card-body\"&gt;\n                &lt;h5 class=\"card-title\"&gt;Card Title&lt;\/h5&gt;\n                &lt;p class=\"card-text\"&gt;Some quick example text.&lt;\/p&gt;\n                &lt;a href=\"#\" class=\"btn btn-primary\"&gt;Go somewhere&lt;\/a&gt;\n            &lt;\/div&gt;\n        &lt;\/div&gt;\n    &lt;\/div&gt;\n&lt;\/div&gt;\n<\/code><\/pre>\n<h2>FAQs<\/h2>\n<h3>What is Bootstrap 5?<\/h3>\n<p>Bootstrap 5 is a popular front-end framework used to design responsive and mobile-first websites.<\/p>\n<h3>How do I create a responsive layout?<\/h3>\n<p>Use Bootstrap&#8217;s grid system and utility classes to create responsive layouts easily.<\/p>\n<h3>Can I customize Bootstrap styles?<\/h3>\n<p>Yes, you can customize Bootstrap styles by overriding CSS or using Bootstrap&#8217;s SASS variables.<\/p>\n<h2>Conclusion<\/h2>\n<p>Building responsive layouts with Bootstrap 5 is straightforward and efficient, thanks to its powerful grid system and utility classes. By following the steps outlined in this guide, you can create flexible layouts that look great on any device. For further enhancements, consider using tools like the <a href=\"https:\/\/webtoolslab.io\/tools\/css-minifier.php\">CSS Minifier<\/a> to optimize your stylesheets or the <a href=\"https:\/\/webtoolslab.io\/tools\/button-generator.php\">Button Generator<\/a> for creating custom buttons.<\/p>\n<\/article>\n","protected":false},"excerpt":{"rendered":"<p>Learn how to create responsive layouts using Bootstrap 5. Step-by-step guide with code examples and tips.<\/p>\n","protected":false},"author":1,"featured_media":2784,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_uag_custom_page_level_css":"","site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[21],"tags":[],"class_list":["post-3159","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-web-development"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.5 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Build Responsive Layouts with Bootstrap 5 - WebToolsLab<\/title>\n<meta name=\"description\" content=\"Learn how to create responsive layouts using Bootstrap 5. Step-by-step guide with code examples and tips.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/webtoolslab.io\/blog\/responsive-layouts-bootstrap-5\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Build Responsive Layouts with Bootstrap 5 - WebToolsLab\" \/>\n<meta property=\"og:description\" content=\"Learn how to create responsive layouts using Bootstrap 5. Step-by-step guide with code examples and tips.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/webtoolslab.io\/blog\/responsive-layouts-bootstrap-5\/\" \/>\n<meta property=\"og:site_name\" content=\"WebToolsLab\" \/>\n<meta property=\"article:published_time\" content=\"2025-09-08T08:14:53+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/webtoolslab.io\/blog\/wp-content\/uploads\/2025\/07\/web-3157323_1920-1.webp\" \/>\n\t<meta property=\"og:image:width\" content=\"1920\" \/>\n\t<meta property=\"og:image:height\" content=\"1459\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/webp\" \/>\n<meta name=\"author\" content=\"maashraf\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"maashraf\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/responsive-layouts-bootstrap-5\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/responsive-layouts-bootstrap-5\\\/\"},\"author\":{\"name\":\"maashraf\",\"@id\":\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/#\\\/schema\\\/person\\\/dc734a267c9220810951a2c42f320fbb\"},\"headline\":\"Build Responsive Layouts with Bootstrap 5\",\"datePublished\":\"2025-09-08T08:14:53+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/responsive-layouts-bootstrap-5\\\/\"},\"wordCount\":408,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/#\\\/schema\\\/person\\\/dc734a267c9220810951a2c42f320fbb\"},\"image\":{\"@id\":\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/responsive-layouts-bootstrap-5\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/wp-content\\\/uploads\\\/2025\\\/07\\\/web-3157323_1920-1.webp\",\"articleSection\":[\"Web Development\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/responsive-layouts-bootstrap-5\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/responsive-layouts-bootstrap-5\\\/\",\"url\":\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/responsive-layouts-bootstrap-5\\\/\",\"name\":\"Build Responsive Layouts with Bootstrap 5 - WebToolsLab\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/responsive-layouts-bootstrap-5\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/responsive-layouts-bootstrap-5\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/wp-content\\\/uploads\\\/2025\\\/07\\\/web-3157323_1920-1.webp\",\"datePublished\":\"2025-09-08T08:14:53+00:00\",\"description\":\"Learn how to create responsive layouts using Bootstrap 5. Step-by-step guide with code examples and tips.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/responsive-layouts-bootstrap-5\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/responsive-layouts-bootstrap-5\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/responsive-layouts-bootstrap-5\\\/#primaryimage\",\"url\":\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/wp-content\\\/uploads\\\/2025\\\/07\\\/web-3157323_1920-1.webp\",\"contentUrl\":\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/wp-content\\\/uploads\\\/2025\\\/07\\\/web-3157323_1920-1.webp\",\"width\":1920,\"height\":1459,\"caption\":\"web 3157323 1920 1\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/responsive-layouts-bootstrap-5\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Build Responsive Layouts with Bootstrap 5\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/\",\"name\":\"WebToolsLab Free Online Developer Tools\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/#\\\/schema\\\/person\\\/dc734a267c9220810951a2c42f320fbb\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":[\"Person\",\"Organization\"],\"@id\":\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/#\\\/schema\\\/person\\\/dc734a267c9220810951a2c42f320fbb\",\"name\":\"maashraf\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/wp-content\\\/uploads\\\/2025\\\/07\\\/favicon-1.png\",\"url\":\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/wp-content\\\/uploads\\\/2025\\\/07\\\/favicon-1.png\",\"contentUrl\":\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/wp-content\\\/uploads\\\/2025\\\/07\\\/favicon-1.png\",\"width\":96,\"height\":96,\"caption\":\"maashraf\"},\"logo\":{\"@id\":\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/wp-content\\\/uploads\\\/2025\\\/07\\\/favicon-1.png\"},\"sameAs\":[\"https:\\\/\\\/webtoolslab.io\\\/blog\"],\"url\":\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/author\\\/maashraf\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Build Responsive Layouts with Bootstrap 5 - WebToolsLab","description":"Learn how to create responsive layouts using Bootstrap 5. Step-by-step guide with code examples and tips.","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:\/\/webtoolslab.io\/blog\/responsive-layouts-bootstrap-5\/","og_locale":"en_US","og_type":"article","og_title":"Build Responsive Layouts with Bootstrap 5 - WebToolsLab","og_description":"Learn how to create responsive layouts using Bootstrap 5. Step-by-step guide with code examples and tips.","og_url":"https:\/\/webtoolslab.io\/blog\/responsive-layouts-bootstrap-5\/","og_site_name":"WebToolsLab","article_published_time":"2025-09-08T08:14:53+00:00","og_image":[{"width":1920,"height":1459,"url":"https:\/\/webtoolslab.io\/blog\/wp-content\/uploads\/2025\/07\/web-3157323_1920-1.webp","type":"image\/webp"}],"author":"maashraf","twitter_card":"summary_large_image","twitter_misc":{"Written by":"maashraf","Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/webtoolslab.io\/blog\/responsive-layouts-bootstrap-5\/#article","isPartOf":{"@id":"https:\/\/webtoolslab.io\/blog\/responsive-layouts-bootstrap-5\/"},"author":{"name":"maashraf","@id":"https:\/\/webtoolslab.io\/blog\/#\/schema\/person\/dc734a267c9220810951a2c42f320fbb"},"headline":"Build Responsive Layouts with Bootstrap 5","datePublished":"2025-09-08T08:14:53+00:00","mainEntityOfPage":{"@id":"https:\/\/webtoolslab.io\/blog\/responsive-layouts-bootstrap-5\/"},"wordCount":408,"commentCount":0,"publisher":{"@id":"https:\/\/webtoolslab.io\/blog\/#\/schema\/person\/dc734a267c9220810951a2c42f320fbb"},"image":{"@id":"https:\/\/webtoolslab.io\/blog\/responsive-layouts-bootstrap-5\/#primaryimage"},"thumbnailUrl":"https:\/\/webtoolslab.io\/blog\/wp-content\/uploads\/2025\/07\/web-3157323_1920-1.webp","articleSection":["Web Development"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/webtoolslab.io\/blog\/responsive-layouts-bootstrap-5\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/webtoolslab.io\/blog\/responsive-layouts-bootstrap-5\/","url":"https:\/\/webtoolslab.io\/blog\/responsive-layouts-bootstrap-5\/","name":"Build Responsive Layouts with Bootstrap 5 - WebToolsLab","isPartOf":{"@id":"https:\/\/webtoolslab.io\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/webtoolslab.io\/blog\/responsive-layouts-bootstrap-5\/#primaryimage"},"image":{"@id":"https:\/\/webtoolslab.io\/blog\/responsive-layouts-bootstrap-5\/#primaryimage"},"thumbnailUrl":"https:\/\/webtoolslab.io\/blog\/wp-content\/uploads\/2025\/07\/web-3157323_1920-1.webp","datePublished":"2025-09-08T08:14:53+00:00","description":"Learn how to create responsive layouts using Bootstrap 5. Step-by-step guide with code examples and tips.","breadcrumb":{"@id":"https:\/\/webtoolslab.io\/blog\/responsive-layouts-bootstrap-5\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/webtoolslab.io\/blog\/responsive-layouts-bootstrap-5\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/webtoolslab.io\/blog\/responsive-layouts-bootstrap-5\/#primaryimage","url":"https:\/\/webtoolslab.io\/blog\/wp-content\/uploads\/2025\/07\/web-3157323_1920-1.webp","contentUrl":"https:\/\/webtoolslab.io\/blog\/wp-content\/uploads\/2025\/07\/web-3157323_1920-1.webp","width":1920,"height":1459,"caption":"web 3157323 1920 1"},{"@type":"BreadcrumbList","@id":"https:\/\/webtoolslab.io\/blog\/responsive-layouts-bootstrap-5\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/webtoolslab.io\/blog\/"},{"@type":"ListItem","position":2,"name":"Build Responsive Layouts with Bootstrap 5"}]},{"@type":"WebSite","@id":"https:\/\/webtoolslab.io\/blog\/#website","url":"https:\/\/webtoolslab.io\/blog\/","name":"WebToolsLab Free Online Developer Tools","description":"","publisher":{"@id":"https:\/\/webtoolslab.io\/blog\/#\/schema\/person\/dc734a267c9220810951a2c42f320fbb"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/webtoolslab.io\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":["Person","Organization"],"@id":"https:\/\/webtoolslab.io\/blog\/#\/schema\/person\/dc734a267c9220810951a2c42f320fbb","name":"maashraf","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/webtoolslab.io\/blog\/wp-content\/uploads\/2025\/07\/favicon-1.png","url":"https:\/\/webtoolslab.io\/blog\/wp-content\/uploads\/2025\/07\/favicon-1.png","contentUrl":"https:\/\/webtoolslab.io\/blog\/wp-content\/uploads\/2025\/07\/favicon-1.png","width":96,"height":96,"caption":"maashraf"},"logo":{"@id":"https:\/\/webtoolslab.io\/blog\/wp-content\/uploads\/2025\/07\/favicon-1.png"},"sameAs":["https:\/\/webtoolslab.io\/blog"],"url":"https:\/\/webtoolslab.io\/blog\/author\/maashraf\/"}]}},"jetpack_featured_media_url":"https:\/\/webtoolslab.io\/blog\/wp-content\/uploads\/2025\/07\/web-3157323_1920-1.webp","uagb_featured_image_src":{"full":["https:\/\/webtoolslab.io\/blog\/wp-content\/uploads\/2025\/07\/web-3157323_1920-1.webp",1920,1459,false],"thumbnail":["https:\/\/webtoolslab.io\/blog\/wp-content\/uploads\/2025\/07\/web-3157323_1920-1-150x150.webp",150,150,true],"medium":["https:\/\/webtoolslab.io\/blog\/wp-content\/uploads\/2025\/07\/web-3157323_1920-1-300x228.webp",300,228,true],"medium_large":["https:\/\/webtoolslab.io\/blog\/wp-content\/uploads\/2025\/07\/web-3157323_1920-1-768x584.webp",768,584,true],"large":["https:\/\/webtoolslab.io\/blog\/wp-content\/uploads\/2025\/07\/web-3157323_1920-1-1024x778.webp",1024,778,true],"1536x1536":["https:\/\/webtoolslab.io\/blog\/wp-content\/uploads\/2025\/07\/web-3157323_1920-1-1536x1167.webp",1536,1167,true],"2048x2048":["https:\/\/webtoolslab.io\/blog\/wp-content\/uploads\/2025\/07\/web-3157323_1920-1.webp",1920,1459,false]},"uagb_author_info":{"display_name":"maashraf","author_link":"https:\/\/webtoolslab.io\/blog\/author\/maashraf\/"},"uagb_comment_info":0,"uagb_excerpt":"Learn how to create responsive layouts using Bootstrap 5. Step-by-step guide with code examples and tips.","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/webtoolslab.io\/blog\/wp-json\/wp\/v2\/posts\/3159","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/webtoolslab.io\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/webtoolslab.io\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/webtoolslab.io\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/webtoolslab.io\/blog\/wp-json\/wp\/v2\/comments?post=3159"}],"version-history":[{"count":0,"href":"https:\/\/webtoolslab.io\/blog\/wp-json\/wp\/v2\/posts\/3159\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/webtoolslab.io\/blog\/wp-json\/wp\/v2\/media\/2784"}],"wp:attachment":[{"href":"https:\/\/webtoolslab.io\/blog\/wp-json\/wp\/v2\/media?parent=3159"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/webtoolslab.io\/blog\/wp-json\/wp\/v2\/categories?post=3159"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/webtoolslab.io\/blog\/wp-json\/wp\/v2\/tags?post=3159"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}