• Contact Us
Selasa, Mei 23, 2023
-18 °c
Teman Ngoding
  • Home
  • Tutorial
    • Laravel
    • Codeigniter
    • PHP
    • Golang
    • Java
    • Javascript
    • React JS
    • SQL
    • Problem Solution
  • Video Tutorial
    • Video Laravel
    • Video Codeigniter
    • C++
    • Video Git
  • Events
  • Berita
  • Donate
  • Indonesia
    • English
No Result
View All Result
Teman Ngoding
  • Home
  • Tutorial
    • Laravel
    • Codeigniter
    • PHP
    • Golang
    • Java
    • Javascript
    • React JS
    • SQL
    • Problem Solution
  • Video Tutorial
    • Video Laravel
    • Video Codeigniter
    • C++
    • Video Git
  • Events
  • Berita
  • Donate
  • Indonesia
    • English
No Result
View All Result
Plugin Install : Cart Icon need WooCommerce plugin to be installed.
Teman Ngoding
No Result
View All Result

Bagaimana menggunakan align-right di Bootstrap 4

admin by admin
April 19, 2022
in Problem Solution, Tutorial
0 0
0
Home Tutorial Problem Solution

This post is also available in: English

Bootstrap adalah kerangka kerja CSS yang digunakan untuk merancang dan menyesuaikan situs yang responsif dan mengutamakan seluler.

Di Bootstrap 4, menyelaraskan elemen ke kanan dapat dicapai dengan menggunakan salah satu kelas berikut:

Menambahkan kelas float-right


Kelas .float-right di Bootstrap menggunakan properti float CSS untuk menempatkan elemen di sebelah kanan. Perhatikan bahwa wadah Bootstrap 4 adalah Flexbox yang dapat mencegah properti float bekerja.

 <p class="float-right">This text is on the right</p>

Menggunakan kelas justify-content-end

Kelas .justify-content-end digunakan pada wadah Flexbox untuk menyelaraskan semua item pada sumbu utama ke kanan. Selalu ingat bahwa wadah yang menggunakan kelas ini harus memiliki properti tampilan yang disetel ke fleksibel. Ini adalah kelas .d-flex di Bootstrap 4.

<div class="justify-content-end">I am using justify-content-end</div>

Menambahkan kelas align-items-right


Kelas .align-items-end digunakan pada wadah Flexbox untuk menyelaraskan semua item di sepanjang sumbu silangnya (yaitu, secara vertikal) ke kanan. Kelas .d-flex diperlukan di sini, dan arah fleksibel wadah induk harus disetel ke kolom.

<div class="align-items-end">
  <div>Item 1</div>
  <div>Item 2</div>
</div>

Menggunakan .align-self-end class


.align-self-end digunakan untuk menyelaraskan satu item dalam Flexbox ke kanan.

<div class="d-flex">
  <div>Item 1</div>
  <div class="align-self-end">Item 2</div>
  <div>Item 3</div>
</div>

Menggunakan kelas teks-kanan

text-right menyelaraskan teks ke kanan pada semua ukuran viewport. Ini sebagian besar digunakan pada elemen sebaris.

<p class="text-right">This text is aligned to the right.</p>

Baca juga tentang cara mengatasi masalah di sini :

Problem Solution

ShareTweetShare
admin

admin

Next Post
Tertarik Jadi Backend Developer? Ketahui 5 Tipsnya di Sini!

Tertarik Jadi Backend Developer? Ketahui 5 Tipsnya di Sini!

Tinggalkan Balasan Batalkan balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *

  • Trending
  • Comments
  • Latest
Tutorial CodeIgniter 4 part 1 ~ RESTful API JWT Authentication

Tutorial CodeIgniter 4 part 1 ~ RESTful API JWT Authentication

Juni 2, 2022
REST API Login dan Register Node.js dengan JWT

REST API Login dan Register Node.js dengan JWT

Juli 28, 2022
Tutorial Codeigniter 4 ~ Login dan Register

Tutorial Codeigniter 4 ~ Login dan Register

Mei 30, 2022
Codeigniter 4 ~ Membuat Notifikasi Menggunakan SweetAlert

Codeigniter 4 ~ Membuat Notifikasi Menggunakan SweetAlert

Juni 8, 2022
Tutorial Codeigniter 4 ~ Login dan Register

Tutorial Codeigniter 4 ~ Login dan Register

5
Rekomendasi tempat belajar pemrograman

Rekomendasi tempat belajar pemrograman

3
Menghilangkan Public dan Index.php dari URL Codeigniter 4

Menghilangkan Public dan Index.php dari URL Codeigniter 4

2
Migration Laravel

Migration Laravel

1
HTML Fundamentals – HTML Basic

HTML Fundamentals – HTML Basic

Mei 19, 2023
Pekerjaan Apa yang Akan Diganti oleh AI?

Pekerjaan Apa yang Akan Diganti oleh AI?

Mei 11, 2023
Programmer Atau Hacker?

Programmer Atau Hacker?

April 6, 2023
PENGENALAN BACKEND DEVELOPER

Pemrograman Backend Developer

April 5, 2023
Teman Ngoding

Teman Ngoding tempat berbagi tutorial pemrograman
Read more

Categories

  • Berita
  • C++
  • Codeigniter
  • Events
  • Flutter
  • Golang
  • Java
  • Javascript
  • Laravel
  • MongoDB
  • News
  • Node JS
  • Pemrograman
  • PHP
  • Problem Solution
  • React JS
  • SQL
  • Tutorial
  • TypeScript
  • TypeScript
  • Video Codeigniter
  • Video Git
  • Video Laravel
  • Video Tutorial

Tags

ajax belajar golang belajar reactjs blog browser seluler Cara mendapatkan Uang dari Blog codeigniter codeigniter 3 codeigniter 4 codeigniter4 embed html Error Handling flutter flutter vs react native golang golang dasar html html basic html dasar infinite scroll javascript javascript tutorial laravel laravel 8 laravel 9 laravel9 load more ajax mongodb nodejs pdf pemrograman ajax pemrograman golang pemrograman php reactjs reactjs tutorial reactjs vs react native rest api rest api codeigniter 4 tutorial codeigniter 4 tutorial golang tutorial javascript tutorial laravel tutorial laravel 8 tutorial nodejs tutorial reactjs

Recent News

HTML Fundamentals – HTML Basic

HTML Fundamentals – HTML Basic

Mei 19, 2023
Pekerjaan Apa yang Akan Diganti oleh AI?

Pekerjaan Apa yang Akan Diganti oleh AI?

Mei 11, 2023

© 2022 Teman Ngoding.

No Result
View All Result
  • Home
  • Tutorial
    • Laravel
    • Codeigniter
    • PHP
    • Golang
    • Java
    • Javascript
    • React JS
    • SQL
    • Problem Solution
  • Video Tutorial
    • Video Laravel
    • Video Codeigniter
    • C++
    • Video Git
  • Events
  • Berita
  • Donate
  • Indonesia
    • English

© 2022 Teman Ngoding.

Login to your account below

Forgotten Password?

Fill the forms bellow to register

All fields are required. Log In

Retrieve your password

Please enter your username or email address to reset your password.

Log In
  • English
  • Indonesia