Make text fit inside a column rounded div

I'm using Bootstrap 5 and dividing a row with two columns next to开发者_开发问答 each other. I'd like to use rounded borders for the left one but I need the content to stay inside the div.

Here is the code:

<div class="row">
        <div class="col-6 rounded-pill border encabezado-clinica">
            <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>

And custom class css at the moment:

.encabezado-clinica {
    shape-outside: margin-box;
}

Here is the result now.

I tried changing the overflow and shape-outside css properties without exit. I would need the rendered text to stay inside the div and then be able to adjust padding. Any ideas on how to do this?

Here your html code with little modification.

<div class="row mx-0">
      <div class="col-6 encabezado-clinica">
        <div class="py-5">
          <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>
 </div>

just write your css like this

.encabezado-clinica {
        border: 1px solid gray;
        border-radius: 50%;
        display: flex;
        justify-content: center;
 }

You must add to radius container: text-align: center; min-width: max-content; padding: 20px 0;.

Try it:

.encabezado-clinica {
  shape-outside: margin-box;
}
.rounded-pill{
  border-radius: 200px;
  text-align: center;
  min-width: max-content;
  padding: 20px 0;
}

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<div class="row">
  <div class="col-6 rounded-pill border encabezado-clinica">
    <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>
</div>