CODEWITHSUNDEEP
twitter-bootstrapbootstrap-4
Harsha M V
Harsha M V

Reputation: 54949

How to prevent Bootstrap DD DT to dropping to next line?

I have the following code where the DD DT is on the same line:

<dl class="row">
   <dt class="col-sm-2">Arahat</dt>
   <dd class="col-sm-10">The "Perfected One", who has overcome The Three Poisons of Desire, Hatred and Ignorance. </dd>
   <dt class="col-sm-2">Bodhi</dt>
   <dd class="col-sm-10">Awakened wisdom.</dd>
   <dt class="col-sm-2">Zen</dt>
   <dd class="col-sm-10">Meditative absorption in which all dualistic distinctions are eliminated.</dd>
</dl>

On the mobile screen, it collapses to one below other. How can I prevent that?

enter image description here

How I want it to stay on mobile screen. enter image description here

Upvotes: 0

Views: 74

Answers (1)

Moin Syed
Moin Syed

Reputation: 130

Instead of class="row" use class="dl-horizontal" Also remove col-sm from all DD and DT Tag and use Bootstrap 3

Upvotes: 1

Related Questions