Menu
dl list view not working in bootstrap 4 same as it does in bootstrap 3
HTML:
<section class="landing"> <div class="container"> <dl class="dl-horizontal"> <dt>col1</dt> <dd>col2</dd> </dl> </div> </section> 
666
Bootstrap list group is used to create a group of list with list items. The most basic list group is an unordered list containing list items. The class ". list-group" within the <ul> element and the class ".
Add .list-group-flush to remove some borders and rounded corners to render list group items edge-to-edge in a parent container (e.g., cards).
You need to use the class text-center which actually centers the block in the screen using the text-align property within bootstrap css. Hope this helps.
These are the possible reasons: You have a wrong or incorrect link to the bootstrap file. browser caching and history is messing with your html. Other CSS files are overriding the bootstrap file.
I had the same exact problem and solved it using .row class as suggested by @Paulie_D
Here is what I did
<section class="landing"> <div class="container"> <dl class="row"> <dt class="col-sm-3">col1</dt> <dd class="col-sm-9">col2</dd> </dl> </div> </section> UPDATE You can also add text align right and left
<section class="landing"> <div class="container"> <dl class="row"> <dt class="col-sm-3 text-right">col1</dt> <dd class="col-sm-9 text-left">col2</dd> </dl> </div> </section> That class has been removed from Bootstrap in V4.
From the Migration documents of Bootstrap 4
.dl-horizontalhas been dropped. Instead, use.rowon<dl>and use grid column classes (or mixins) on its<dt>and<dd>children.
30
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
