diff options
Diffstat (limited to 'docs/components')
| -rw-r--r-- | docs/components/card.md | 50 | ||||
| -rw-r--r-- | docs/components/list-group.md | 21 | ||||
| -rw-r--r-- | docs/components/navs.md | 10 |
3 files changed, 26 insertions, 55 deletions
diff --git a/docs/components/card.md b/docs/components/card.md index efce231ce..8dfc8c861 100644 --- a/docs/components/card.md +++ b/docs/components/card.md @@ -435,7 +435,7 @@ In need of a colored card, but not the hefty background colors they bring? Repla ## Groups -Use card groups to render cards as a single, attached element with equal width and height columns. By default, card groups use `display: table;` and `table-layout: fixed;` to achieve their uniform sizing. However, enabling [flexbox mode]({{ site.baseurl }}/getting-started/flexbox/) can switch that to use `display: flex;` and provide the same effect. +Use card groups to render cards as a single, attached element with equal width and height columns. Card groups use `display: flex;` to achieve their uniform sizing. Only applies to small devices and above. @@ -474,34 +474,30 @@ Need a set of equal width and height cards that aren't attached to one another? Only applies to small devices and above. -**ProTip!** If you enable [flexbox mode]({{ site.baseurl }}/getting-started/flexbox/), you can remove the `.card-deck-wrapper`. - {% example html %} -<div class="card-deck-wrapper"> - <div class="card-deck"> - <div class="card"> - <img class="card-img-top" data-src="holder.js/100px200/" alt="Card image cap"> - <div class="card-block"> - <h4 class="card-title">Card title</h4> - <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p> - <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p> - </div> +<div class="card-deck"> + <div class="card"> + <img class="card-img-top" data-src="holder.js/100px200/" alt="Card image cap"> + <div class="card-block"> + <h4 class="card-title">Card title</h4> + <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p> + <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p> </div> - <div class="card"> - <img class="card-img-top" data-src="holder.js/100px200/" alt="Card image cap"> - <div class="card-block"> - <h4 class="card-title">Card title</h4> - <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p> - <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p> - </div> + </div> + <div class="card"> + <img class="card-img-top" data-src="holder.js/100px200/" alt="Card image cap"> + <div class="card-block"> + <h4 class="card-title">Card title</h4> + <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p> + <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p> </div> - <div class="card"> - <img class="card-img-top" data-src="holder.js/100px200/" alt="Card image cap"> - <div class="card-block"> - <h4 class="card-title">Card title</h4> - <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p> - <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p> - </div> + </div> + <div class="card"> + <img class="card-img-top" data-src="holder.js/100px200/" alt="Card image cap"> + <div class="card-block"> + <h4 class="card-title">Card title</h4> + <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p> + <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p> </div> </div> </div> @@ -513,8 +509,6 @@ Cards can be organized into [Masonry](http://masonry.desandro.com)-like columns Only applies to small devices and above. -**Heads up!** This is **not available in IE9 and below** as they have no support for the [`column-*` CSS properties](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Columns/Using_multi-column_layouts). - {% example html %} <div class="card-columns"> <div class="card"> diff --git a/docs/components/list-group.md b/docs/components/list-group.md index 8a02f9864..1c1384724 100644 --- a/docs/components/list-group.md +++ b/docs/components/list-group.md @@ -27,26 +27,7 @@ The most basic list group is simply an unordered list with list items, and the p ## Badge -Add badges to any list group item to show unread counts, activity, and more with the help of some utilities. Below we use `.float-right` and `.mt-1` to align the badge to this example's specific needs, but you may need different or additional utilities. - -{% example html %} -<ul class="list-group"> - <li class="list-group-item"> - <span class="badge badge-default badge-pill float-right mt-1">14</span> - Cras justo odio - </li> - <li class="list-group-item"> - <span class="badge badge-default badge-pill float-right mt-1">2</span> - Dapibus ac facilisis in - </li> - <li class="list-group-item"> - <span class="badge badge-default badge-pill float-right mt-1">1</span> - Morbi leo risus - </li> -</ul> -{% endexample %} - -When in flexbox mode, you'll need to rearrange the contents of your list group items. To replicate the right-aligned badges as shown above, use the following example's code. Note the [`flex-items-between` utility class]({{ site.baseurl }}/layout/flexbox-grid/#horizontal-alignment), the badge's placement, and the lack of a float and margin utilities on the badges. +Add badges to any list group item to show unread counts, activity, and more with the help of some utilities. Note the [`flex-items-between` utility class]({{ site.baseurl }}/layout/grid/#horizontal-alignment), the badge's placement, and the lack of a float and margin utilities on the badges. {% highlight html %} <ul class="list-group"> diff --git a/docs/components/navs.md b/docs/components/navs.md index 2db4f4703..3b4b697a6 100644 --- a/docs/components/navs.md +++ b/docs/components/navs.md @@ -212,11 +212,7 @@ Add dropdown menus with a little extra HTML and the [dropdowns JavaScript plugin </ul> {% endexample %} -## Flexbox variations - -When in [flexbox mode]({{ site.baseurl }}/getting-started/flexbox/), tabbed and pilled navigation components gain access to additional nav styles. **These aren't available in default Bootstrap** due to a bug in table styles and responsive behavior. - -### Justified nav +## Justified nav Create equal-width links in a navigation component by adding `.nav-justified` to a `.nav` component. This works with the inline, tab, and pill variants. @@ -277,9 +273,9 @@ And pills, too: </ul> {% endexample %} -### Centered nav +## Centered nav -Using our [flexbox utilities]({{ site.baseurl }}/layout/flexbox-grid/#horizontal-alignment), you can also customize your navigation components to change the alignment of nav items. For example, here are center aligned links on the inline nav component. +Using our [flexbox utilities]({{ site.baseurl }}/layout/grid/#horizontal-alignment), you can also customize your navigation components to change the alignment of nav items. For example, here are center aligned links on the inline nav component. {% example html %} <ul class="nav nav-inline d-flex flex-items-center"> |