Make text fit inside a column rounded div-CodePudding

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 >
        <div >
            <div >
                <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?

CodePudding user response：

Here your html code with little modification.

<div >
      <div >
        <div >
          <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;
 }

CodePudding user response：

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/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA 058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<div >
  <div >
    <div >
      <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>