This post will explain about creating new master page for SharePoint Online, same logic is applicable for SharePoint 2013 and 2016.

There are various ways we can create custom master page for SharePoint, here I’m going to convert bootstrap HTML template to SharePoint mater page, hope you know that the bootstrap templates can change design based on the screen size, so these templates design are called responsive design.

You can download any HTML template from web; you will can zipped file then extract all files,

Navigate to SharePoint admin center https://<tenant name>-admin.sharepoint.com

In the site collection tab click new and select Private or Public site collection

Fill all the required details and select Publishing Portal template under Publishing tab

Once the site collection is created, open the site in the browser and SharePoint Designer 2013.
Once site is opened in the SharePoint Designer 2013, navigate to All files  _catalogs  masterpage

And copy and paste all the downloaded html template files like image, css, script folders and HTML file etc,.
Go back to the browser and click the gear button which is located on top right of the SharePoint page and select Design Manager.

On the design manager click edit master pages and click “Convert an HTML file to a SharePoint master page”

On the dialog popup select you pasted HTML page and click Insert

now open SharePoint designer 2013 and find the newly created master page, you can find two files, in that edit the HTML extension and remove the center content(layout section contents) and find below highlighted code and cut and paste into the layout section.

Then publish the newly added master page in Design Manager or SharePoint design manager

After publishing, go to the site settings and click master pages link under look on feel, select newly added master page in site master page drop down list and click OK to apply the new master page.

And to finish it off  you will need to create a page layout and we are done!!

To create the page layout for the center content please click the below link and go ahead.

we have to create page layout for centre content which we removed from master page, check this URL for How to create SharePoint Page layout. 

Please feel free to let me know if you have any queries in the comments section,I’m happy to help you!!

Happy coding!!