Responsive design for every phone and every monitor: how UTI looks on any screen

Most visitors arrive on a phone — we design mobile-first

Applicants check courses on the bus. Parents read notices after work. Teachers mark attendance from a phone between classes. Uttara Technical Institute’s interface starts with small screens and scales up — not the other way around.

Breakpoints that cover real devices worldwide

Layouts adapt across common widths: compact phones near 320–430px, large phones and small tablets around 768px, laptops at 1024–1280px, and wide monitors at 1440px and beyond. Tables become cards. Side navigation collapses into touch menus. Long forms stack vertically with generous tap targets.

• Public phone bottom navigation: Home, Courses, Departments, Admission, Account — thumb-reachable on small screens.
• Desktop navigation stays in the header — bottom bar never appears on large monitors.
• Finance and academic tables offer horizontal scroll or card fallbacks instead of crushing columns.

Dark mode and light mode for any environment

Bright classrooms, dim dorm rooms, and outdoor glare all affect readability. Users can switch Sun/Moon themes; contrast tokens keep text legible in both modes across public pages, login, and portals.

Performance on modest hardware

Many students use budget Android devices. We avoid unnecessary client bloat, compress assets, and server-render institute pages so first paint stays fast even on slower networks common in Bangladesh.

Try it on your own device

1. Open uttaratechnicalinstitute.com on your phone and switch to Bangla.
2. Rotate to landscape — course grids reflow without broken layouts.
3. On desktop, widen the window — content uses available space without unreadable line lengths.

Visit the homepage

Start your admission journey