Three images line-up - html

Question

Layout - Line up 3 images in bootstrap grid. .col-sm-3 doesn't help. What am I doing wrong? How to achieve that? I was thinking bootstrap grid makes it perfectly one next to each other with column width. Please help!
.navbar {
min-height: 80px;
margin-bottom: 0;
}
#btnnavbar {
margin-top: 20px;
}
#btnhome {
margin-top: 16px;
}
#imgbrand {
margin-top: -70px;
margin-left: px;
height: 220px;
width: 280px;
}
#firstpage {
margin-top: 90px;
}
#parallax {
/* The image used */
padding-top: 200px;
margin-top: 80px;
background-image: url("http://res.cloudinary.com/ekilja01/image/upload/v1478121019/Death_to_stock_photography_Vibrant_7_of_10_s50rcs.jpg");
/* Set a specific height */
height: 500px;
/* Create the parallax scrolling effect */
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
color: white;
}
.about {
font-family: 'Lato', sans-serif;
font-weight: 700;
}
.lead {
font-family: 'Lato', sans-serif;
}
#portfolio {
height: 500px;
padding-top: 200px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<link href='http://fonts.googleapis.com/css?family=Lato&subset=latin,latin-ext' rel='stylesheet' type='text/css'>
<!-- Navbar style available in Bootstrap framework-->
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<!-- /end-->
<!-- Anything that has to be responsive we are going to keep inside the Bootstrap grid -->
<div class="container-fluid">
<!-- /end -->
<div class="navbar-header">
<button type="button" class="navbar-toggle btn-lg" data-toggle="collapse" data-target=".navbar-collapse" id="btnnavbar">
<!-- For screen readers only -->
<span class="sr-only">Toggle navigation</span>
<!-- /end -->
<!-- Hamburger menu button appears when browser window has been shrinked -->
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<!-- /end -->
<!-- Brand and toggle get grouped for better mobile display -->
<a class="navbar-brand " href="http://codepen.io/ekilja01"><img class="img-responsive" id="imgbrand" src="http://www.kiljakandweb.com/favicon.png" alt="brand logo"></a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li id="btnhome">About</li>
<li id="btnhome">Portfolio</li>
<li id="btnhome">Contact</li>
</ul>
</div>
</div>
</nav>
<section id="parallax">
<div class="container">
<div class="row">
<div class="col-lg-12 col-md-12 text-center">
<h1 class="about">WEB DEVELOPER</h1>
</div>
</div>
<!-- /.row -->
</div>
<!-- /.container -->
</section>
<section id="portfolio">
<div class="row">
<div class="col-lg-12 col-md-12 text-center">
<h1>My skillset</h1>
<p class="lead"></p>
<div class="row">
<div class="col-sm-3">
<img src="http://res.cloudinary.com/ekilja01/image/upload/v1478127238/html5_yoj7se.png" alt="html">
<div class="col-sm-3">
<img src="http://res.cloudinary.com/ekilja01/image/upload/v1478127238/css3_bso6y6.png" alt="css" />
<div class="col-sm-3">
<img src="http://res.cloudinary.com/ekilja01/image/upload/v1478127238/js_mnqfxw.png" alt="javascript" />
<div class="col-sm-3">
<img src="http://res.cloudinary.com/ekilja01/image/upload/v1478127237/jquery_qkehtt.png" alt="jquery" />
</div>
</div>
</div>
</div>
</div>
</div>
<!-- /.row -->
</div>
<!-- /.container -->
</section>

Answer 1

.navbar {
min-height: 80px;
margin-bottom: 0;
}
#btnnavbar {
margin-top: 20px;
}
#btnhome {
margin-top: 16px;
}
#imgbrand {
margin-top: -70px;
margin-left: px;
height: 220px;
width: 280px;
}
#firstpage {
margin-top: 90px;
}
#parallax {
/* The image used */
padding-top: 200px;
margin-top: 80px;
background-image: url("http://res.cloudinary.com/ekilja01/image/upload/v1478121019/Death_to_stock_photography_Vibrant_7_of_10_s50rcs.jpg");
/* Set a specific height */
height: 500px;
/* Create the parallax scrolling effect */
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
color: white;
}
.about {
font-family: 'Lato', sans-serif;
font-weight: 700;
}
.lead {
font-family: 'Lato', sans-serif;
}
#portfolio {
height: 500px;
padding-top: 200px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<link href='http://fonts.googleapis.com/css?family=Lato&subset=latin,latin-ext' rel='stylesheet' type='text/css'>
<!-- Navbar style available in Bootstrap framework-->
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<!-- /end-->
<!-- Anything that has to be responsive we are going to keep inside the Bootstrap grid -->
<div class="container-fluid">
<!-- /end -->
<div class="navbar-header">
<button type="button" class="navbar-toggle btn-lg" data-toggle="collapse" data-target=".navbar-collapse" id="btnnavbar">
<!-- For screen readers only -->
<span class="sr-only">Toggle navigation</span>
<!-- /end -->
<!-- Hamburger menu button appears when browser window has been shrinked -->
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<!-- /end -->
<!-- Brand and toggle get grouped for better mobile display -->
<a class="navbar-brand " href="http://codepen.io/ekilja01"><img class="img-responsive" id="imgbrand" src="http://www.kiljakandweb.com/favicon.png" alt="brand logo"></a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li id="btnhome">About</li>
<li id="btnhome">Portfolio</li>
<li id="btnhome">Contact</li>
</ul>
</div>
</div>
</nav>
<section id="parallax">
<div class="container">
<div class="row">
<div class="col-lg-12 col-md-12 text-center">
<h1 class="about">WEB DEVELOPER</h1>
</div>
</div>
<!-- /.row -->
</div>
<!-- /.container -->
</section>
<section id="portfolio">
<div class="row">
<div class="col-lg-12 col-md-12 text-center">
<h1>My skillset</h1>
<p class="lead"></p>
<div class="row">
<div class="col-sm-3 col-xs-3">
<img src="http://res.cloudinary.com/ekilja01/image/upload/v1478127238/html5_yoj7se.png" alt="html">
</div>
<div class="col-sm-3 col-xs-3">
<img src="http://res.cloudinary.com/ekilja01/image/upload/v1478127238/css3_bso6y6.png" alt="css" />
</div>
<div class="col-sm-3 col-xs-3">
<img src="http://res.cloudinary.com/ekilja01/image/upload/v1478127238/js_mnqfxw.png" alt="javascript" />
</div>
<div class="col-sm-3 col-xs-3">
<img src="http://res.cloudinary.com/ekilja01/image/upload/v1478127237/jquery_qkehtt.png" alt="jquery" />
</div>
</div>
<!-- /.row -->
</div>
<!-- /.container -->
</section>
this should work