twbs--bootstrap/docs/utilities/sizing-and-positioning.md

1.9 KiB

layout title group
docs Sizing and positioning utilities

Fixed positioning

The .pos-f-t class can be used to easily position elements at the top of the viewport and make them as wide as the viewport. Be sure you understand the ramifications of fixed-position elements within your project. Here's how the class is defined:

{% highlight scss %} .pos-f-t { position: fixed; top: 0; right: 0; left: 0; z-index: $zindex-navbar-fixed; } {% endhighlight %}

Width and height

Easily make an element as wide or as tall (relative to its parent) with our width and height utilities. Includes support for 25%, 50%, 75%, and 100%.

{% example html %}

Width 25%
Width 50%
Width 75%
Width 100%
{% endexample %}

{% example html %}

Height 25%
Height 50%
Height 75%
Height 100%
{% endexample %}

You can also use max-width: 100%; and max-height: 100%; utilities as needed.

{% example html %} Max-width 100% {% endexample %}

{% example html %}

Max-height 100%
{% endexample %}