A
Anonymous

Student Management Dashboard - Copy this Html, Bootstrap Component to your project

Create an admin panel interface for managing student information, with a focus on user-friendly design and clear organization. Position the institution logo on the top-left with the name 'IIIT Bhagalpur' beside it. In the header, centered at the top, place a button labeled 'Role' to indicate the user role (e.g., Admin), and on the top-right corner, add buttons for 'Help & Support' and 'Log Out' for easy access. In the main area, prominently display the title 'Student Info' at the top of the section. Just below, create a 'Search for students' area with two subsections: 'Search by List' and 'Specific Search.' For the Search by List section: Position it as the upper left area within the 'Search for students' box. Arrange the following dropdown fields horizontally for a clear, organized look: Class Dropdown: On the far left, with options to select different classes. Year Dropdown: Next to the Class dropdown, for selecting academic years. Address Dropdown: Next to Year, allowing filtering based on address or locality. Add an 'Apply' button positioned to the right of the Address dropdown. This button should be visually distinct (e.g., colored yellow or orange) to make it easily clickable and prominent for users to apply their selected filters. Ensure dropdowns have clear, descriptive placeholder text (e.g., 'Select Class') to guide users on each filter's purpose. For the Specific Search section: Position this below 'Search by List,' aligned to the left. Include a text field for 'Enter StudentCode' to allow direct input for individual student lookup. This field should be wide enough to accommodate typical student codes. Beside the text field, place dropdowns labeled 'Major' and 'Faculty' for additional filtering options by academic major and faculty. Add a 'Search' button on the right side of this section, designed with a distinct color (matching the 'Apply' button) to encourage user engagement. Below the search area, place a Student Data Table spanning the full width of the panel, displaying columns for 'StudentCode,' 'First Name,' 'Last Name,' 'Date of Birth,' 'Gender,' 'Phone,' 'Email,' 'Course,' 'Batch,' 'Fee Status,' 'Registration,' and 'Verification.' Include a checkbox column on the far left for selecting individual rows, with rows populated with sample data. At the top of the table, position three action buttons—Add, Delete, and Update—arranged in a row above the table for managing records. Design these buttons with ample spacing for accessibility and easy clicking. Below the table, add Pagination Controls centered at the bottom, with 'Prev Page' and 'Next Page' options, along with a page indicator (e.g., 'Page 1/10'). Finally, at the very bottom of the screen, place buttons for Export and Import, each in a distinct color or design to stand out, allowing users to handle bulk data export and import via Excel files. The overall UI should have a clean, professional design with generous whitespace, clear labels, and intuitive button placements to enhance navigation and usability

Prompt
Component Preview

About

Student Management Dashboard - Manage student info with filters, data tables, and action buttons. Built with HTML and Bootstrap. Get component free!

Share

Last updated 1 month ago