Using columns to arrange HTML

Question

First off, apologies if my title isn't the most descriptive in the world, I couldn't think of anything else for it.

I'm using a HTML5 theme by HTML5UP called Alpha. The website is intended to be a first point of help for clients using an app my colleagues have developed. I would like to make two columns, one 8 wide and one 4 wide. using bootstrap I would write this...

<div class="col-sm-8">
    ***CONTENT***
</div>
<div class="col-sm-4">
    ***CONTENT***
</div>

However this theme uses the following notation:

<div class="row">
    <div class="6u 12u(narrower)">
        <section class="box special">
            <span class="image featured"><img src="images/pic02.jpg" alt="" /></span>
            <h3>Sed lorem adipiscing</h3>
            <p>Integer volutpat ante et accumsan commophasellus sed aliquam feugiat lorem aliquet ut enim rutrum phasellus iaculis accumsan dolore magna aliquam veroeros.</p>
            <ul class="actions">
                <li><a href="#" class="button alt">Learn More</a></li>
            </ul>
    </section>
</div>

My issue is, I've tried swapping col-sm-X straight out for Xu but that doesn't work. Can anybody here point me in the right direction?

Thanks,

Ethan.

Answer 1

i try to change column width and it's working..!!

changes:

class="6u 12u(narrower)" --> class="4u 12u(narrower)"
class="6u 12u(narrower)" --> class="8u 12u(narrower)"