Any question answered...

You are reading a single comment by @Sumo and its replies. Click here to read the full conversation.

•

CYOA

Can anyone explain Bootstrap to me?

I usually use wordpress based themes with web-based builders (think Elegant Themes' Divi) but thought I'd try something new for a project and found a bootstrap theme to get me started.

I downloaded a theme from wrapbootstrap which is essentially a folder contained various html files and some css stuff.

What would I edit this with? Are there any tools recommended? I have Dreamweaver with me CC subscription but I haven't used it for years. Would like something fairly idiot proof where I see more front end changes happening live rather than a page of code. If this ain't bootstrap then don't be afraid to say and I'll head back to Wordpress/other.

•

Sumo in reply to @CYOA

Welcome to the beginning of the rabbit hole.

Use Sublime Text to edit.
Look up Node.js - install globally and locally (in the file for your website).
Look up Gulp
Use Gulp to Serve and Watch.
Serve creates a local server.
Watch watches your designated files for any changes and auto updates the page.

Bootstrap will give you the HTML and CSS files for a stock website, you can just edit the parts you need.

•

CYOA in reply to @Sumo

I might just use Wix at this stage /vomit >

I'm struggling with grids. Paypal of a pint to anyone who can explain why this:

     <section id="process" class="process">
        <div class="container">
            <div class="row text-center">
                <div class="col-lg-12 wow fadeIn">
                    <h2>blah blah blah</h2>
                    <hr class="colored">
                    <p>blah blah blah blah blah</p>
                </div>
            </div>
            <div class="row content-row">
                <div class="col-md-4 wow fadeIn" data-wow-delay=".2s">
                    <div class="media">
                        <div class="pull-left">
                            <i class="fa fa-clipboard"></i>
                        </div>
                        <div class="media-body">
                        </div>
                    </div>
                </div>
                <div class="col-md-4 wow fadeIn" data-wow-delay=".4s">
                    <div class="media">
                        <div class="pull-left">
                            <i class="fa fa-pencil"></i>
                        </div>
                        <div class="media-body">
                        <div class="
                        </div>
                    </div>
                </div>
                <div class="col-md-4 wow fadeIn" data-wow-delay=".6s">
                    <div class="media">
                        <div class="pull-left">
                            <i class="fa fa-rocket"></i>
                        </div>
                        <div class="media-body">
                        </div>
                    </div>
                </div>
            </div>
        </div>
                    <div class="row content-row">
                <div class="col-md-4 wow fadeIn" data-wow-delay=".2s">
                    <div class="media">
                        <div class="pull-left">
                            <i class="fa fa-clipboard"></i>
                        </div>
                        <div class="media-body">
                        </div>
                    </div>
                </div>
                <div class="col-md-4 wow fadeIn" data-wow-delay=".4s">
                    <div class="media">
                        <div class="pull-left">
                            <i class="fa fa-pencil"></i>
                        </div>
                        <div class="media-body">
                        </div>
                    </div>
                </div>
                <div class="col-md-4 wow fadeIn" data-wow-delay=".6s">
                    <div class="media">
                        <div class="pull-left">
                            <i class="fa fa-rocket"></i>
                        </div>
                        <div class="media-body">
                        </div>
                    </div>
                </div>
    </section>

Isn't arranged in a neat, evenly spaced grid of 3 columns and 2 rows but as this:

EDIT: Just noticed line 26 which could well have something to do with it.

EDIT2: Weirdly duplicating div class="media-body" underneath line 35 does the trick. I'm sure that's not an appropriate way to do things but it's working so it's staying.

Any question answered...

About

LFGSS