Sharing same content across multiple html pages | SoloLearn: Learn to code for FREE!


Sharing same content across multiple html pages

I am developing a website using bootstrap, for maintainance purpose is there a way i can include common bootstrap files or common header and footers across all html pages, without rewriting or copying and pasting in each pages

12/21/2019 2:51:58 PM

BlackRose Mike

14 Answers

New Answer


Tutorial here:


Thống Nguyễn and Emmanuel Joshua can i achieve this using J's


Thống Nguyễn then i have to convert my extension to .php if i intend to use php includes ?? WhyFry thankx foe listing out this serverside ways to doing this Sergei Romanov thankx too. Im working with php for backend so i should go with php then


Thankx was looking for a JavaScript but thankx anyways


You will need a server side language to achieve this. E.g. PHP If you have a folder that stores all the files you want to add (includes), you can add this to the desired pages: if(file_exists("/includes/header.php")){ require("/includes/header.php"); } Adding the above to the top of a page will pull in all the contents inside header.php. The same can be used for footer. So, you simply edit one file instead of multiple files.


Hi, what about vue.js templates? Or angular. Maybe they can do it. Or some server side framework/language. I would recommend Django.


Did you hear about SPA? Single page application. Use Angular


BlackRose Mike basically yes, just turn your header - footer into a variable then print out any where you want then if you want some change, simply edit the declaration. Some thing like this: <!DOCTYPE html> <html> <head> <title>Page Title</title> <script> var header = "<h1>This is my header</h1>"; </script> </head> <body> <script> document.write(header); </script> </body> </html> But the best way is using a special delicated for this purpose language like PHP....


BlackRose Mike Yes, no need any special convert. Just simply change your file name from *.html to *.php. (It's very simple) Please watch the youtube tutorial above for more detail!


Ko Kyaw Give answer regarding to question. I saw you just joined but before knowing anything don't post anywhere if there is no relationship with that problem.


I have done this with jquey.load. It takes some logic and structuring but I think it can be very flexible and quite easy to do simple stuff.