{"id":19104,"date":"2014-01-20T15:01:25","date_gmt":"2014-01-20T07:01:25","guid":{"rendered":"https:\/\/www.hongkiat.com\/blog\/?p=19104"},"modified":"2020-02-03T18:12:11","modified_gmt":"2020-02-03T10:12:11","slug":"html-bootstrap-layoutit","status":"publish","type":"post","link":"https:\/\/www.hongkiat.com\/blog\/html-bootstrap-layoutit\/","title":{"rendered":"How to Build HTML Bootstrap Layouts With LayoutIt!"},"content":{"rendered":"

p>If you want to build a responsive website<\/a> then Bootstrap<\/a> will be a handy tool for you. This latest framework innovation has brought web developers a new approach of creating easier, faster and better responsive websites and apps in general.<\/p>\n

But it\u2019s pretty hard and not to mention time-consuming to build a layout from scratch. To make this process easier and faster, in this post we will be looking at LayoutIt!<\/strong> which helps you easily design HTML layouts based on Bootstrap.<\/p>\n

LayoutIt!<\/a> is a web-based tool to layout a web page design with drag-and-drop. LayoutIt!<\/strong> supports the latest Bootstrap version and if you don\u2019t want to start completely from scratch, it has 3 basic templates you can use. The design then, is ready to be used in your project complete with built-in Bootstrap code<\/strong>. So far, it\u2019s still in beta mode, but so far, it works well without a hitch.<\/p>\n

Getting Started<\/h2>\n

To get started with LayouIt! you need to head over to the Edit page<\/a>. As you can see in the following screenshot, there are various tools and options to check out. Near the top, you can see the 3 modes you can build under: Edit mode, Developer mode and Preview mode.<\/p>\n

\"layoutit<\/figure>\n

Below the top bar you can see the elements on the left sidebar and the Container on the right. The Container is your canvas on which you can build and customize your elements. Once you are done building just Download <\/strong>the code, Share<\/strong> or Save<\/strong> it.<\/p>\n

Elements<\/h2>\n

There are 4 types of elements: Grid System, Base CSS, Javascript and additional Components. Just drag and drop your required element to the Container and customize it accordingly.<\/p>\n

\"layoutit<\/figure>\n

To start off, pick a Grid System<\/strong> or several to create the layout you want to see on your website. The grid basically give you rows and columns for you to work on.<\/p>\n

Once you have the grid you can add some basic CSS elements with Base CSS<\/strong>, such as title, paragraph, blockquote, table, button, image and so on. You can find other additional preferences in each element, such as alignment for paragraphs, emphasis, or making it as the lead.<\/p>\n

To add common attributes, Components<\/strong> provide you with several basic elements of website, such as button, header, text, breadcrumb, pagination and so on. And finally, to enhance your website, just drop in some Javascript <\/strong>elements: modal, navbar, tabs, alerts, collapse or carousel.<\/p>\n

Usage Guide<\/h2>\n

To see how LayoutIt! works in action, we are going to try to build Hongkiat.com\u2019s homepage layout. Here\u2019s a breakdown of the layout.<\/p>\n

\"hkdc<\/figure>\n

First, we need to work on the grid layout.<\/p>\n

The layout needs four main rows: a single-column for the header and navbar; two-column for text content, image and pagination; a single-column for the sidebar; four columns for the footer, and one column for footnote. The following screenshot is how the layout looks like on a skeleton grid.<\/p>\n

\"current<\/figure>\n

Now to add the other elements:<\/p>\n

    \n
  1. We add a Header<\/strong> from \"Components\" and a Navbar<\/strong> from \"Javascript\".<\/li>\n
  2. To put the image beside the text content, another 8 4<\/strong> grid should be inserted inside the first 8<\/strong> grid (see shot above).\n
      \n
    • Add Text<\/strong> from \"Components\" and add Image<\/strong> from \"Base CSS\".<\/li>\n
    • Under Text<\/strong> and Image<\/strong>, insert Pagination<\/strong> from \"Components\"<\/li>\n
    • For the sidebar, let\u2019s just add a label text using Title<\/strong> from \"Base CSS\".<\/li>\n<\/ul>\n<\/li>\n
    • For the footer, we can Title<\/strong> and Paragraph<\/strong> from \"Base CSS\".<\/li>\n
    • For the footnote, we just add Paragraph<\/strong> from \"Base CSS\".<\/li>\n<\/ol>\n

      And we\u2019re done. This is what the layout will look like. Tip:<\/strong> To enable text editing, right click on the text.<\/p>\n

      \"layoutit<\/figure>\n

      For those who are newly acquainted with Bootstrap and want to build Bootstrap-supported layouts, LayoutIt! is a fun tool to play around with. Give it a go and let us know what you think of it.<\/strong><\/p>","protected":false},"excerpt":{"rendered":"

      p>If you want to build a responsive website then Bootstrap will be a handy tool for you. This latest framework innovation has brought web developers a new approach of creating easier, faster and better responsive websites and apps in general. But it\u2019s pretty hard and not to mention time-consuming to build a layout from scratch.…<\/p>\n","protected":false},"author":136,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[3393],"tags":[2289,506,2066],"topic":[4520],"class_list":["entry-content","is-maxi"],"acf":[],"yoast_head":"\nHow to Build HTML Bootstrap Layouts With LayoutIt! - Hongkiat<\/title>\n<meta name=\"description\" content=\"p>If you want to build a responsive website then Bootstrap will be a handy tool for you. This latest framework innovation has brought web developers a new\" \/>\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\/html-bootstrap-layoutit\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to Build HTML Bootstrap Layouts With LayoutIt!\" \/>\n<meta property=\"og:description\" content=\"p>If you want to build a responsive website then Bootstrap will be a handy tool for you. This latest framework innovation has brought web developers a new\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.hongkiat.com\/blog\/html-bootstrap-layoutit\/\" \/>\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=\"2014-01-20T07:01:25+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2020-02-03T10:12:11+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/assets.hongkiat.com\/uploads\/html-bootstrap-layoutit\/tools.jpg\" \/>\n<meta name=\"author\" content=\"Irfan\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@IrfanFza\" \/>\n<meta name=\"twitter:site\" content=\"@hongkiat\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Irfan\" \/>\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:\\\/\\\/www.hongkiat.com\\\/blog\\\/html-bootstrap-layoutit\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/html-bootstrap-layoutit\\\/\"},\"author\":{\"name\":\"Irfan\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/483b1092b8017f37d977331e91935d8c\"},\"headline\":\"How to Build HTML Bootstrap Layouts With LayoutIt!\",\"datePublished\":\"2014-01-20T07:01:25+00:00\",\"dateModified\":\"2020-02-03T10:12:11+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/html-bootstrap-layoutit\\\/\"},\"wordCount\":652,\"commentCount\":8,\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/html-bootstrap-layoutit\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/html-bootstrap-layoutit\\\/tools.jpg\",\"keywords\":[\"Bootstrap\",\"HTML\",\"Responsive Web Design\"],\"articleSection\":[\"Toolkit\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/html-bootstrap-layoutit\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/html-bootstrap-layoutit\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/html-bootstrap-layoutit\\\/\",\"name\":\"How to Build HTML Bootstrap Layouts With LayoutIt! - Hongkiat\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/html-bootstrap-layoutit\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/html-bootstrap-layoutit\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/html-bootstrap-layoutit\\\/tools.jpg\",\"datePublished\":\"2014-01-20T07:01:25+00:00\",\"dateModified\":\"2020-02-03T10:12:11+00:00\",\"description\":\"p>If you want to build a responsive website then Bootstrap will be a handy tool for you. This latest framework innovation has brought web developers a new\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/html-bootstrap-layoutit\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/html-bootstrap-layoutit\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/html-bootstrap-layoutit\\\/#primaryimage\",\"url\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/html-bootstrap-layoutit\\\/tools.jpg\",\"contentUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/html-bootstrap-layoutit\\\/tools.jpg\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/html-bootstrap-layoutit\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How to Build HTML Bootstrap Layouts With LayoutIt!\"}]},{\"@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\\\/483b1092b8017f37d977331e91935d8c\",\"name\":\"Irfan\",\"description\":\"Irfan is a writer for hongkiat.com and tech enthusiast all-around. He also appreciates much on minimalist and clean design. Movie and football lovers and enjoy to travel around in his free time.\",\"sameAs\":[\"https:\\\/\\\/x.com\\\/IrfanFza\"],\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/author\\\/irfan_fauzii\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"How to Build HTML Bootstrap Layouts With LayoutIt! - Hongkiat","description":"p>If you want to build a responsive website then Bootstrap will be a handy tool for you. This latest framework innovation has brought web developers a new","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\/html-bootstrap-layoutit\/","og_locale":"en_US","og_type":"article","og_title":"How to Build HTML Bootstrap Layouts With LayoutIt!","og_description":"p>If you want to build a responsive website then Bootstrap will be a handy tool for you. This latest framework innovation has brought web developers a new","og_url":"https:\/\/www.hongkiat.com\/blog\/html-bootstrap-layoutit\/","og_site_name":"Hongkiat","article_publisher":"https:\/\/www.facebook.com\/hongkiatcom","article_published_time":"2014-01-20T07:01:25+00:00","article_modified_time":"2020-02-03T10:12:11+00:00","og_image":[{"url":"https:\/\/assets.hongkiat.com\/uploads\/html-bootstrap-layoutit\/tools.jpg","type":"","width":"","height":""}],"author":"Irfan","twitter_card":"summary_large_image","twitter_creator":"@IrfanFza","twitter_site":"@hongkiat","twitter_misc":{"Written by":"Irfan","Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.hongkiat.com\/blog\/html-bootstrap-layoutit\/#article","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/html-bootstrap-layoutit\/"},"author":{"name":"Irfan","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/483b1092b8017f37d977331e91935d8c"},"headline":"How to Build HTML Bootstrap Layouts With LayoutIt!","datePublished":"2014-01-20T07:01:25+00:00","dateModified":"2020-02-03T10:12:11+00:00","mainEntityOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/html-bootstrap-layoutit\/"},"wordCount":652,"commentCount":8,"publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/html-bootstrap-layoutit\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/html-bootstrap-layoutit\/tools.jpg","keywords":["Bootstrap","HTML","Responsive Web Design"],"articleSection":["Toolkit"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.hongkiat.com\/blog\/html-bootstrap-layoutit\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.hongkiat.com\/blog\/html-bootstrap-layoutit\/","url":"https:\/\/www.hongkiat.com\/blog\/html-bootstrap-layoutit\/","name":"How to Build HTML Bootstrap Layouts With LayoutIt! - Hongkiat","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/html-bootstrap-layoutit\/#primaryimage"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/html-bootstrap-layoutit\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/html-bootstrap-layoutit\/tools.jpg","datePublished":"2014-01-20T07:01:25+00:00","dateModified":"2020-02-03T10:12:11+00:00","description":"p>If you want to build a responsive website then Bootstrap will be a handy tool for you. This latest framework innovation has brought web developers a new","breadcrumb":{"@id":"https:\/\/www.hongkiat.com\/blog\/html-bootstrap-layoutit\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.hongkiat.com\/blog\/html-bootstrap-layoutit\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/html-bootstrap-layoutit\/#primaryimage","url":"https:\/\/assets.hongkiat.com\/uploads\/html-bootstrap-layoutit\/tools.jpg","contentUrl":"https:\/\/assets.hongkiat.com\/uploads\/html-bootstrap-layoutit\/tools.jpg"},{"@type":"BreadcrumbList","@id":"https:\/\/www.hongkiat.com\/blog\/html-bootstrap-layoutit\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.hongkiat.com\/blog\/"},{"@type":"ListItem","position":2,"name":"How to Build HTML Bootstrap Layouts With LayoutIt!"}]},{"@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\/483b1092b8017f37d977331e91935d8c","name":"Irfan","description":"Irfan is a writer for hongkiat.com and tech enthusiast all-around. He also appreciates much on minimalist and clean design. Movie and football lovers and enjoy to travel around in his free time.","sameAs":["https:\/\/x.com\/IrfanFza"],"url":"https:\/\/www.hongkiat.com\/blog\/author\/irfan_fauzii\/"}]}},"jetpack_featured_media_url":"https:\/\/","jetpack_shortlink":"https:\/\/wp.me\/p4uxU-4Y8","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/19104","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\/136"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/comments?post=19104"}],"version-history":[{"count":3,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/19104\/revisions"}],"predecessor-version":[{"id":49290,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/19104\/revisions\/49290"}],"wp:attachment":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/media?parent=19104"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/categories?post=19104"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/tags?post=19104"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/topic?post=19104"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}