CODEWITHSUNDEEP
csstwitter-bootstrapbootstrap-4
HAYMbl4
HAYMbl4

Reputation: 1470

Header text outside of the accordion

I try to use an accordion component from Bootstrap 4 library. It's work fine. But if header will contain a vary long title like this:

<div class="accordion" id="accordionExample">
  <div class="card">
    <div class="card-header" id="headingOne">
      <h5 class="mb-0">
        <button class="btn btn-link" type="button" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cumque debitis aliquid numquam iure saepe eum, unde hic eligendi quisquam, neque dolorem officia magnam. Aut recusandae ipsam doloribus, cumque alias eum.
        </button>
      </h5>
    </div>

    ...

</div>

It goes out of the container boundary.

enter image description here

How can I trahsfer text to a new line?

I cut example to JSFiddle

Upvotes: 1

Views: 382

Answers (1)

Gautam Naik
Gautam Naik

Reputation: 9348

Add 

.card button{
  white-space:normal;
}

to your css

You are getting that issue because, the the button style contains white-space:nowrap

You need to override it by adding above css

JSFiddle Link

Upvotes: 3

Related Questions