{"id":37112,"date":"2017-07-20T23:01:30","date_gmt":"2017-07-20T15:01:30","guid":{"rendered":"https:\/\/www.hongkiat.com\/blog\/?p=37112"},"modified":"2024-09-10T20:41:09","modified_gmt":"2024-09-10T12:41:09","slug":"bootstrap-trends-tools-layouts","status":"publish","type":"post","link":"https:\/\/www.hongkiat.com\/blog\/bootstrap-trends-tools-layouts\/","title":{"rendered":"Customizing Bootstrap Layouts: Trends, Tools &amp; Frameworks"},"content":{"rendered":"<p><strong><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/getbootstrap.com\/\">Bootstrap<\/a><\/strong> is currently the <strong>number one front-end framework<\/strong> and easily the <strong>quickest way to build layouts<\/strong>. It has been around for years and third-party developers have even published their own resources online. These resources range from <strong>free themes<\/strong> to <strong>detailed plugins and frameworks<\/strong>.<\/p>\n<p>In this article, I would like to share a handful of these <strong>resources and best practices<\/strong> for developers who want to go further with Bootstrap.<\/p>\n<p>All the <strong>resources in this post are free<\/strong>, so you can use them however you see fit. Even if you have <a ref=\"https:\/\/www.hongkiat.com\/blog\/twitter-bootstrap\/\">never used Bootstrap<\/a> you\u2019re sure to find something here that will help you get started.<\/p>\n<h2>Restyling with Bootstrap<\/h2>\n<p>The default Bootstrap library comes with its <strong>own unique design<\/strong> that looks fantastic. It\u2019s widely known across the web and you can easily tell when a website is <strong>using traditional Bootstrap elements<\/strong>.<\/p>\n<p>But, you can also <strong>restyle these elements yourself<\/strong> to use Bootstrap\u2019s code as the foundation for your layout.<\/p>\n<p>There are <strong>a few different ways<\/strong> you can do this:<\/p>\n<ul>\n<li>Add your own stylesheet to overwrite the default.<\/li>\n<li><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/getbootstrap.com\/customize\/\">Customize<\/a> BootStrap\u2019s output, so you only get the elements you want.<\/li>\n<li>Combine with add-ons and plugins\/themes.<\/li>\n<\/ul>\n<p>That last option is the most common, and it\u2019s one of the reasons Bootstrap has grown so fast.<\/p>\n<p>Granted I\u2019m also a huge fan of their <strong><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/getbootstrap.com\/customize\/\">customize tool<\/a><\/strong> because it\u2019s totally free and gives you so much control over <strong>which features you want to use<\/strong>.<\/p>\n<figure><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/getbootstrap.com\/customize\/\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/bootstrap-trends-tools-layouts\/01-bootstrap-customize-features.jpg\" alt=\"Bootstrap customization kit\" width=\"1000\" height=\"617\"><\/a><\/figure>\n<p>There are tons of resources for BootStrap 3\/4, created by third-party developers, so it\u2019s easier than ever to <strong>create your own unique BootStrap layouts<\/strong> without writing much code.<\/p>\n<h2>Plugins & add-ons<\/h2>\n<p>Since Bootstrap comes with a massive JavaScript library, it\u2019s easy enough to <strong>expand JavaScript features<\/strong>. And developers have certainly done so with their own plugins, many released for free online.<\/p>\n<p>These are my favorites that all <strong>support Bootstrap natively<\/strong>. Many of them <strong>run on jQuery<\/strong>, so they are also easy to customize if you know your way around the jQuery library.<\/p>\n<h3><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/formvalidation.io\/\">Form validator<\/a><\/h3>\n<p>First up is my favorite <strong>form validation plugin, <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/formvalidation.io\/\">Form Validator<\/a><\/strong>. It runs on jQuery, and it supports a whole heap of frontend frameworks: Bootstrap, Foundation, Pure, UIKit, and others.<\/p>\n<p>You can <strong>manually append any number of <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/formvalidation.io\/validators\/\">51 validators<\/a><\/strong> to any form on your site. This means visitors will need to meet those validation requirements before they can submit the content.<\/p>\n<p>Many contact forms use these validators to <strong>require working email addresses<\/strong>. But, you can also use them for image uploads, passwords, and pretty much anything your Bootstrap-heart desires.<\/p>\n<figure><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/formvalidation.io\/\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/bootstrap-trends-tools-layouts\/02-bootstrap-form-validation.jpg\" alt=\"Form validation plugin\" width=\"1000\" height=\"515\"><\/a><\/figure>\n<h3><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/eonasdan.github.io\/bootstrap-datetimepicker\/\">Datetime picker<\/a><\/h3>\n<p><strong>Date pickers<\/strong> are also a huge pain to code yourself. Many forms just use dropdown menus for the day\/month\/year settings but you can also use this <strong><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/eonasdan.github.io\/bootstrap-datetimepicker\/\">Bootstrap date picker plugin<\/a><\/strong> to save yourself the hassle.<\/p>\n<p>It\u2019s completely open-source and <strong>runs on the Bootstrap 3.x library<\/strong>. You will also notice it <strong>supports both the date <em>and time<\/em><\/strong> by using another jQuery plugin, <strong><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/momentjs.com\/\">Moment.js<\/a><\/strong>.<\/p>\n<p>Overall, this library is fantastic for getting a working date picker active. It does have <strong>a lot of dependencies<\/strong>, but, thankfully, you won\u2019t need to write much code to get it working.<\/p>\n<figure><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/eonasdan.github.io\/bootstrap-datetimepicker\/\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/bootstrap-trends-tools-layouts\/03-bootstrap-date-picker-plugin.jpg\" alt=\"Bootstrap DateTime picker\" width=\"1000\" height=\"468\"><\/a><\/figure>\n<h3><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/github.com\/kartik-v\/bootstrap-star-rating\">Star ratings<\/a><\/h3>\n<p>Here\u2019s another cool feature for <strong><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/github.com\/kartik-v\/bootstrap-star-rating\">star ratings<\/a><\/strong> on the web. You can <strong>append a one-to-five star rating<\/strong> anywhere on your site, using the Bootstrap library for JavaScript behaviors.<\/p>\n<p>When the user hovers over these stars, the display changes to whatever the rating is based on their cursor position. Then, with one click, the user casts their vote and sets a star rating, <strong>including half-star ratings<\/strong>.<\/p>\n<p>This plugin is definitely <strong>complicated to set up<\/strong> because you can <strong>change a lot of the default settings<\/strong> for more <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/plugins.krajee.com\/star-rating-demo-advanced-usage\">advanced techniques<\/a>. But, you can see a simple <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/plugins.krajee.com\/star-rating\/demo\">live demo<\/a> to gauge if this star rating plugin fits with your site.<\/p>\n<figure><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/github.com\/kartik-v\/bootstrap-star-rating\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/bootstrap-trends-tools-layouts\/04-star-rating-bootstrap-plugin.jpg\" alt=\"Star ratings Bootstrap plugin\" width=\"1000\" height=\"444\"><\/a><\/figure>\n<h3><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/github.com\/wootapa\/watable\/\">WATable<\/a><\/h3>\n<p>Bootstrap comes with its <strong>own table layout style<\/strong> for displaying tabular data on the frontend. But, with the <strong><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/github.com\/wootapa\/watable\/\">WATable plugin<\/a><\/strong>, you can add a whole bunch of extra features to your Bootstrap tables.<\/p>\n<p>This is one of the most detailed jQuery plugins out there, and these are just some of the features you can add:<\/p>\n<ul>\n<li>Custom pagination.<\/li>\n<li>Column sorting.<\/li>\n<li>Data filtering.<\/li>\n<li>Table animation effects.<\/li>\n<li>Check-to-select entire rows.<\/li>\n<\/ul>\n<p>WATable is described as a <strong>Swiss Army knife of table plugins<\/strong>, and I have to agree with this description. The fact that it supports Bootstrap is just the icing on the cake.<\/p>\n<figure><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/github.com\/wootapa\/watable\/\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/bootstrap-trends-tools-layouts\/05-watable-plugin-jquery-bootstrap.jpg\" alt=\"WATable plugin\" width=\"1000\" height=\"609\"><\/a><\/figure>\n<p>These were some of my favorite plugins, but there are so many others out there. You can browse through even more on <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/startbootstrap.com\/bootstrap-resources\/#plugins\">this page<\/a> if you\u2019re curious.<\/p>\n<h2>Bootstrap frameworks<\/h2>\n<p>Bootstrap is actually a large framework because it lets users <strong>customize the default HTML and CSS styles<\/strong> with a few classes.<\/p>\n<p>But, developers have taken the default BootStrap library and added their own styles to create even larger frameworks that <strong>work like themes<\/strong>, so you don\u2019t need to restyle Bootstrap from scratch.<\/p>\n<p>Thankfully, they\u2019re all free, and they all run on the default BootStrap classes.<\/p>\n<h3><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/bootflat.github.io\/\">Bootflat<\/a><\/h3>\n<p>Perhaps the most well-known BootStrap framework is <strong><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/bootflat.github.io\/\">Bootflat UI<\/a><\/strong> that <strong>follows the <a ref=\"https:\/\/www.hongkiat.com\/blog\/flat-design-resources\/\">flat design trend<\/a><\/strong>.<\/p>\n<p>It works with <strong>all the default Bootstrap features<\/strong>, including all JavaScript components. The major differences are more in <strong>design and structure<\/strong>, where page elements use flat color schemes to move away from Bootstrap\u2019s gradient styles.<\/p>\n<p>Bootflat <strong>hasn\u2019t been overused<\/strong> very much, so you can add this framework to any landing page or homepage to create a unique look for your site.<\/p>\n<p>It\u2019s 100% free and even comes with a <strong><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/bootflat.github.io\/color-picker.html\">color picker<\/a><\/strong>, so you can find flat color schemes to match your layout.<\/p>\n<figure><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/bootflat.github.io\/\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/bootstrap-trends-tools-layouts\/06-bootflat-ui-kit-design.jpg\" alt=\"Bootflat UI framework\" width=\"1000\" height=\"564\"><\/a><\/figure>\n<h3><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/github.com\/creativetimofficial\/get-shit-done\">Get Shit Done<\/a><\/h3>\n<p>This <strong>surprisingly blunt UI kit<\/strong> also builds on top of the Bootstrap 3 library and it\u2019s released for free <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/github.com\/creativetimofficial\/get-shit-done\">on GitHub<\/a>.<\/p>\n<p>Get Shit Done comes from the team at Creative Tim, where they do sell a few premium resources. This specific UI kit does have a pro version but it\u2019s not necessary at all.<\/p>\n<p>The open-source version has more than enough for everyone and you can check out the <strong><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/demos.creative-tim.com\/get-shit-done\/index.html\">live demo<\/a><\/strong> to see how it looks like in the browser.<\/p>\n<figure><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/github.com\/creativetimofficial\/get-shit-done\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/bootstrap-trends-tools-layouts\/07-get-shit-done-uikit-bootstrap.jpg\" alt=\"Get Shit Done framework\" width=\"1000\" height=\"568\"><\/a><\/figure>\n<h3><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/github.com\/FezVrasta\/bootstrap-material-design\">Bootstrap material design<\/a><\/h3>\n<p>Another popular design trend is <strong>Google\u2019s <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/material.io\/guidelines\/\">material design<\/a><\/strong>. This is a design language originally made for Android app designers but has since <strong>spread onto the web<\/strong> and garnered lots of support from UI\/UX designers.<\/p>\n<p>This incredible <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/github.com\/FezVrasta\/bootstrap-material-design\">Bootstrap material framework<\/a> uses the material design features to <strong>build a custom design style<\/strong> out of Bootstrap\u2019s library.<\/p>\n<p>By default, it <strong>supports everything in BootStrap 3<\/strong> and is currently being reworked to also support Bootstrap 4. You can learn more on the <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/fezvrasta.github.io\/bootstrap-material-design\/\">official homepage<\/a> which has documentation and demos.<\/p>\n<figure><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/github.com\/FezVrasta\/bootstrap-material-design\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/bootstrap-trends-tools-layouts\/08-material-design-bootstrap-framework.jpg\" alt=\"Material design Bootstrap framework\" width=\"1000\" height=\"393\"><\/a><\/figure>\n<p>A similar library you might try is <strong><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/mdbootstrap.com\/\">MDBootstrap<\/a><\/strong>, although I find this one a little more difficult to work with.<\/p>\n<h3><a rel=\"nofollow noopener\" target=\"_blank\" href=\"http:\/\/www.marcellop.com\/bootplus\/\">Bootplus<\/a><\/h3>\n<p>Google did create the material design language but they also have their own styles for many of their tools and web apps.<\/p>\n<p><strong><a rel=\"nofollow noopener\" target=\"_blank\" href=\"http:\/\/www.marcellop.com\/bootplus\/\">Bootplus<\/a> mimics the Google+ interface style<\/strong>, along with many of Google\u2019s help docs, Google Drive, and similar web apps. It has all the same features as Bootstrap, including grids, layout styles, element styles, and JavaScript components.<\/p>\n<p>You can even browse through a demo <a rel=\"nofollow noopener\" target=\"_blank\" href=\"http:\/\/www.marcellop.com\/bootplus\/javascript.html\">on the site<\/a> to see the <strong>differences between Bootplus and the original Bootstrap UI<\/strong>. For a free resource, Bootplus is extensive and it\u2019s perfect for anyone who likes Google\u2019s design techniques.<\/p>\n<figure><a rel=\"nofollow noopener\" target=\"_blank\" href=\"http:\/\/www.marcellop.com\/bootplus\/\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/bootstrap-trends-tools-layouts\/09-bootplus-design-ui-kit.jpg\" alt=\"Bootplus design kit\" width=\"1000\" height=\"536\"><\/a><\/figure>\n<h2>Tools & resources<\/h2>\n<p>Lastly, I want to dive into the many free tools for <strong>customizing and building Bootstrap layouts<\/strong>.<\/p>\n<p>These tools are all web apps and many of them are even open-sourced on GitHub. They\u2019re made to save you time and help you design incredible Bootstrap layouts without much code.<\/p>\n<h3><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/www.bootstrap-live-customizer.com\/\">Live editor<\/a><\/h3>\n<p>The free <strong><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/www.bootstrap-live-customizer.com\/\">Bootstrap live editor<\/a><\/strong> is one of the best tools <strong>for non-technical designers<\/strong>. If you don\u2019t know how to code you can still rely on this Bootstrap builder to create a whole layout from scratch.<\/p>\n<p>It <strong>runs right in your browser<\/strong> and you can even pick from pre-made templates to get started.<\/p>\n<p>Options in the sidebar let you <strong>add certain CSS values<\/strong> if you do know some frontend coding. But, you can also use the GUI to change colors, fonts, sizes, and pretty much anything else you like.<\/p>\n<p>Once you\u2019re done, <strong>click \u201cGet theme\u201d<\/strong> and you can copy\/paste the updated CSS styles into your own project. Super easy way to restyle Bootstrap without needing to recode everything from scratch.<\/p>\n<figure><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/www.bootstrap-live-customizer.com\/\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/bootstrap-trends-tools-layouts\/10-live-bootstrap-customizer.jpg\" alt=\"Live Bootstrap editor\" width=\"1000\" height=\"467\"><\/a><\/figure>\n<h3><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/minikomi.github.io\/Bootstrap-Form-Builder\/\">Form builder<\/a><\/h3>\n<p>This free <strong><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/minikomi.github.io\/Bootstrap-Form-Builder\/\">Bootstrap form builder<\/a><\/strong> is a <strong>drag-and-drop browser tool<\/strong> that allows you to create Bootstrap forms from scratch.<\/p>\n<p>Again, it <strong>requires zero coding knowledge<\/strong> and you have full access to all Bootstrap 3 elements. Just select the element you want and drag it right into the left-hand box. From here, you can change everything from the placeholder text to the CSS class.<\/p>\n<p>By far the coolest form builder I\u2019ve ever seen and it\u2019s 100% free!<\/p>\n<figure><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/minikomi.github.io\/Bootstrap-Form-Builder\/\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/bootstrap-trends-tools-layouts\/11-bootstrap-form-builder.jpg\" alt=\"Form builder for Bootstrap\" width=\"1000\" height=\"425\"><\/a><\/figure>\n<h3><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/bootswatch.com\/\">BootSwatchr<\/a><\/h3>\n<p>Another free tool I really like is <strong><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/bootswatch.com\/\">BootSwatchr<\/a><\/strong>. It relies on the Bootstrap framework and it lets you <strong>update colors, theme styles<\/strong>, and the <strong>overall layout<\/strong> of the page.<\/p>\n<p>What I like about this app is how it also comes with a <strong><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/bootswatch.com\/3\/\">free gallery<\/a> of pre-designed styles<\/strong>.<\/p>\n<p>So, you can download a design that <strong>someone else already made<\/strong> or you can use that as a starting point to customize your own theme.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/bootstrap-trends-tools-layouts\/12-bootswatchr-website.jpg\" alt=\"Bootswatchr Bootstrap web app\" width=\"1000\" height=\"536\"><\/figure>\n<h2>Moving Forward<\/h2>\n<p>Bootstrap is only growing in popularity, so now is the best time to <strong>dive into this framework<\/strong>. Thankfully, there are dozens of plugins, frameworks, and free tools you can use to expedite the dev process.<\/p>\n<p>In this article, I just showed the tip of the iceberg, so if you don\u2019t see anything here that\u2019s useful, get out to Google and see what else you can find.<\/p>\n<p class=\"recommended_top\">\n\t\t\t\t\t<strong>Read Also:<\/strong>\u00a0\n\t\t\t\t\t<a target=\"_blank\" href=\"https:\/\/www.hongkiat.com\/blog\/bootstrap-and-sass\/\">A Guide to: Responsive Web Design with Bootstrap 3 and Sass<\/a>\n\t\t\t\t<\/p>","protected":false},"excerpt":{"rendered":"<p>Bootstrap is currently the number one front-end framework and easily the quickest way to build layouts. It has been around for years and third-party developers have even published their own resources online. These resources range from free themes to detailed plugins and frameworks. In this article, I would like to share a handful of these&hellip;<\/p>\n","protected":false},"author":18,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[352],"tags":[2289,510,511],"topic":[4520],"class_list":["entry-content","is-maxi"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v22.8 (Yoast SEO v27.3) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>Customizing Bootstrap Layouts: Trends, Tools &amp; Frameworks - Hongkiat<\/title>\n<meta name=\"description\" content=\"Bootstrap is currently the number one front-end framework and easily the quickest way to build layouts. It has been around for years and third-party\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.hongkiat.com\/blog\/bootstrap-trends-tools-layouts\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Customizing Bootstrap Layouts: Trends, Tools &amp; Frameworks\" \/>\n<meta property=\"og:description\" content=\"Bootstrap is currently the number one front-end framework and easily the quickest way to build layouts. It has been around for years and third-party\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.hongkiat.com\/blog\/bootstrap-trends-tools-layouts\/\" \/>\n<meta property=\"og:site_name\" content=\"Hongkiat\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/hongkiatcom\" \/>\n<meta property=\"article:published_time\" content=\"2017-07-20T15:01:30+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-09-10T12:41:09+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/assets.hongkiat.com\/uploads\/bootstrap-trends-tools-layouts\/01-bootstrap-customize-features.jpg\" \/>\n<meta name=\"author\" content=\"Jake Rocheleau\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@hongkiat\" \/>\n<meta name=\"twitter:site\" content=\"@hongkiat\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Jake Rocheleau\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"10 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/bootstrap-trends-tools-layouts\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/bootstrap-trends-tools-layouts\\\/\"},\"author\":{\"name\":\"Jake Rocheleau\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/966b2daea15283b4145e71aa98a82c2a\"},\"headline\":\"Customizing Bootstrap Layouts: Trends, Tools &amp; Frameworks\",\"datePublished\":\"2017-07-20T15:01:30+00:00\",\"dateModified\":\"2024-09-10T12:41:09+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/bootstrap-trends-tools-layouts\\\/\"},\"wordCount\":1605,\"commentCount\":1,\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/bootstrap-trends-tools-layouts\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/bootstrap-trends-tools-layouts\\\/01-bootstrap-customize-features.jpg\",\"keywords\":[\"Bootstrap\",\"Web Designers\",\"Web Developers\"],\"articleSection\":[\"Web Design\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/bootstrap-trends-tools-layouts\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/bootstrap-trends-tools-layouts\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/bootstrap-trends-tools-layouts\\\/\",\"name\":\"Customizing Bootstrap Layouts: Trends, Tools &amp; Frameworks - Hongkiat\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/bootstrap-trends-tools-layouts\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/bootstrap-trends-tools-layouts\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/bootstrap-trends-tools-layouts\\\/01-bootstrap-customize-features.jpg\",\"datePublished\":\"2017-07-20T15:01:30+00:00\",\"dateModified\":\"2024-09-10T12:41:09+00:00\",\"description\":\"Bootstrap is currently the number one front-end framework and easily the quickest way to build layouts. It has been around for years and third-party\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/bootstrap-trends-tools-layouts\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/bootstrap-trends-tools-layouts\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/bootstrap-trends-tools-layouts\\\/#primaryimage\",\"url\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/bootstrap-trends-tools-layouts\\\/01-bootstrap-customize-features.jpg\",\"contentUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/bootstrap-trends-tools-layouts\\\/01-bootstrap-customize-features.jpg\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/bootstrap-trends-tools-layouts\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Customizing Bootstrap Layouts: Trends, Tools &amp; Frameworks\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\",\"name\":\"Hongkiat\",\"description\":\"Tech and Design Tips\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\",\"name\":\"Hongkiat.com\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wp-content\\\/uploads\\\/hkdc-logo-rect-yoast.jpg\",\"contentUrl\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wp-content\\\/uploads\\\/hkdc-logo-rect-yoast.jpg\",\"width\":1200,\"height\":799,\"caption\":\"Hongkiat.com\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/hongkiatcom\",\"https:\\\/\\\/x.com\\\/hongkiat\",\"https:\\\/\\\/www.pinterest.com\\\/hongkiat\\\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/966b2daea15283b4145e71aa98a82c2a\",\"name\":\"Jake Rocheleau\",\"description\":\"Jake is a writer and designer with over 10 years experience working on the web. He writes about user experience design and cool resources for designers\",\"sameAs\":[\"https:\\\/\\\/www.hongkiat.com\"],\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/author\\\/jake\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Customizing Bootstrap Layouts: Trends, Tools &amp; Frameworks - Hongkiat","description":"Bootstrap is currently the number one front-end framework and easily the quickest way to build layouts. It has been around for years and third-party","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:\/\/www.hongkiat.com\/blog\/bootstrap-trends-tools-layouts\/","og_locale":"en_US","og_type":"article","og_title":"Customizing Bootstrap Layouts: Trends, Tools &amp; Frameworks","og_description":"Bootstrap is currently the number one front-end framework and easily the quickest way to build layouts. It has been around for years and third-party","og_url":"https:\/\/www.hongkiat.com\/blog\/bootstrap-trends-tools-layouts\/","og_site_name":"Hongkiat","article_publisher":"https:\/\/www.facebook.com\/hongkiatcom","article_published_time":"2017-07-20T15:01:30+00:00","article_modified_time":"2024-09-10T12:41:09+00:00","og_image":[{"url":"https:\/\/assets.hongkiat.com\/uploads\/bootstrap-trends-tools-layouts\/01-bootstrap-customize-features.jpg","type":"","width":"","height":""}],"author":"Jake Rocheleau","twitter_card":"summary_large_image","twitter_creator":"@hongkiat","twitter_site":"@hongkiat","twitter_misc":{"Written by":"Jake Rocheleau","Est. reading time":"10 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.hongkiat.com\/blog\/bootstrap-trends-tools-layouts\/#article","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/bootstrap-trends-tools-layouts\/"},"author":{"name":"Jake Rocheleau","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/966b2daea15283b4145e71aa98a82c2a"},"headline":"Customizing Bootstrap Layouts: Trends, Tools &amp; Frameworks","datePublished":"2017-07-20T15:01:30+00:00","dateModified":"2024-09-10T12:41:09+00:00","mainEntityOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/bootstrap-trends-tools-layouts\/"},"wordCount":1605,"commentCount":1,"publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/bootstrap-trends-tools-layouts\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/bootstrap-trends-tools-layouts\/01-bootstrap-customize-features.jpg","keywords":["Bootstrap","Web Designers","Web Developers"],"articleSection":["Web Design"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.hongkiat.com\/blog\/bootstrap-trends-tools-layouts\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.hongkiat.com\/blog\/bootstrap-trends-tools-layouts\/","url":"https:\/\/www.hongkiat.com\/blog\/bootstrap-trends-tools-layouts\/","name":"Customizing Bootstrap Layouts: Trends, Tools &amp; Frameworks - Hongkiat","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/bootstrap-trends-tools-layouts\/#primaryimage"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/bootstrap-trends-tools-layouts\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/bootstrap-trends-tools-layouts\/01-bootstrap-customize-features.jpg","datePublished":"2017-07-20T15:01:30+00:00","dateModified":"2024-09-10T12:41:09+00:00","description":"Bootstrap is currently the number one front-end framework and easily the quickest way to build layouts. It has been around for years and third-party","breadcrumb":{"@id":"https:\/\/www.hongkiat.com\/blog\/bootstrap-trends-tools-layouts\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.hongkiat.com\/blog\/bootstrap-trends-tools-layouts\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/bootstrap-trends-tools-layouts\/#primaryimage","url":"https:\/\/assets.hongkiat.com\/uploads\/bootstrap-trends-tools-layouts\/01-bootstrap-customize-features.jpg","contentUrl":"https:\/\/assets.hongkiat.com\/uploads\/bootstrap-trends-tools-layouts\/01-bootstrap-customize-features.jpg"},{"@type":"BreadcrumbList","@id":"https:\/\/www.hongkiat.com\/blog\/bootstrap-trends-tools-layouts\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.hongkiat.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Customizing Bootstrap Layouts: Trends, Tools &amp; Frameworks"}]},{"@type":"WebSite","@id":"https:\/\/www.hongkiat.com\/blog\/#website","url":"https:\/\/www.hongkiat.com\/blog\/","name":"Hongkiat","description":"Tech and Design Tips","publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.hongkiat.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.hongkiat.com\/blog\/#organization","name":"Hongkiat.com","url":"https:\/\/www.hongkiat.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.hongkiat.com\/blog\/wp-content\/uploads\/hkdc-logo-rect-yoast.jpg","contentUrl":"https:\/\/www.hongkiat.com\/blog\/wp-content\/uploads\/hkdc-logo-rect-yoast.jpg","width":1200,"height":799,"caption":"Hongkiat.com"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/hongkiatcom","https:\/\/x.com\/hongkiat","https:\/\/www.pinterest.com\/hongkiat\/"]},{"@type":"Person","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/966b2daea15283b4145e71aa98a82c2a","name":"Jake Rocheleau","description":"Jake is a writer and designer with over 10 years experience working on the web. He writes about user experience design and cool resources for designers","sameAs":["https:\/\/www.hongkiat.com"],"url":"https:\/\/www.hongkiat.com\/blog\/author\/jake\/"}]}},"jetpack_featured_media_url":"https:\/\/","jetpack_shortlink":"https:\/\/wp.me\/p4uxU-9EA","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/37112","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/users\/18"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/comments?post=37112"}],"version-history":[{"count":3,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/37112\/revisions"}],"predecessor-version":[{"id":72851,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/37112\/revisions\/72851"}],"wp:attachment":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/media?parent=37112"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/categories?post=37112"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/tags?post=37112"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/topic?post=37112"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}