Sizing
Easily make an element as wide (relative to its parent) with using the @width="*"
parameter.
Additional Bootstrap extension width options using the @width attribute available at 5% increments.
Width 5%
Width 10%
Width 15%
Width 20%
Width 30%
Width 35%
Width 40%
Width 45%
Width 55%
Width 60%
Width 65%
Width 70%
Width 80%
Width 85%
Width 90%
Width 95%
<p width="5" padding="3" outputclass="bg-cream text-dark">Width 5%</p>
<p width="10" padding="3" outputclass="bg-cream text-dark">Width 10%</p>
<p width="15" padding="3" outputclass="bg-cream text-dark">Width 15%</p>
<p width="20" padding="3" outputclass="bg-cream text-dark">Width 20%</p>
<p width="25" padding="3" outputclass="bg-cream text-dark">Width 25%</p>
<p width="30" padding="3" outputclass="bg-cream text-dark">Width 30%</p>
<p width="35" padding="3" outputclass="bg-cream text-dark">Width 35%</p>
<p width="40" padding="3" outputclass="bg-cream text-dark">Width 40%</p>
<p width="45" padding="3" outputclass="bg-cream text-dark">Width 45%</p>
<p width="50" padding="3" outputclass="bg-cream text-dark">Width 50%</p>
...
<p width="95" padding="3" outputclass="bg-cream text-dark">Width 95%</p><p outputclass="w-5 p-3 bg-cream text-dark">Width 5%</p>
<p outputclass="w-10 p-3 bg-cream text-dark">Width 10%</p>
<p outputclass="w-15 p-3 bg-cream text-dark">Width 15%</p>
<p outputclass="w-20 p-3 bg-cream text-dark">Width 20%</p>
<p outputclass="w-25 p-3 bg-cream text-dark">Width 25%</p>
<p outputclass="w-30 p-3 bg-cream text-dark">Width 30%</p>
<p outputclass="w-35 p-3 bg-cream text-dark">Width 35%</p>
<p outputclass="w-40 p-3 bg-cream text-dark">Width 40%</p>
<p outputclass="w-45 p-3 bg-cream text-dark">Width 45%</p>
<p outputclass="w-50 p-3 bg-cream text-dark">Width 50%</p>
...
<p outputclass="w-95 p-3 bg-cream text-dark">Width 95%</p>