I am currently working with Bootstrap 5 and I have a row with two columns positioned next to each other. My goal is to apply rounded borders to the left column while ensuring that the content remains within the div.
Below is the code snippet:
<div class="row">
<div class="col-6 rounded-pill border clinic-header">
<div class="col-md-12 p-2">
<h2>{{clinic.name}}</h2>
<h5><img src="{% static 'img/icons/hospital.svg' %}">{{clinic.get_speciality_display}}</h5>
<h5><img src="{% static 'img/icons/geo-alt.svg' %}">{{clinic.full_address}}</h5>
<h5><img src="{% static 'img/icons/train-front.svg' %}">{{clinic.train_access}}</h5>
<h5><img src="{% static 'img/icons/bus-front.svg' %}">{{clinic.bus_access}}</h5>
<h5><img src="{% static 'img/icons/p-square.svg' %}">{{clinic.parking}}</h5>
<h5><img src="{% static 'img/icons/telephone.svg' %}">{{clinic.phone_number}}</h5>
</div>
</div>
Here is the custom CSS class being used:
.clinic-header {
shape-outside: margin-box;
}
You can view the current result here.
I have experimented with adjusting the overflow and shape-outside properties in the CSS, but have not been successful in keeping the text inside the div and adjusting padding accordingly. Any suggestions on how this can be achieved?