Normal HTML to a Bootstap Version


The docs are the place to start and the grid system is clearly explained and documented here. Just grab some of their starter templates and play around until you become familiar with the rules and the code.

You must follow the rules exactly and you must have a good grasp of html and css before stepping into bootstrap or you will soon get overwhelmed.

For a small layout like you have constructed then bootstrap is overkill however if you are just doing it for practice then go ahead. Its just a matter of grouping rows and columns together in the right order with the right pre defined classes.

You have made a beginners fundamental mistake in your layout in that you have absolutely placed the right column and this will never work in a real site because you can never be sure that the content in the right column is never going to be taller than the main column because when it does it will simply overlap the footer.

You will virtually never use absolute positioning for columns. Bootstrap uses floats which is in itself already outdated but the newer versions of bootstrap allow flexbox which is a step in the right direction but again a slightly flawed approach as flexbox shouldn’t really be used for everything,

If you still want to learn bootstrap then I suggest you have a go on your own first and then ask questions when you get stuck and have something to show us.:slight_smile: