How to place carousel and text side by side bootstrap? - html

Question

I want a carousel to occupy half the page and to be aligned to the right while the text should be aligned to the left of the box.
I am using bootstrap. Here is my html:
.main{
display: flex;
align-items: center;
}
#events{
display: flex;
justify-content: space-evenly ;
}
.card{
border-radius: 5%;
}
#myNavbar{
align-items: center;
}
.impact{
margin: 10px;
}
<div class="main">
<div class="impact">
<span>
IMPACTING THE BANGLADESHI COMMUNITY IN OMAN!
</span>
</div>
<div id="carousel" class="carousel slide impact" data-bs-ride="carousel">
<div class="carousel-inner impact" style="height: 500px;">
<div class="carousel-item active">
<img src="{% static 'social_club/web1.jpg' %}" class="d-block w-100 h-100" alt="">
</div>
<div class="carousel-item">
<img src="{% static 'social_club/web2.jpg' %}" class="d-block w-100" alt="">
</div>
<div class="carousel-item">
<img src="..." class="d-block w-100" alt="..."> </div>
</div>
</div>
</div>
Could someone please tell me how I can make this possible? I have searched quite a lot about making the carousel only occupy half the page, but without results.

Answer 1

If you are using Bootstrap 4 or Bootstrap 5, you have no need to add custom CSS. You can achieve this by using Bootstrap classes. In the following code snippet, I am using Bootstrap 5.
Here is the complete implementation of your code. Please make sure to add closing tags correctly.
Note: Don't add static height to any element for an accurate vertically center alignment effect.
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="main d-flex align-items-center">
<div class="impact w-50">
<span>
IMPACTING THE BANGLADESHI COMMUNITY IN OMAN!
</span>
</div>
<div id="carousel" class="carousel slide impact w-50" data-bs-ride="carousel">
<div class="carousel-inner impact">
<div class="carousel-item active">
<img src="https://blog.getbootstrap.com/assets/img/2020/06/v5-new-logo.png" class="d-block w-100 h-100" alt="">
</div>
<div class="carousel-item">
<img src="https://www.winklix.com/blog/wp-content/uploads/2021/01/f1ce6a0af5cb.jpg.png" class="d-block w-100" alt="">
</div>
<div class="carousel-item">
<img src="https://htmlburger.com/blog/wp-content/uploads/2021/02/lets-talk-about-bootstrap.png" class="d-block w-100" alt="...">
</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js"></script>