Once you complete this tutorial you can enhance it my adding additional CSS styles to trump the default Bootstrap styles by adding new rules in the custom_styles.css file.
Below are some recommended things you can do:
- Make any image you want to be responsive by adding an .img-responsive class to the <img> tag. This class will cause the image to scale to the parent element. This class applies the rules of max-width:100% and height: auto to an image:
<img class="img-responsisve src="myimage.jpg">
- You can style the jumbotron however you want to:
.jumbotron {padding-top:0px;}
.jumbotron h2{color:white; padding-top:7px; padding-bottom:7px;}
- Because the navbar at the top and the bottom of the page is fixed, you may want to add some margin to compensate for the navbar area so the page does not get hidden behind it:
body{margin-bottom:80px; margin-top:60px;}
- Some developers/designers like the navbars to be transparent so that you can see the page through it faintly when scrolling or when using a small device size (e.g., mobile) with the drop-down menu showing:
navbar-wrapper{
background-color:rgba(0,0,0,0.90);
}