{"id":630,"date":"2026-06-25T14:31:53","date_gmt":"2026-06-25T07:31:53","guid":{"rendered":"https:\/\/www.bisasoftware.id\/2026\/?p=630"},"modified":"2026-06-25T14:31:53","modified_gmt":"2026-06-25T07:31:53","slug":"bab-12-utilities-bootstrap","status":"publish","type":"post","link":"https:\/\/www.bisasoftware.id\/2026\/bab-12-utilities-bootstrap\/","title":{"rendered":"BAB 12 – UTILITIES BOOTSTRAP"},"content":{"rendered":"\n

Tujuan Pembelajaran<\/h2>\n\n\n\n

Peserta mampu:<\/p>\n\n\n\n

    \n
  1. Mengatur margin.<\/li>\n\n\n\n
  2. Mengatur padding.<\/li>\n\n\n\n
  3. Mengatur display.<\/li>\n\n\n\n
  4. Mengatur shadow.<\/li>\n<\/ol>\n\n\n\n
    \n\n\n\n

    A. Margin<\/h1>\n\n\n\n
    m-1
    m-2
    m-3
    m-4
    m-5<\/code><\/pre>\n\n\n\n
    Contoh:<\/p>\n\n\n\n
    <div class=\"m-5\">

    Konten

    <\/div><\/code><\/pre>\n\n\n\n
    \n\n\n\n
    B. Padding<\/h1>\n\n\n\n
    p-1
    p-2
    p-3
    p-4
    p-5<\/code><\/pre>\n\n\n\n
    \n\n\n\n
    Praktik 1<\/h1>\n\n\n\n
    <div class=\"bg-primary text-white p-5\">

    Belajar Bootstrap

    <\/div><\/code><\/pre>\n\n\n\n
    \n\n\n\n
    C. Shadow<\/h1>\n\n\n\n
    shadow-sm

    shadow

    shadow-lg<\/code><\/pre>\n\n\n\n
    \n\n\n\n
    Praktik 2<\/h1>\n\n\n\n
    <div class=\"card shadow-lg\">

    <div class=\"card-body\">

    Card Modern

    <\/div>

    <\/div><\/code><\/pre>\n\n\n\n
    \n\n\n\n
    D. Rounded<\/h1>\n\n\n\n
    rounded

    rounded-circle<\/code><\/pre>\n\n\n\n
    \n\n\n\n
    Praktik 3<\/h1>\n\n\n\n
    Buat card dengan:<\/p>\n\n\n\n
      \n
    • Shadow<\/li>\n\n\n\n
    • Rounded<\/li>\n\n\n\n
    • Padding besar<\/li>\n<\/ul>\n\n\n\n
      \n\n\n\n
      Latihan Bab <\/h1>\n\n\n\n
        \n
      1. Apa fungsi margin?<\/li>\n\n\n\n
      2. Apa fungsi padding?<\/li>\n\n\n\n
      3. Apa fungsi shadow?<\/li>\n\n\n\n
      4. Apa fungsi rounded?<\/li>\n\n\n\n
      5. Apa fungsi utility class?<\/li>\n<\/ol>\n\n\n\n
        \n\n\n\n
        TUGAS<\/h1>\n\n\n\n
        Membuat Company Profile Sekolah<\/h2>\n\n\n\n
        Buat website sekolah menggunakan:<\/p>\n\n\n\n
        Header<\/h3>\n\n\n\n
          \n
        • Nama sekolah<\/li>\n\n\n\n
        • Motto sekolah<\/li>\n<\/ul>\n\n\n\n
          Menu<\/h3>\n\n\n\n
            \n
          • Beranda<\/li>\n\n\n\n
          • Profil<\/li>\n\n\n\n
          • Jurusan<\/li>\n\n\n\n
          • Kontak<\/li>\n<\/ul>\n\n\n\n
            Konten<\/h3>\n\n\n\n
            Gunakan:<\/p>\n\n\n\n
              \n
            • Typography<\/li>\n\n\n\n
            • Warna Bootstrap<\/li>\n\n\n\n
            • Alert<\/li>\n\n\n\n
            • Badge<\/li>\n\n\n\n
            • Card<\/li>\n<\/ul>\n\n\n\n
              Footer<\/h3>\n\n\n\n
              Copyright sekolah<\/p>\n\n\n\n
              \n\n\n\n
              PROYEK PORTOFOLIO MINI<\/h1>\n\n\n\n
              Buat website profil pribadi dengan tampilan:<\/p>\n\n\n\n
              +---------------------+
              | FOTO PROFIL         |
              +---------------------+

              Nama Lengkap

              Programmer Web

              Tentang Saya

              [Hubungi Saya]<\/code><\/pre>\n\n\n\n
              Ketentuan:<\/p>\n\n\n\n
                \n
              • Menggunakan Card<\/li>\n\n\n\n
              • Menggunakan Button<\/li>\n\n\n\n
              • Menggunakan Typography<\/li>\n\n\n\n
              • Menggunakan Shadow<\/li>\n\n\n\n
              • Menggunakan Rounded<\/li>\n\n\n\n
              • Menggunakan Color Utility<\/li>\n<\/ul>\n\n\n\n
                <\/p>\n","protected":false},"excerpt":{"rendered":"
                Tujuan Pembelajaran Peserta mampu: A. Margin Contoh: B. Padding Praktik 1 C. Shadow Praktik 2 D. Rounded Praktik 3 Buat…<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_kadence_starter_templates_imported_post":false,"_kad_post_transparent":"","_kad_post_title":"","_kad_post_layout":"","_kad_post_sidebar_id":"","_kad_post_content_style":"","_kad_post_vertical_padding":"","_kad_post_feature":"","_kad_post_feature_position":"","_kad_post_header":false,"_kad_post_footer":false,"_kad_post_classname":"","footnotes":""},"categories":[20],"tags":[35],"class_list":["post-630","post","type-post","status-publish","format-standard","hentry","category-tutorial-bootstrap","tag-tutorial-bootstrap"],"_links":{"self":[{"href":"https:\/\/www.bisasoftware.id\/2026\/wp-json\/wp\/v2\/posts\/630","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.bisasoftware.id\/2026\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.bisasoftware.id\/2026\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.bisasoftware.id\/2026\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.bisasoftware.id\/2026\/wp-json\/wp\/v2\/comments?post=630"}],"version-history":[{"count":1,"href":"https:\/\/www.bisasoftware.id\/2026\/wp-json\/wp\/v2\/posts\/630\/revisions"}],"predecessor-version":[{"id":631,"href":"https:\/\/www.bisasoftware.id\/2026\/wp-json\/wp\/v2\/posts\/630\/revisions\/631"}],"wp:attachment":[{"href":"https:\/\/www.bisasoftware.id\/2026\/wp-json\/wp\/v2\/media?parent=630"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.bisasoftware.id\/2026\/wp-json\/wp\/v2\/categories?post=630"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.bisasoftware.id\/2026\/wp-json\/wp\/v2\/tags?post=630"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}