Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

Design

Will Duke
Will Duke
5,007 Points

Need horizontal div row, I have the bootstrap class col-md-3 col-sm-6 I made a fiddle

http://jsfiddle.net/toondog/kr1eo6v4/5/ i thought I could line these horizontally with the framework however it is not working.

 <section id="services" class="services bg-primary">
<div class="me"><img src="http://s26.postimg.org/ty71q09ft/Superman.png" /></div>
   <div class="container">
            <div class="row">
                <div class="col-lg-12 text-center">
                    <h2>Superman at the newstand</h2>
                    <p class="lead">drawings <a target="_blank" href="ufc.com">too</a>.</p>
                </div>
            </div>
            <!-- /.row -->
        </div>
        <div class="container">
            <div class="row text-center">
                <div class="col-lg-10 col-lg-offset-1">
                    <h2>Services</h2>
                    <hr class="small">
                    <div class="row">
                        <div class="col-md-3 col-sm-6">
                            <div class="service">
                                <span class=>
                               <div class="icon-chrome">
                            </span>
                                <h4>
                                    <strong>Photography</strong>
                                </h4>
                                <p>graphics</p>
                                <a href="#" class="btn btn-light">More</a>
                            </div>
                        </div>
                        <div class="col-md-3 col-sm-6">
                            <div class="service">
                                <span>
                                <div class="icon-chrome">
                            </span>
                                <h4>
                                    <strong>Animation</strong>
                                </h4>
                                <p>special effects.</p>
                                <a href="#" class="btn btn-light">More</a>
                            </div>
                        </div>
                        <div class="col-md-3 col-sm-6">
                            <div class="service">
                                <span class="">
                                <div class="icon-chrome">
                            </span>
                                <h4>
                                    <strong>Graphic Art</strong>
                                </h4>
                                <p>media.</p>
                                <a href="#" class="btn btn-light">More</a>
                            </div>
                        </div>
                        <div class="col-md-3 col-sm-6">
                            <div class="service">
                                <span class=""> text-primary">
                                <div class="icon-chrome">
                            </span>
                                <h4>
                                    <strong>illustration</strong>
                                </h4>
                                <p>comic art</p>
                                <a href="#" class="btn btn-light">More</a>
                            </div>
                        </div>
                    </div>
                    <!-- /.row (nested) -->
                </div>
                <!-- /.col-lg-10 -->
            </div>
            <!-- /.row -->
            </div>

        <!-- /.container -->
    </section>
</html>```

1 Answer

Mark Josephsen
Mark Josephsen
8,803 Points

You have a few errors in your code:

  • the span on line 21 is incorrectly typed
  • Also, check line 57. Hard to tell what you were trying to do there.

Also, have you tried something like: .row div { display: inline-block;} ? Could help.

Will Duke
Will Duke
5,007 Points

Thanks Mark.
sorry about all the mistakes. I'm still trying to figure out how to edit markup.
normally i would use the class with a { display: inline-block;}, however , if my code was better the bootstrap class <div class="row text-center"> would be in effect.