DEV Community

loading...
Cover image for Messaging Layout With Bootstrap and Fontawesome

Messaging Layout With Bootstrap and Fontawesome

takaneichinose profile image Takane Ichinose ・1 min read

This is an example layout for messaging or e-mail.

This layout is created with Bootstrap version 4.5.

I used Fontawesome version 5.14 for the fonts.

Custom CSS is very minimal, this is to ensure the best way (in my opinion) in coding with Bootstrap, without any problem.

The HTML side is written in Pug (To make the coding easier, and shorter), but if you need the HTML, Just compile it into HTML, by clicking on the settings button above the editor.

The table is made with jQuery. In real-word, you may use AJAX to populate the message. Though, you may also populate the table by loading the data using back-end pre-processor, and database.

Discussion

pic
Editor guide