چطور می‌تونم در بوت استرپ 5 محتوا رو توی یک div همزمان به صورت چپ چین و راست چین کنم؟
How can I left-align and right-align content within a div in Bootstrap 5?
سلام من میخوام در بوت استرپ 5 داخل یک div محتوا رو به دو بخش چپ چین و راست چین تقسیم کنم. چطور می‌تونم این کار رو انجام بدم؟
سلام برای اینکه بتونی محتوا رو در بوت استرپ 5 به صورت چپ چین و راست چین داخل یک div تنظیم کنی، می‌تونی از کلاس‌های Flexbox استفاده کنی که بوت استرپ 5 پشتیبانی خوبی ازشون داره. این کار با استفاده از کلاس‌های d-flex, justify-content-between و align-items-center به راحتی انجام می‌شه.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>چپ چین و راست چین</title> <link href="https://stackpath.bootstrapcdn.com/bootstrap/5.3.0/css/bootstrap.min.css" rel="stylesheet"> </head> <body> <div class="container mt-3"> <div class="d-flex justify-content-between align-items-center"> <div>محتوا سمت چپ</div> <div>محتوا سمت راست</div> </div> </div> <script src="https://stackpath.bootstrapcdn.com/bootstrap/5.3.0/js/bootstrap.bundle.min.js"></script> </body> </html>
d-flex برای فعال کردن Flexbox روی div استفاده می‌شه.
justify-content-between فضای بین دو بخش رو به طور مساوی تقسیم می‌کنه، یکی در سمت چپ و اون یکی در سمت راست.align-items-centerمحتوا رو در مرکز ارتفاع div قرار میده.
با استفاده از این روش می‌تونی به راحتی محتوا رو به صورت چپ و راست‌چین در بوت استرپ 5 تنظیم کنی. امیدوارم کمکت کنه! 😊