screen design using Bootstrap

Question

Hi Team, I need to design a screen with lots of controls using Bootstrap. First row I have 4 controls (2labels and 2 text boxes) and second row I have 9 controls (7 checkbox's and 2 dropdown lists). Pls suggest how to proceed with the design. I also have few more rows with lots of control and I would like to do it myself once I am good with the first two rows. Many thanks in advance, Regards,

Rijwan Ansari · Answer

Better first, you can do wireframe and then get idea from grid system in bootstrap. You can share wire-frame in this forum.

Rijwan Ansari · Answer

You can easily do with Bootstrap grid system. https://www.w3schools.com/bootstrap/bootstrap_grid_system.asp

Sachin Singh · Answer

user interface is something which takes huge practise, you will need to learn positioning (float, Flex) , though bootstrap grid is based on Flex but yet will need to write custom css and media queries. after designing run it and press ctrl+shift+I in google chrome then inspect each element and do some calculation of margin and padding right there on the developer tool, soon you will start understanding how browser renders elements.

Satya Karki · Answer

Hi, You can achieve through grid system of bootstrap; https://getbootstrap.com/docs/5.0/layout/grid/

Susan Murray · Answer

I support the idea of Rijwan Ansari. I was also recommended

screen design using Bootstrap

Answers (5)