{"id":271,"date":"2019-08-23T10:57:10","date_gmt":"2019-08-23T10:57:10","guid":{"rendered":"https:\/\/www.webhozz.com\/code\/?p=271"},"modified":"2019-09-03T10:48:14","modified_gmt":"2019-09-03T10:48:14","slug":"bootstrap-fluid-layout","status":"publish","type":"post","link":"https:\/\/www.webhozz.com\/code\/bootstrap-fluid-layout\/","title":{"rendered":"Bootstrap : Fluid Layout"},"content":{"rendered":"\n
Membuat Fluid Layout dengan Bootstrap<\/h5>\n\n\n\n

Di Bootstrap kalian dapat menggunakan kelas .container-fluid\n<\/em><\/strong>untuk membuat fluid layout untuk memanfaatkan lebar viewport 100% di\nsemua ukuran perangkat (ekstra kecil, kecil, sedang, besar, dan ekstra besar).<\/p>\n\n\n\n

Kelas .container-fluid<\/em><\/strong> hanya menerapkan lebar:\n100%, bukan lebar berbeda untuk ukuran viewport yang berbeda. Namun, layout akan\ntetap responsif dan kalian dapat menggunakan grid class seperti biasa. Lihat\ntutorial tentang bootstrap grid system untuk mempelajari lebih lanjut tentang grid\nclass.<\/p>\n\n\n\n

Contoh berikut akan membuat fluid layout yang menutupi 100% lebar layar.<\/p>\n\n\n

\n<!DOCTYPE html>\n<html lang="en">\n<head>\n<meta charset="utf-8">\n<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">\n<title>Bootstrap 4 Fluid Layout Example<\/title>\n<link rel="stylesheet" href="css\/bootstrap.min.css">\n<script src="http:\/\/code.jquery.com\/jquery-3.3.1.min.js"><\/script>\n<script src="js\/bootstrap.min.js"><\/script>\n<\/head>\n<body>\n<nav class="navbar navbar-expand-md navbar-dark bg-dark mb-3">\n    <div class="container-fluid">\n        <a href="#" class="navbar-brand mr-3">Tutorial Republic<\/a>\n        <button type="button" class="navbar-toggler" data-toggle="collapse" data-target="#navbarCollapse">\n            <span class="navbar-toggler-icon"><\/span>\n        <\/button>\n        <div class="collapse navbar-collapse" id="navbarCollapse">\n            <div class="navbar-nav">\n                <a href="#" class="nav-item nav-link active">Home<\/a>\n                <a href="#" class="nav-item nav-link">Services<\/a>\n                <a href="#" class="nav-item nav-link">About<\/a>\n                <a href="#" class="nav-item nav-link">Contact<\/a>\n            <\/div>\n            <div class="navbar-nav ml-auto">\n                <a href="#" class="nav-item nav-link">Register<\/a>\n                <a href="#" class="nav-item nav-link">Login<\/a>\n            <\/div>\n        <\/div>\n    <\/div>    \n<\/nav>\n<div class="container-fluid">\n    <div class="jumbotron">\n        <h1>Learn to Create Websites<\/h1>\n        <p class="lead">In today's world internet is the most popular way of connecting with the people. At <a href="https:\/\/www.tutorialrepublic.com" target="_blank">tutorialrepublic.com<\/a> you will learn the essential web development technologies along with real life practice examples, so that you can create your own website to connect with the people around the world.<\/p>\n        <p><a href="https:\/\/www.tutorialrepublic.com" target="_blank" class="btn btn-success btn-lg">Get started today<\/a><\/p>\n    <\/div>\n    <div class="row">\n        <div class="col-md-4">\n            <h2>HTML<\/h2>\n            <p>HTML is the standard markup language for describing the structure of the web pages. Our HTML tutorials will help you to understand the basics of latest HTML5 language, so that you can create your own web pages or website.<\/p>\n            <p><a href="https:\/\/www.tutorialrepublic.com\/html-tutorial\/" target="_blank" class="btn btn-success">Learn More \u00bb<\/a><\/p>\n        <\/div>\n        <div class="col-md-4">\n            <h2>CSS<\/h2>\n            <p>CSS is used for describing the presentation of web pages. CSS can save a lot of time and effort. Our CSS tutorials will help you to learn the essentials of latest CSS3, so that you can control the style and layout of your website.<\/p>\n            <p><a href="https:\/\/www.tutorialrepublic.com\/css-tutorial\/" target="_blank" class="btn btn-success">Learn More \u00bb<\/a><\/p>\n        <\/div>\n        <div class="col-md-4">\n            <h2>Bootstrap<\/h2>\n            <p>Bootstrap is a powerful front-end framework for faster and easier web development. Our Bootstrap tutorials will help you to learn all the features of latest Bootstrap 4 framework so that you can easily create responsive websites.<\/p>\n            <p><a href="https:\/\/www.tutorialrepublic.com\/twitter-bootstrap-tutorial\/" target="_blank" class="btn btn-success">Learn More \u00bb<\/a><\/p>\n        <\/div>\n    <\/div>\n    <hr>\n    <footer>\n        <div class="row">\n            <div class="col-md-6">\n                <p>Copyright \u00a9 2019 Tutorial Republic<\/p>\n            <\/div>\n            <div class="col-md-6 text-md-right">\n                <a href="#" class="text-dark">Terms of Use<\/a> \n                <span class="text-muted mx-2">|<\/span> \n                <a href="#" class="text-dark">Privacy Policy<\/a>\n            <\/div>\n        <\/div>\n    <\/footer>\n<\/div>\n<\/body>\n<\/html>\n<\/pre><\/div>\n\n\n
Output dari contoh di atas akan terlihat seperti ini:<\/p>\n\n\n\n
\"Bootstrap<\/figure>\n","protected":false},"excerpt":{"rendered":"
Membuat Fluid Layout dengan Bootstrap Di Bootstrap kalian dapat menggunakan kelas .container-fluid untuk membuat fluid layout untuk memanfaatkan lebar viewport 100% di semua ukuran perangkat<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[6],"tags":[],"class_list":["post-271","post","type-post","status-publish","format-standard","hentry","category-bootstrap"],"yoast_head":"\nBelajar Bootstrap : Fluid Layout - WebHozz Code<\/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:\/\/www.webhozz.com\/code\/bootstrap-fluid-layout\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Belajar Bootstrap : Fluid Layout - WebHozz Code\" \/>\n<meta property=\"og:description\" content=\"Membuat Fluid Layout dengan Bootstrap Di Bootstrap kalian dapat menggunakan kelas .container-fluid untuk membuat fluid layout untuk memanfaatkan lebar viewport 100% di semua ukuran perangkat\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.webhozz.com\/code\/bootstrap-fluid-layout\/\" \/>\n<meta property=\"og:site_name\" content=\"WebHozz Code\" \/>\n<meta property=\"article:published_time\" content=\"2019-08-23T10:57:10+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2019-09-03T10:48:14+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.tutorialrepublic.com\/lib\/images\/bootstrap-4\/bootstrap-fluid-layout.png\" \/>\n<meta name=\"author\" content=\"admin\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"admin\" \/>\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.webhozz.com\\\/code\\\/bootstrap-fluid-layout\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.webhozz.com\\\/code\\\/bootstrap-fluid-layout\\\/\"},\"author\":{\"name\":\"admin\",\"@id\":\"https:\\\/\\\/www.webhozz.com\\\/code\\\/#\\\/schema\\\/person\\\/3b2b79dc317236b0dde4b1fda37263e1\"},\"headline\":\"Bootstrap : Fluid Layout\",\"datePublished\":\"2019-08-23T10:57:10+00:00\",\"dateModified\":\"2019-09-03T10:48:14+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.webhozz.com\\\/code\\\/bootstrap-fluid-layout\\\/\"},\"wordCount\":93,\"image\":{\"@id\":\"https:\\\/\\\/www.webhozz.com\\\/code\\\/bootstrap-fluid-layout\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.tutorialrepublic.com\\\/lib\\\/images\\\/bootstrap-4\\\/bootstrap-fluid-layout.png\",\"articleSection\":[\"Bootstrap\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.webhozz.com\\\/code\\\/bootstrap-fluid-layout\\\/\",\"url\":\"https:\\\/\\\/www.webhozz.com\\\/code\\\/bootstrap-fluid-layout\\\/\",\"name\":\"Belajar Bootstrap : Fluid Layout - WebHozz Code\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.webhozz.com\\\/code\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.webhozz.com\\\/code\\\/bootstrap-fluid-layout\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.webhozz.com\\\/code\\\/bootstrap-fluid-layout\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.tutorialrepublic.com\\\/lib\\\/images\\\/bootstrap-4\\\/bootstrap-fluid-layout.png\",\"datePublished\":\"2019-08-23T10:57:10+00:00\",\"dateModified\":\"2019-09-03T10:48:14+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/www.webhozz.com\\\/code\\\/#\\\/schema\\\/person\\\/3b2b79dc317236b0dde4b1fda37263e1\"},\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.webhozz.com\\\/code\\\/bootstrap-fluid-layout\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.webhozz.com\\\/code\\\/bootstrap-fluid-layout\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.webhozz.com\\\/code\\\/bootstrap-fluid-layout\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.tutorialrepublic.com\\\/lib\\\/images\\\/bootstrap-4\\\/bootstrap-fluid-layout.png\",\"contentUrl\":\"https:\\\/\\\/www.tutorialrepublic.com\\\/lib\\\/images\\\/bootstrap-4\\\/bootstrap-fluid-layout.png\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.webhozz.com\\\/code\\\/bootstrap-fluid-layout\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.webhozz.com\\\/code\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Bootstrap : Fluid Layout\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.webhozz.com\\\/code\\\/#website\",\"url\":\"https:\\\/\\\/www.webhozz.com\\\/code\\\/\",\"name\":\"WebHozz Code\",\"description\":\"Tutorial Web & Pemrograman Indonesia\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.webhozz.com\\\/code\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.webhozz.com\\\/code\\\/#\\\/schema\\\/person\\\/3b2b79dc317236b0dde4b1fda37263e1\",\"name\":\"admin\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/f222cb0ed38f2100d666bb262fd38d4f0d8e5673698208e40ff83118f10a4e8e?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/f222cb0ed38f2100d666bb262fd38d4f0d8e5673698208e40ff83118f10a4e8e?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/f222cb0ed38f2100d666bb262fd38d4f0d8e5673698208e40ff83118f10a4e8e?s=96&d=mm&r=g\",\"caption\":\"admin\"},\"url\":\"https:\\\/\\\/www.webhozz.com\\\/code\\\/author\\\/dody\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Belajar Bootstrap : Fluid Layout - WebHozz Code","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.webhozz.com\/code\/bootstrap-fluid-layout\/","og_locale":"en_US","og_type":"article","og_title":"Belajar Bootstrap : Fluid Layout - WebHozz Code","og_description":"Membuat Fluid Layout dengan Bootstrap Di Bootstrap kalian dapat menggunakan kelas .container-fluid untuk membuat fluid layout untuk memanfaatkan lebar viewport 100% di semua ukuran perangkat","og_url":"https:\/\/www.webhozz.com\/code\/bootstrap-fluid-layout\/","og_site_name":"WebHozz Code","article_published_time":"2019-08-23T10:57:10+00:00","article_modified_time":"2019-09-03T10:48:14+00:00","og_image":[{"url":"https:\/\/www.tutorialrepublic.com\/lib\/images\/bootstrap-4\/bootstrap-fluid-layout.png","type":"","width":"","height":""}],"author":"admin","twitter_card":"summary_large_image","twitter_misc":{"Written by":"admin","Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.webhozz.com\/code\/bootstrap-fluid-layout\/#article","isPartOf":{"@id":"https:\/\/www.webhozz.com\/code\/bootstrap-fluid-layout\/"},"author":{"name":"admin","@id":"https:\/\/www.webhozz.com\/code\/#\/schema\/person\/3b2b79dc317236b0dde4b1fda37263e1"},"headline":"Bootstrap : Fluid Layout","datePublished":"2019-08-23T10:57:10+00:00","dateModified":"2019-09-03T10:48:14+00:00","mainEntityOfPage":{"@id":"https:\/\/www.webhozz.com\/code\/bootstrap-fluid-layout\/"},"wordCount":93,"image":{"@id":"https:\/\/www.webhozz.com\/code\/bootstrap-fluid-layout\/#primaryimage"},"thumbnailUrl":"https:\/\/www.tutorialrepublic.com\/lib\/images\/bootstrap-4\/bootstrap-fluid-layout.png","articleSection":["Bootstrap"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www.webhozz.com\/code\/bootstrap-fluid-layout\/","url":"https:\/\/www.webhozz.com\/code\/bootstrap-fluid-layout\/","name":"Belajar Bootstrap : Fluid Layout - WebHozz Code","isPartOf":{"@id":"https:\/\/www.webhozz.com\/code\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.webhozz.com\/code\/bootstrap-fluid-layout\/#primaryimage"},"image":{"@id":"https:\/\/www.webhozz.com\/code\/bootstrap-fluid-layout\/#primaryimage"},"thumbnailUrl":"https:\/\/www.tutorialrepublic.com\/lib\/images\/bootstrap-4\/bootstrap-fluid-layout.png","datePublished":"2019-08-23T10:57:10+00:00","dateModified":"2019-09-03T10:48:14+00:00","author":{"@id":"https:\/\/www.webhozz.com\/code\/#\/schema\/person\/3b2b79dc317236b0dde4b1fda37263e1"},"breadcrumb":{"@id":"https:\/\/www.webhozz.com\/code\/bootstrap-fluid-layout\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.webhozz.com\/code\/bootstrap-fluid-layout\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.webhozz.com\/code\/bootstrap-fluid-layout\/#primaryimage","url":"https:\/\/www.tutorialrepublic.com\/lib\/images\/bootstrap-4\/bootstrap-fluid-layout.png","contentUrl":"https:\/\/www.tutorialrepublic.com\/lib\/images\/bootstrap-4\/bootstrap-fluid-layout.png"},{"@type":"BreadcrumbList","@id":"https:\/\/www.webhozz.com\/code\/bootstrap-fluid-layout\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.webhozz.com\/code\/"},{"@type":"ListItem","position":2,"name":"Bootstrap : Fluid Layout"}]},{"@type":"WebSite","@id":"https:\/\/www.webhozz.com\/code\/#website","url":"https:\/\/www.webhozz.com\/code\/","name":"WebHozz Code","description":"Tutorial Web & Pemrograman Indonesia","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.webhozz.com\/code\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/www.webhozz.com\/code\/#\/schema\/person\/3b2b79dc317236b0dde4b1fda37263e1","name":"admin","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/f222cb0ed38f2100d666bb262fd38d4f0d8e5673698208e40ff83118f10a4e8e?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/f222cb0ed38f2100d666bb262fd38d4f0d8e5673698208e40ff83118f10a4e8e?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/f222cb0ed38f2100d666bb262fd38d4f0d8e5673698208e40ff83118f10a4e8e?s=96&d=mm&r=g","caption":"admin"},"url":"https:\/\/www.webhozz.com\/code\/author\/dody\/"}]}},"_links":{"self":[{"href":"https:\/\/www.webhozz.com\/code\/wp-json\/wp\/v2\/posts\/271","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.webhozz.com\/code\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.webhozz.com\/code\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.webhozz.com\/code\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.webhozz.com\/code\/wp-json\/wp\/v2\/comments?post=271"}],"version-history":[{"count":2,"href":"https:\/\/www.webhozz.com\/code\/wp-json\/wp\/v2\/posts\/271\/revisions"}],"predecessor-version":[{"id":341,"href":"https:\/\/www.webhozz.com\/code\/wp-json\/wp\/v2\/posts\/271\/revisions\/341"}],"wp:attachment":[{"href":"https:\/\/www.webhozz.com\/code\/wp-json\/wp\/v2\/media?parent=271"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.webhozz.com\/code\/wp-json\/wp\/v2\/categories?post=271"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.webhozz.com\/code\/wp-json\/wp\/v2\/tags?post=271"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}