Jason Jason - 3 months ago 19
CSS Question

Row of icons in bootstrap

I'm working on my personal website and in my skills section, I want to put a row of icons at the top of the container. However, when I attempt to put a

row-fluid
on top, I run into issues.

I've attached the relevant code and screenshots for reference. Any help is appreciated!

w/out icons

with icons

<!--SKILLS DESCRIPTION -->
<div id="skillswrap">
<div class="container">
<div class="row">
<div class="wow fadeIn" data-wow-duration="5s" data-wow-offset="100">
<div class="col-lg-2 col-lg-offset-1">
<h4 style="color:white"><b>SKILLS</b></h4>
</div>
<div class="row-fluid">
<p><img class="img-responsive" src="Theme/assets/img/html5.png" alt="" style="zoom:60%"></p>
</div>
<div class="col-lg-3 centered">
<p><b>Front End Programming Skills</b></p>
<h5>HTML, CSS, JavaScript, Bootstrap, JQuery, AngularJS, Ionic Framework, D3
<br>

</div>
<div class="col-lg-3 centered">
<p><b>Scripting Language Skills</b></p>
<h5>Python, Ruby</h5>
<br>
</div>
<div class="col-lg-3 centered">
<p><b>Object Oriented Experience</b></p>
<h5>Java, C++</h5>
<br>
</div>

<div class="col-lg-3 col-lg-offset-3 centered">
<p><b>Communication</b></p>
<h5>Strong writing, collaborative and interpersonal skills.</h5>
<br>
</div>
<div class="col-lg-3 centered">
<p><b>Software</b></p>
<h5>Exposure to: Postman, JetBrains IDEs, Eclipse, Version control w/ Git, Adobe Creative
Suite.</h5><br>
</div>
<div class="col-lg-3 centered">
<p><b>Diverse Technical Skills</b></p>
<h5>Programming, agile methedologies, QA testing, content management, data analytics</h5>
<br>
</div>

</div><!--/.row -->
<br>
</div><!--/.container -->
</div>
</div><!--/ #skillswrap -->

Answer

You either are going to have the offset or push bootstrap classes to push the image right i.e.: adding col-lg-offset-1 to class,

OR

Do it yourself via the position css attribute i.e.: position:relative;left:10px

http://getbootstrap.com/css/ for more info on how to use offset, push classes.

Comments