From b1623c44290b414b656bb4d9e3baaaa3093bda8f Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sun, 29 Oct 2017 15:14:10 -0700 Subject: Add `.modal-dialog-centered` for optional vertically centered modal (#24510) * Add .modal-dialog-centered for optional vertically cenetered modal Fixes #23638 * adds modal-dialog-centered class to docs and removes margin to avoid generating a vertical scrolling * mention limitations * fix aria attr * Add `width: 100%` to the .modal-content for the centered version. Adding it here to avoid adding another selector by limiting it to the centered modal modifier. --- docs/4.0/components/modal.md | 58 ++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 58 insertions(+) (limited to 'docs') diff --git a/docs/4.0/components/modal.md b/docs/4.0/components/modal.md index c4191b83d..b9ebc4ad4 100644 --- a/docs/4.0/components/modal.md +++ b/docs/4.0/components/modal.md @@ -208,6 +208,64 @@ When modals become too long for the user's viewport or device, they scroll indep {% endhighlight %} +### Vertically centered + +Add `.modal-dialog-centered` to `.modal-dialog` to vertically center the modal. **Do not use this with long modals**—it will overflow the viewport and potentially hide parts of your modal. + + + +
+ +
+ +{% highlight html %} + + + + + +{% endhighlight %} + ### Tooltips and popovers [Tooltips]({{ site.baseurl }}/docs/{{ site.docs_version }}/components/tooltips/) and [popovers]({{ site.baseurl }}/docs/{{ site.docs_version }}/components/popovers/) can be placed within modals as needed. When modals are closed, any tooltips and popovers within are also automatically dismissed. -- cgit v1.2.3 From e454c8ec1e5197d959baf48fb089719bf900fb2a Mon Sep 17 00:00:00 2001 From: Johann-S Date: Sun, 29 Oct 2017 23:29:13 +0100 Subject: Add dropright and dropleft (right and left placements for our dropdown) (#23860) * Add dropright (right placement for our dropdown) * Add dropleft * moves drop left arrow to the left --- docs/4.0/components/dropdowns.md | 126 +++++++++++++++++++++++++++++++++++++++ 1 file changed, 126 insertions(+) (limited to 'docs') diff --git a/docs/4.0/components/dropdowns.md b/docs/4.0/components/dropdowns.md index c4ada2b0f..cb307550d 100644 --- a/docs/4.0/components/dropdowns.md +++ b/docs/4.0/components/dropdowns.md @@ -410,6 +410,132 @@ Trigger dropdown menus above elements by adding `.dropup` to the parent element. {% endhighlight %} +## Dropright variation + +Trigger dropdown menus at the right of the elements by adding `.dropright` to the parent element. + +
+
+ +
+ Action + Another action + Something else here +
+ Separated link +
+
+ +
+ + +
+ Action + Another action + Something else here +
+ Separated link +
+
+
+ +{% highlight html %} + +
+ + +
+ +
+
+ + +
+ + +
+ +
+
+{% endhighlight %} + +## Dropleft variation + +Trigger dropdown menus at the left of the elements by adding `.dropleft` to the parent element. + +
+
+ +
+ Action + Another action + Something else here +
+ Separated link +
+
+ +
+
+ +
+ Action + Another action + Something else here +
+ Separated link +
+
+ +
+
+ +{% highlight html %} + +
+ +
+ +
+
+ + +
+
+ +
+ +
+
+ +
+{% endhighlight %} + + ## Menu items Historically dropdown menu contents *had* to be links, but that's no longer the case with v4. Now you can optionally use `