rails 4: unable to import bootstrap theme into rails

Question

Trying to import a bootsrap theme called landon into my rails app but cannot get the CSS files to work. Installed a bootstrap gem (bootstrap-sass 3.1.1.1) Created a css.scss
& added the line @import 'bootstrap';

copied and pasted the html code into home.html.erb , so when i run the web app i get the text which is cool

So to style i have 2 files the main.css and bootstrap.css file not sure if i need to copy the bootstrap.css file as i have the bootstrap gem.

so have copied a main.css to the css.scss file

also added //= require bootstrap to the javascript file as well

home.html.erb

<body>
    <div class="preloader"></div>

    <! -- ******************** MASTHEAD SECTION ******************** -->    
    <main id="top" class="masthead" role="main">
        <div class="container">
            <div class="logo"> 
                    <!-- <a href="index.html#"><img src="images/logo.png" alt="logo"></a> -->
                    <a href="index.html#"></a>
            </div>

            <h1>Helping <strong>Mum's</strong><br>
            make better choices with their <strong>kids</strong></h1>

            <div class="row">
                <div class="col-md-6 col-sm-12 col-md-offset-3 subscribe">
                    <div class="indicates-required" style="display:none;"><span class="asterisk">*</span> indicates required</div>
                    <form action="//ubiquate.us6.list-manage.com/subscribe/post?u=bb0f5fdb70a640208cb0ecaa8&amp;id=16a7a49314" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
                    <!-- <form class="form-horizontal" role="form" action="subscribe.php" id="subscribeForm" method="POST"> -->
                        <div class="form-group">
                            <div class="col-md-7 col-sm-6 col-sm-offset-1 col-md-offset-0">
                                <input class="form-control input-md required email" value="" name="EMAIL" type="email" id="address mce-EMAIL" placeholder="Enter your email" data-validate="validate(required, email)" required="required">
                            </div>
                                <div id="mce-responses" class="clear">
                                    <div class="response" id="mce-error-response" style="display:none"></div>
                                    <div class="response" id="mce-success-response" style="display:none"></div>
                                </div>    <!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups-->
                            <div class="col-md-5 col-sm-4">
                                <div style="position: absolute; left: -5000px;"><input type="text" name="b_bb0f5fdb70a640208cb0ecaa8_16a7a49314" tabindex="-1" value=""></div>
                                <div class="clear"><button type="submit" id="mc-embedded-subscribe" class="btn btn-success btn-lg">GET EARLY ACCESS</button>
                            </div>
                        </div>
                    </form>
                    <span id="result" class="alertMsg"></span> </div>
                </div>

                <a href="index.html#explore" class="scrollto">
                <p>SCROLL DOWN TO EXPLORE</p>
                <p class="scrollto--arrow"><img src="images/scroll_down.png" alt="scroll down arrow"></p>
                </a>
        </div><! --/container -->
    </main><! --/main -->


        <! -- ******************** TESTIMONIALS SECTION ******************** -->     
        <div class="highlight testimonials">
            <div class="container">
                <div class="section-title">
                    <h2>What our customers said</h2>
                    <h4>Don't take our word. See our testimonials </h4>
                </div>

                <section class="row breath">
                    <div class="col-md-6">
                        <div class="testblock">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. </div>
                        <div class="clientblock"> 
                            <img src="images/customer-img-1.jpg" alt=".">
                            <p><strong>John Doe</strong> <br>
                                Founder of <a href="index.html#">Blacktie.co</a>
                            </p>
                        </div>
                    </div><! --/col-md-6 -->

                    <div class="col-md-6">
                        <div class="testblock">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. </div>
                        <div class="clientblock"> 
                            <img src="images/customer-img-2.jpg" alt=".">
                            <p><strong>Richard Sommer</strong> <br>
                                CEO of <a href="index.html#">Blacktie.co</a>
                            </p>
                        </div>
                    </div><! --/col-md-6 -->
                </section><! --/section -->

            </div><! --/container -->
        </div><! --/highlight Testimonials -->


        <! -- ******************** FOOTER ******************** -->    
        <main class="footercta" role="main">
            <div class="container">
                <h1>The Most Simple & <strong>Powerful Way</strong> <br>
                    to <strong>launch</strong> your product</h1>

                <div class="row">
                    <div class="col-md-12 breath text-center"> 
                        <a href="index.html#top" class="btn btn-success btn-lg gototop">GET EARLY ACCESS</a> 
                    </div>
                </div>
            </div><! --/container -->
        </main><! --/main -->

        <div class="container">
            <section class="row breath">
                <div class="col-md-12 footerlinks">
                    <p>&copy; 2014 FoodBuddy. All Rights Reserved</p>
                </div>
            </section><! --/section -->
        </div><! --/container -->




<script src="js/jquery.js"></script>
<script src="js/bootstrap.js"></script>
<script src="js/easing.js"></script>
<script src="js/nicescroll.js"></script>

<script type='text/javascript' src='//s3.amazonaws.com/downloads.mailchimp.com/js/mc-validate.js'></script><script type='text/javascript'>(function($) {window.fnames = new Array(); window.ftypes = new Array();fnames[0]='EMAIL';ftypes[0]='email';fnames[1]='FNAME';ftypes[1]='text';fnames[2]='LNAME';ftypes[2]='text';}(jQuery));var $mcj = jQuery.noConflict(true);
</script>


<script>


 $(function() {
    $('.scrollto, .gototop').bind('click',function(event){
         var $anchor = $(this);
         $('html, body').stop().animate({
         scrollTop: $($anchor.attr('href')).offset().top
          }, 1500,'easeInOutExpo');
     event.preventDefault();
      });
  });


</script>

</body>

Answer 1

As noted here https://github.com/twbs/bootstrap-sass , to implement a bootstrap-theme you have to include it like that: @import "bootstrap/theme"; for a theme located here ./bootstrap/_theme.scss . Not sure about that as I don't know your settings but you could give it a try.

rails 4: unable to import bootstrap theme into rails

Question

1 answers

solution1
0 2014-09-13 18:53:19

rails 4: unable to import bootstrap theme into rails

Question

1 answers

solution1 0 2014-09-13 18:53:19

solution1
0 2014-09-13 18:53:19