brandv1.0
Utilities
Data Display
Data Entry
Feedback
Tables
Charts
Maps
Navigation
BEHAVIORAL
Layout
Explore Our Templates 🚀
New
Powerful Svelte-Bootstrap SaaS App Template
Powerful Svelte-Bootstrap SaaS App Template
Admin CRM Application Template
Admin CRM Application Template
Robust Next.js SaaS App Template
Robust Next.js SaaS App Template
Powerful React-Bootstrap SaaS App Template
Powerful React-Bootstrap SaaS App Template
Modern Remix SaaS App Template
Modern Remix SaaS App Template
VueJS-Bootstrap SaaS App Template
VueJS-Bootstrap SaaS App Template
Intuitive Nuxt-Bootstrap SaaS App Template
Intuitive Nuxt-Bootstrap SaaS App Template

Sizing

Easily make an element as wide or as tall with our width and height utilities.

Width in percentage

Set a height of an element in percentage instantly by using the following width utility classes.

Preview
Next
HTML
React
Remix
Vue
Nuxt
Svelte
Classes
Width 25%
Width 50%
Width 75%
Width 100%
Width auto
<div class="w-25 p-2 mb-1 bg-gray-light-4">Width 25%</div>
<div class="w-50 p-2 mb-1 bg-gray-light-4">Width 50%</div>
<div class="w-75 p-2 mb-1 bg-gray-light-4">Width 75%</div>
<div class="w-100 p-2 mb-1 bg-gray-light-4">Width 100%</div>
<div class="w-auto p-2 bg-gray-light-4" >Width auto</div>
import React from 'react';
const WidthInPercent = () => {
  return (
     <>
        <div className="w-25 p-2 mb-2 bg-grey-light-4">Width 25%</div>
        <div className="w-50 p-2 mb-2 bg-grey-light-4">Width 50%</div>
        <div className="w-75 p-2 mb-2 bg-grey-light-4">Width 75%</div>
        <div className="w-100 p-2 mb-2 bg-grey-light-4">Width 100%</div>
        <div className="w-auto p-2 bg-grey-light-4">Width auto</div>
     </>
  );
}
export default WidthInPercent;
import React from 'react';
const WidthInPercent = () => {
  return (
     <>
        <div className="w-25 p-2 mb-2 bg-grey-light-4">Width 25%</div>
        <div className="w-50 p-2 mb-2 bg-grey-light-4">Width 50%</div>
        <div className="w-75 p-2 mb-2 bg-grey-light-4">Width 75%</div>
        <div className="w-100 p-2 mb-2 bg-grey-light-4">Width 100%</div>
        <div className="w-auto p-2 bg-grey-light-4">Width auto</div>
     </>
  );
}
export default WidthInPercent;
<template>
    <div class="w-25 p-2 mb-1 bg-grey-light-4">Width 25%</div>
    <div class="w-50 p-2 mb-1 bg-grey-light-4">Width 50%</div>
    <div class="w-75 p-2 mb-1 bg-grey-light-4">Width 75%</div>
    <div class="w-100 p-2 mb-1 bg-grey-light-4">Width 100%</div>
    <div class="w-auto p-2 bg-grey-light-4" >Width auto</div>
</template>
<template>
    <div class="w-25 p-2 mb-1 bg-grey-light-4">Width 25%</div>
    <div class="w-50 p-2 mb-1 bg-grey-light-4">Width 50%</div>
    <div class="w-75 p-2 mb-1 bg-grey-light-4">Width 75%</div>
    <div class="w-100 p-2 mb-1 bg-grey-light-4">Width 100%</div>
    <div class="w-auto p-2 bg-grey-light-4" >Width auto</div>
</template>
<div>
    <div class="w-25 p-2 mb-1 bg-grey-light-4">Width 25%</div>
    <div class="w-50 p-2 mb-1 bg-grey-light-4">Width 50%</div>
    <div class="w-75 p-2 mb-1 bg-grey-light-4">Width 75%</div>
    <div class="w-100 p-2 mb-1 bg-grey-light-4">Width 100%</div>
    <div class="w-auto p-2 bg-grey-light-4" >Width auto</div>
</div>
Fixed width

Set a width of an element in pixels instantly by using the following width utility classes.

Preview
Next
HTML
React
Remix
Vue
Nuxt
Svelte
Classes
75px
100px
150px
<div class="w-25 p-2 mb-1 bg-gray-light-4">Width 25%</div>
<div class="w-50 p-2 mb-1 bg-gray-light-4">Width 50%</div>
<div class="w-75 p-2 mb-1 bg-gray-light-4">Width 75%</div>
<div class="w-100 p-2 mb-1 bg-gray-light-4">Width 100%</div>
<div class="w-auto p-2 bg-gray-light-4" >Width auto</div>
import React from 'react';
const WidthInPercent = () => {
  return (
     <>
        <div className="w-25 p-2 mb-2 bg-grey-light-4">Width 25%</div>
        <div className="w-50 p-2 mb-2 bg-grey-light-4">Width 50%</div>
        <div className="w-75 p-2 mb-2 bg-grey-light-4">Width 75%</div>
        <div className="w-100 p-2 mb-2 bg-grey-light-4">Width 100%</div>
        <div className="w-auto p-2 bg-grey-light-4">Width auto</div>
     </>
  );
}
export default WidthInPercent;
import React from 'react';
const WidthInPercent = () => {
  return (
     <>
        <div className="w-25 p-2 mb-2 bg-grey-light-4">Width 25%</div>
        <div className="w-50 p-2 mb-2 bg-grey-light-4">Width 50%</div>
        <div className="w-75 p-2 mb-2 bg-grey-light-4">Width 75%</div>
        <div className="w-100 p-2 mb-2 bg-grey-light-4">Width 100%</div>
        <div className="w-auto p-2 bg-grey-light-4">Width auto</div>
     </>
  );
}
export default WidthInPercent;
<template>
    <div class="w-25 p-2 mb-1 bg-grey-light-4">Width 25%</div>
    <div class="w-50 p-2 mb-1 bg-grey-light-4">Width 50%</div>
    <div class="w-75 p-2 mb-1 bg-grey-light-4">Width 75%</div>
    <div class="w-100 p-2 mb-1 bg-grey-light-4">Width 100%</div>
    <div class="w-auto p-2 bg-grey-light-4" >Width auto</div>
</template>
<template>
    <div class="w-25 p-2 mb-1 bg-grey-light-4">Width 25%</div>
    <div class="w-50 p-2 mb-1 bg-grey-light-4">Width 50%</div>
    <div class="w-75 p-2 mb-1 bg-grey-light-4">Width 75%</div>
    <div class="w-100 p-2 mb-1 bg-grey-light-4">Width 100%</div>
    <div class="w-auto p-2 bg-grey-light-4" >Width auto</div>
</template>
<div>
    <div class="w-25 p-2 mb-1 bg-grey-light-4">Width 25%</div>
    <div class="w-50 p-2 mb-1 bg-grey-light-4">Width 50%</div>
    <div class="w-75 p-2 mb-1 bg-grey-light-4">Width 75%</div>
    <div class="w-100 p-2 mb-1 bg-grey-light-4">Width 100%</div>
    <div class="w-auto p-2 bg-grey-light-4" >Width auto</div>
</div>
Height in percentage

Set a height of an element in percentage instantly by using the following height utility classes.

Preview
Next
HTML
React
Remix
Vue
Nuxt
Svelte
Classes
auto
25%
50%
75%
100%
<div class="w-25 p-2 mb-1 bg-gray-light-4">Width 25%</div>
<div class="w-50 p-2 mb-1 bg-gray-light-4">Width 50%</div>
<div class="w-75 p-2 mb-1 bg-gray-light-4">Width 75%</div>
<div class="w-100 p-2 mb-1 bg-gray-light-4">Width 100%</div>
<div class="w-auto p-2 bg-gray-light-4" >Width auto</div>
import React from 'react';
const WidthInPercent = () => {
  return (
     <>
        <div className="w-25 p-2 mb-2 bg-grey-light-4">Width 25%</div>
        <div className="w-50 p-2 mb-2 bg-grey-light-4">Width 50%</div>
        <div className="w-75 p-2 mb-2 bg-grey-light-4">Width 75%</div>
        <div className="w-100 p-2 mb-2 bg-grey-light-4">Width 100%</div>
        <div className="w-auto p-2 bg-grey-light-4">Width auto</div>
     </>
  );
}
export default WidthInPercent;
import React from 'react';
const WidthInPercent = () => {
  return (
     <>
        <div className="w-25 p-2 mb-2 bg-grey-light-4">Width 25%</div>
        <div className="w-50 p-2 mb-2 bg-grey-light-4">Width 50%</div>
        <div className="w-75 p-2 mb-2 bg-grey-light-4">Width 75%</div>
        <div className="w-100 p-2 mb-2 bg-grey-light-4">Width 100%</div>
        <div className="w-auto p-2 bg-grey-light-4">Width auto</div>
     </>
  );
}
export default WidthInPercent;
<template>
    <div class="w-25 p-2 mb-1 bg-grey-light-4">Width 25%</div>
    <div class="w-50 p-2 mb-1 bg-grey-light-4">Width 50%</div>
    <div class="w-75 p-2 mb-1 bg-grey-light-4">Width 75%</div>
    <div class="w-100 p-2 mb-1 bg-grey-light-4">Width 100%</div>
    <div class="w-auto p-2 bg-grey-light-4" >Width auto</div>
</template>
<template>
    <div class="w-25 p-2 mb-1 bg-grey-light-4">Width 25%</div>
    <div class="w-50 p-2 mb-1 bg-grey-light-4">Width 50%</div>
    <div class="w-75 p-2 mb-1 bg-grey-light-4">Width 75%</div>
    <div class="w-100 p-2 mb-1 bg-grey-light-4">Width 100%</div>
    <div class="w-auto p-2 bg-grey-light-4" >Width auto</div>
</template>
<div>
    <div class="w-25 p-2 mb-1 bg-grey-light-4">Width 25%</div>
    <div class="w-50 p-2 mb-1 bg-grey-light-4">Width 50%</div>
    <div class="w-75 p-2 mb-1 bg-grey-light-4">Width 75%</div>
    <div class="w-100 p-2 mb-1 bg-grey-light-4">Width 100%</div>
    <div class="w-auto p-2 bg-grey-light-4" >Width auto</div>
</div>
Fixed height

Set a height of an element in pixels instantly by using the following height utility classes.

Preview
Next
HTML
React
Remix
Vue
Nuxt
Svelte
Classes
50px
75px
100px
150px
<div class="w-25 p-2 mb-1 bg-gray-light-4">Width 25%</div>
<div class="w-50 p-2 mb-1 bg-gray-light-4">Width 50%</div>
<div class="w-75 p-2 mb-1 bg-gray-light-4">Width 75%</div>
<div class="w-100 p-2 mb-1 bg-gray-light-4">Width 100%</div>
<div class="w-auto p-2 bg-gray-light-4" >Width auto</div>
import React from 'react';
const WidthInPercent = () => {
  return (
     <>
        <div className="w-25 p-2 mb-2 bg-grey-light-4">Width 25%</div>
        <div className="w-50 p-2 mb-2 bg-grey-light-4">Width 50%</div>
        <div className="w-75 p-2 mb-2 bg-grey-light-4">Width 75%</div>
        <div className="w-100 p-2 mb-2 bg-grey-light-4">Width 100%</div>
        <div className="w-auto p-2 bg-grey-light-4">Width auto</div>
     </>
  );
}
export default WidthInPercent;
import React from 'react';
const WidthInPercent = () => {
  return (
     <>
        <div className="w-25 p-2 mb-2 bg-grey-light-4">Width 25%</div>
        <div className="w-50 p-2 mb-2 bg-grey-light-4">Width 50%</div>
        <div className="w-75 p-2 mb-2 bg-grey-light-4">Width 75%</div>
        <div className="w-100 p-2 mb-2 bg-grey-light-4">Width 100%</div>
        <div className="w-auto p-2 bg-grey-light-4">Width auto</div>
     </>
  );
}
export default WidthInPercent;
<template>
    <div class="w-25 p-2 mb-1 bg-grey-light-4">Width 25%</div>
    <div class="w-50 p-2 mb-1 bg-grey-light-4">Width 50%</div>
    <div class="w-75 p-2 mb-1 bg-grey-light-4">Width 75%</div>
    <div class="w-100 p-2 mb-1 bg-grey-light-4">Width 100%</div>
    <div class="w-auto p-2 bg-grey-light-4" >Width auto</div>
</template>
<template>
    <div class="w-25 p-2 mb-1 bg-grey-light-4">Width 25%</div>
    <div class="w-50 p-2 mb-1 bg-grey-light-4">Width 50%</div>
    <div class="w-75 p-2 mb-1 bg-grey-light-4">Width 75%</div>
    <div class="w-100 p-2 mb-1 bg-grey-light-4">Width 100%</div>
    <div class="w-auto p-2 bg-grey-light-4" >Width auto</div>
</template>
<div>
    <div class="w-25 p-2 mb-1 bg-grey-light-4">Width 25%</div>
    <div class="w-50 p-2 mb-1 bg-grey-light-4">Width 50%</div>
    <div class="w-75 p-2 mb-1 bg-grey-light-4">Width 75%</div>
    <div class="w-100 p-2 mb-1 bg-grey-light-4">Width 100%</div>
    <div class="w-auto p-2 bg-grey-light-4" >Width auto</div>
</div>
Equal Height & Width

Easily make an element of equal height & width using the following utility classes.

Preview
Next
HTML
React
Remix
Vue
Nuxt
Svelte
Classes
d-8
d-10
d-16
<div class="w-25 p-2 mb-1 bg-gray-light-4">Width 25%</div>
<div class="w-50 p-2 mb-1 bg-gray-light-4">Width 50%</div>
<div class="w-75 p-2 mb-1 bg-gray-light-4">Width 75%</div>
<div class="w-100 p-2 mb-1 bg-gray-light-4">Width 100%</div>
<div class="w-auto p-2 bg-gray-light-4" >Width auto</div>
import React from 'react';
const WidthInPercent = () => {
  return (
     <>
        <div className="w-25 p-2 mb-2 bg-grey-light-4">Width 25%</div>
        <div className="w-50 p-2 mb-2 bg-grey-light-4">Width 50%</div>
        <div className="w-75 p-2 mb-2 bg-grey-light-4">Width 75%</div>
        <div className="w-100 p-2 mb-2 bg-grey-light-4">Width 100%</div>
        <div className="w-auto p-2 bg-grey-light-4">Width auto</div>
     </>
  );
}
export default WidthInPercent;
import React from 'react';
const WidthInPercent = () => {
  return (
     <>
        <div className="w-25 p-2 mb-2 bg-grey-light-4">Width 25%</div>
        <div className="w-50 p-2 mb-2 bg-grey-light-4">Width 50%</div>
        <div className="w-75 p-2 mb-2 bg-grey-light-4">Width 75%</div>
        <div className="w-100 p-2 mb-2 bg-grey-light-4">Width 100%</div>
        <div className="w-auto p-2 bg-grey-light-4">Width auto</div>
     </>
  );
}
export default WidthInPercent;
<template>
    <div class="w-25 p-2 mb-1 bg-grey-light-4">Width 25%</div>
    <div class="w-50 p-2 mb-1 bg-grey-light-4">Width 50%</div>
    <div class="w-75 p-2 mb-1 bg-grey-light-4">Width 75%</div>
    <div class="w-100 p-2 mb-1 bg-grey-light-4">Width 100%</div>
    <div class="w-auto p-2 bg-grey-light-4" >Width auto</div>
</template>
<template>
    <div class="w-25 p-2 mb-1 bg-grey-light-4">Width 25%</div>
    <div class="w-50 p-2 mb-1 bg-grey-light-4">Width 50%</div>
    <div class="w-75 p-2 mb-1 bg-grey-light-4">Width 75%</div>
    <div class="w-100 p-2 mb-1 bg-grey-light-4">Width 100%</div>
    <div class="w-auto p-2 bg-grey-light-4" >Width auto</div>
</template>
<div>
    <div class="w-25 p-2 mb-1 bg-grey-light-4">Width 25%</div>
    <div class="w-50 p-2 mb-1 bg-grey-light-4">Width 50%</div>
    <div class="w-75 p-2 mb-1 bg-grey-light-4">Width 75%</div>
    <div class="w-100 p-2 mb-1 bg-grey-light-4">Width 100%</div>
    <div class="w-auto p-2 bg-grey-light-4" >Width auto</div>
</div>
Jump to