No soy partidiario de boostrap, mas cuando uno esta aprendiendo

siento que ese tipo de herramientas, en vez de ayudarte, te perjudican mas para el aprendizaje
hace tiempo creo que respondi una pregunta parecida

¿esto te sirve?
http://codepen.io/elestudiantefantasma/pen/btjpK
Revisa el codigo, analizalo y experimenta con el
cualquier duda o pregunta, comenta