Skip to content
GitLab

Add responsive float classes

Merged Administrator requested to merge responsive-pulls into v4-dev
Compare
and
14 files
+ 53
- 42
do‎cs‎
_inc‎ludes‎
nav-ho‎me.html‎ +2 -2
compo‎nents‎
list-g‎roup.md‎ +3 -3
navb‎ar.md‎ +5 -5
utilit‎ies.md‎ +13 -13
con‎tent‎
imag‎es.md‎ +4 -4
exam‎ples‎
al‎bum‎
index‎.html‎ +1 -1
caro‎usel‎
index‎.html‎ +1 -1
dash‎board‎
index‎.html‎ +2 -2
narrow-j‎umbotron‎
index‎.html‎ +1 -1
nav‎bar‎
index‎.html‎ +1 -1
offc‎anvas‎
index‎.html‎ +1 -1
tooltip-‎viewport‎
index‎.html‎ +2 -2
migrat‎ion.md‎ +5 -0
sc‎ss‎
_utilit‎ies.scss‎ +12 -6
docs/_includes/nav-home.html
+ 2
- 2
<header class="navbar navbar-light navbar-static-top bd-navbar" role="banner">
{% comment %}
<nav class="nav navbar-nav pull-right">
<nav class="nav navbar-nav pull-xs-right">
<div class="nav-item dropdown">
<a class="nav-item nav-link dropdown-toggle" href="#" id="bd-versions" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
v{{ site.current_version }}
@@ -25,7 +25,7 @@
{% endcomment %}
<div class="clearfix">
<button class="navbar-toggler pull-right hidden-sm-up" type="button" data-toggle="collapse" data-target="#bd-main-nav">
<button class="navbar-toggler pull-xs-right hidden-sm-up" type="button" data-toggle="collapse" data-target="#bd-main-nav">
&#9776;
</button>
<a class="navbar-brand hidden-sm-up" href="{{ site.baseurl }}/">
docs/_includes/nav-home.html
+ 2
- 2
<header class="navbar navbar-light navbar-static-top bd-navbar" role="banner">
{% comment %}
<nav class="nav navbar-nav pull-right">
<nav class="nav navbar-nav pull-xs-right">
<div class="nav-item dropdown">
<a class="nav-item nav-link dropdown-toggle" href="#" id="bd-versions" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
v{{ site.current_version }}
@@ -25,7 +25,7 @@
{% endcomment %}
<div class="clearfix">
<button class="navbar-toggler pull-right hidden-sm-up" type="button" data-toggle="collapse" data-target="#bd-main-nav">
<button class="navbar-toggler pull-xs-right hidden-sm-up" type="button" data-toggle="collapse" data-target="#bd-main-nav">
&#9776;
</button>
<a class="navbar-brand hidden-sm-up" href="{{ site.baseurl }}/">
docs/components/list-group.md
+ 3
- 3
@@ -31,15 +31,15 @@ Add labels to any list group item to show unread counts, activity, etc.
{% example html %}
<ul class="list-group">
<li class="list-group-item">
<span class="label label-default label-pill pull-right">14</span>
<span class="label label-default label-pill pull-xs-right">14</span>
Cras justo odio
</li>
<li class="list-group-item">
<span class="label label-default label-pill pull-right">2</span>
<span class="label label-default label-pill pull-xs-right">2</span>
Dapibus ac facilisis in
</li>
<li class="list-group-item">
<span class="label label-default label-pill pull-right">1</span>
<span class="label label-default label-pill pull-xs-right">1</span>
Morbi leo risus
</li>
</ul>
docs/components/navbar.md
+ 5
- 5
@@ -17,7 +17,7 @@ Here's what you need to know before getting started with the navbar:
- Navbars require a wrapping `.navbar` and a [color scheme](#color-schemes).
- Navbars and their contents are fluid by default. Use [optional containers](#containers) to limit their horizontal width.
- Use `.pull-left` and `.pull-right` to quickly align sub-components.
- Use `.pull-*-left` and `.pull-*-right` to quickly align sub-components.
- Ensure accessibility by using a `<nav>` element or, if using a more generic element such as a `<div>`, add a `role="navigation"` to every navbar to explicitly identify it as a landmark region for users of assistive technologies.
## Supported content
@@ -48,7 +48,7 @@ Here's an example of all the sub-components included in a default, light navbar:
<a class="nav-link" href="#">About</a>
</li>
</ul>
<form class="form-inline navbar-form pull-right">
<form class="form-inline navbar-form pull-xs-right">
<input class="form-control" type="text" placeholder="Search">
<button class="btn btn-success-outline" type="submit">Search</button>
</form>
@@ -78,7 +78,7 @@ Here are some examples to show what we mean.
<a class="nav-link" href="#">About</a>
</li>
</ul>
<form class="form-inline navbar-form pull-right">
<form class="form-inline navbar-form pull-xs-right">
<input class="form-control" type="text" placeholder="Search">
<button class="btn btn-info-outline" type="submit">Search</button>
</form>
@@ -99,7 +99,7 @@ Here are some examples to show what we mean.
<a class="nav-link" href="#">About</a>
</li>
</ul>
<form class="form-inline navbar-form pull-right">
<form class="form-inline navbar-form pull-xs-right">
<input class="form-control" type="text" placeholder="Search">
<button class="btn btn-secondary-outline" type="submit">Search</button>
</form>
@@ -120,7 +120,7 @@ Here are some examples to show what we mean.
<a class="nav-link" href="#">About</a>
</li>
</ul>
<form class="form-inline navbar-form pull-right">
<form class="form-inline navbar-form pull-xs-right">
<input class="form-control" type="text" placeholder="Search">
<button class="btn btn-primary-outline" type="submit">Search</button>
</form>
docs/components/utilities.md
+ 13
- 13
@@ -168,25 +168,25 @@ Use a generic close icon for dismissing content like modals and alerts. **Be sur
</button>
{% endexample %}
## Floats
## Responsive floats
Float an element to the left or right with a class. `!important` is included to avoid specificity issues. Classes can also be used as mixins.
These utility classes float an element to the left or right, or disable floating, based on the current viewport size using the [CSS `float` property](https://developer.mozilla.org/en-US/docs/Web/CSS/float). `!important` is included to avoid specificity issues. These use the same viewport width breakpoints as the grid system.
Two similar non-responsive mixins (`pull-left` and `pull-right`) are also available.
{% example html %}
<div class="pull-left">Float left</div>
<div class="pull-right">Float right</div>
<div class="pull-xs-left">Float left on all viewport sizes</div>
<div class="pull-xs-right">Float right on all viewport sizes</div>
<div class="pull-xs-none">Don't float on all viewport sizes</div>
<div class="pull-sm-left">Float left on viewports sized SM (small) or wider</div>
<div class="pull-md-left">Float left on viewports sized MD (medium) or wider</div>
<div class="pull-lg-left">Float left on viewports sized LG (large) or wider</div>
<div class="pull-xl-left">Float left on viewports sized XL (extra-large) or wider</div>
{% endexample %}
{% highlight scss %}
// Classes
.pull-left {
float: left !important;
}
.pull-right {
float: right !important;
}
// Usage as mixins
// Related simple non-responsive mixins
.element {
@include pull-left;
}
docs/content/images.md
+ 4
- 4
@@ -50,13 +50,13 @@ Add classes to an `<img>` element to easily style images in any project.
Align images with the [helper float classes]({{ site.baseurl }}/components/utilities/#floats) or [text alignment classes]({{ site.baseurl }}/components/utilities/#text-alignment). A simple centering class can also be used for `block` level images.
<div class="bd-example bd-example-images">
<img data-src="holder.js/200x200" class="img-rounded pull-left" alt="A generic square placeholder image with rounded corners">
<img data-src="holder.js/200x200" class="img-rounded pull-right" alt="A generic square placeholder image with rounded corners">
<img data-src="holder.js/200x200" class="img-rounded pull-xs-left" alt="A generic square placeholder image with rounded corners">
<img data-src="holder.js/200x200" class="img-rounded pull-xs-right" alt="A generic square placeholder image with rounded corners">
</div>
{% highlight html %}
<img src="..." class="img-rounded pull-left" alt="...">
<img src="..." class="img-rounded pull-right" alt="...">
<img src="..." class="img-rounded pull-xs-left" alt="...">
<img src="..." class="img-rounded pull-xs-right" alt="...">
{% endhighlight %}
<div class="bd-example bd-example-images">
docs/examples/album/index.html
+ 1
- 1
@@ -104,7 +104,7 @@
<footer class="text-muted">
<div class="container">
<p class="pull-right">
<p class="pull-xs-right">
<a href="#">Back to top</a>
</p>
<p>Album example is &copy; Bootstrap, but please download and customize it for yourself!</p>
docs/examples/carousel/index.html
+ 1
- 1
@@ -164,7 +164,7 @@
<!-- FOOTER -->
<footer>
<p class="pull-right"><a href="#">Back to top</a></p>
<p class="pull-xs-right"><a href="#">Back to top</a></p>
<p>&copy; 2014 Company, Inc. &middot; <a href="#">Privacy</a> &middot; <a href="#">Terms</a></p>
</footer>
docs/examples/dashboard/index.html
+ 2
- 2
@@ -29,13 +29,13 @@
</button>
<a class="navbar-brand" href="#">Project name</a>
<div id="navbar">
<nav class="nav navbar-nav pull-left">
<nav class="nav navbar-nav pull-xs-left">
<a class="nav-item nav-link" href="#">Dashboard</a>
<a class="nav-item nav-link" href="#">Settings</a>
<a class="nav-item nav-link" href="#">Profile</a>
<a class="nav-item nav-link" href="#">Help</a>
</nav>
<form class="navbar-form pull-right">
<form class="navbar-form pull-xs-right">
<input type="text" class="form-control" placeholder="Search...">
</form>
</div>
docs/examples/narrow-jumbotron/index.html
+ 1
- 1
@@ -23,7 +23,7 @@
<div class="container">
<div class="header clearfix">
<nav>
<ul class="nav nav-pills pull-right">
<ul class="nav nav-pills pull-xs-right">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
docs/examples/navbar/index.html
+ 1
- 1
@@ -41,7 +41,7 @@
<a class="nav-link" href="#">About</a>
</li>
</ul>
<form class="form-inline navbar-form pull-right">
<form class="form-inline navbar-form pull-xs-right">
<input class="form-control" type="text" placeholder="Search">
<button class="btn btn-success-outline" type="submit">Search</button>
</form>
docs/examples/offcanvas/index.html
+ 1
- 1
@@ -35,7 +35,7 @@
<div class="row row-offcanvas row-offcanvas-right">
<div class="col-xs-12 col-sm-9">
<p class="pull-right hidden-sm-up">
<p class="pull-xs-right hidden-sm-up">
<button type="button" class="btn btn-primary btn-sm" data-toggle="offcanvas">Toggle nav</button>
</p>
<div class="jumbotron">
docs/examples/tooltip-viewport/index.html
+ 2
- 2
@@ -20,7 +20,7 @@
<body>
<button class="btn btn-secondary pull-right tooltip-bottom" title="This should be shifted to the left">Shift Left</button>
<button class="btn btn-secondary pull-xs-right tooltip-bottom" title="This should be shifted to the left">Shift Left</button>
<button class="btn btn-secondary tooltip-bottom" title="This should be shifted to the right">Shift Right</button>
<button class="btn btn-secondary tooltip-right" title="This should be shifted down">Shift Down</button>
@@ -30,7 +30,7 @@
<button class="btn btn-secondary tooltip-viewport-bottom" title="This should be shifted to the left">Shift Left</button>
<button class="btn btn-secondary tooltip-viewport-right" title="This should be shifted down">Shift Down</button>
<button class="btn btn-secondary pull-right tooltip-viewport-bottom" title="This should be shifted to the right">Shift Right</button>
<button class="btn btn-secondary pull-xs-right tooltip-viewport-bottom" title="This should be shifted to the right">Shift Right</button>
<button class="btn btn-secondary tooltip-viewport-right btn-bottom" title="This should be shifted up">Shift Up</button>
</div>