Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Aakash Srivastav
seal-mask
.a{fill-rule:evenodd;}techdegree
Aakash Srivastav
Full Stack JavaScript Techdegree Student 11,638 Points
Posted by Aakash Srivastav
.a{fill-rule:evenodd;}techdegree
Aakash Srivastav
Full Stack JavaScript Techdegree Student 11,638 Points

Bootstrap Components

This is my HTML code---

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>BestBite</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
    <link href="https://fonts.googleapis.com/css?family=Arvo" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="BestbiteBS.css">
</head>
<body>
    <header>
        <div class="container">
            <nav class="navbar navbar-expand-lg navbar-light">
                <a class="navbar-brand" href="#">BestBite</a>
                <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
                    <span class="navbar-toggler-icon"></span>
                </button>
                <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
                    <div class="navbar-nav nav-pills ml-auto">
                        <a class="nav-item nav-link active" id="active" href="#">About<span class="sr-only">(current)</span></a>
                        <a class="nav-item nav-link" href="#">Signup</a>
                        <a class="nav-item nav-link" href="#">Login</a>
                    </div>
                </div>
            </nav>
        </div>
    </header>
    <main>
        <div class="jumbotron text-white text-right mb-0">
            <div class="container mx-md-auto">
                <p>Browse.</p>
                <p>Create.</p>
                <p>Share.</p>
            </div>
        </div>
        <div class="banner">
            <div class="container text-center pt-5 text-white">
                <p>Always have the answer to "What's for dinner?"</p>
                <button type="button" class="btn btn-sm">Learn More</button>
            </div>
        </div>

        <div class="menu-tag">
            <div class="container pt-5 mx-auto">
                <h3 class="pl-3">Newest Contributions</h3>
            </div>
            <div class="recipes">
                <div class="container mx-auto">
                    <div class="row text-center justify-content-around pt-4">
                        <div class="col-sm col-lg-3">
                            <h3>Breakfast</h3>
                            <p>Maple French Toast Rolled Oats with Berries</p>
                        </div>
                        <div class="col-sm col-lg-3">
                            <h3>Dinner</h3>
                            <p>Black Bean Stuffed Peppers
                            Pesto Pasta with Spinach</p>
                        </div>
                        <div class="col-sm col-lg-3">
                            <h3>Dessert</h3>
                            <p>German Chocolate Cake
                            Hazelnut Tiramitsu</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </main>
    <footer>
        <div class="container">
            <div class="row pt-3 text-sm-center px-md-5">
                <div class="col-sm-3">
                    <p>&copy; BestBite</p>
                </div>
                <div class="col-sm-3">
                    <p>BestBite.com</p>
                </div>
                <div class="col-sm-6">
                    <p>12 Greentree lane, Orlando , Florida</p>
                </div>
            </div>
        </div>
    </footer>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>
</body>
</html>

And this is my CSS code---

header .container{
    max-width: 850px;
}

body{
    font-family: 'Arvo', serif;
}

.navbar-brand{
    font-size: 1.7em;
}

.navbar-nav a{
    margin-right: 1.4em;
}

header .container .collapse .nav-pills a{
  color: #d8192f;
}

header .container .collapse .nav-pills .active,
header .container .nav-pills .nav-link:hover,
.banner .btn:hover{
    background-color:rgba(216,25,47,1);
    box-shadow:0 2px 4px rgba(0,0,0,.5); 
    color:#fff;
}

.jumbotron{
    height: 500px;
    background-image: url("http://s3.amazonaws.com/codecademy-content/projects/bestbite/bg.jpg");
    background-size: cover;
}

.jumbotron p{
    font-size: 2.8em;
    line-height: 1em;
}

.banner{
    height: 180px;
    background-color:#36343f;
}

.banner p{
    font-size: .85em;
}

.banner .btn{
    color:#fff;
    background-color: rgba(216,25,47,.5);
}

.menu-tag .container{
    border-bottom: .1px solid #e6e6e6;
    margin: 0 2em;
}

.recipes h3{
    font-size: 1.65em;
    color: red;
}

.recipes p{
    font-size: .85em;
}

footer{
    background-color: #eeeeee;
}

footer p{
    font-size: .85em;
}

@media(min-width: 576px){

    .navbar-brand{
        font-size: 2.4em;
    }

    .banner p{
        font-size: 1.35em;
    }

    .recipes .col-sm-4{
        max-width: 210px;
    }

    .recipes h3{
        font-size: 2em;
    }

    .recipes p{
        font-size: .95em;
    }

    footer{
        height: 110px;
    }

    footer p{
        font-size: 1em;
    }
}

@media(min-width: 768px){

    .jumbotron p{
        font-size: 3.8em;
    }

    .jumbotron .container{
        max-width: 800px;
    }

    footer .container{
        max-width: 950px;
    }
}

I am practicing Bootstrap by using it in various projects . This is one of those projects. I want to know - 1.What improvements I can do to make this code more optimised.

  1. The major problem I face during the projects is whether apply Bootstrap class or CSS property to achieve the result. Because using CSS property increases the number of lines of code. 3.Any special advice . As I am a newbie and learning to design , I am facing lots of doubts. Please help me friends.

3 Answers

Steven Parker
Steven Parker
229,644 Points
Steven Parker
Steven Parker
229,644 Points

If you're going to include Bootstrap at all, you should always code things the "Bootstrap way". I would recommend using custom CSS only in cases where the effect you need is not possible to achieve with Bootstrap classes.

Aakash Srivastav
seal-mask
.a{fill-rule:evenodd;}techdegree
Aakash Srivastav
Full Stack JavaScript Techdegree Student 11,638 Points
Aakash Srivastav
.a{fill-rule:evenodd;}techdegree
Aakash Srivastav
Full Stack JavaScript Techdegree Student 11,638 Points

Thanks Steven...but what I want to say is.....I am using custom CSS for -

  1. Different font size at various viewport width .
  2. For background images, background size and background colour. 3.For setting max-width.
  3. For setting font family , font colour .
  4. Setting height of a container. I didn't find any replacement for that in Bootstrap. If you have any advice for me. Please suggest. Because I didn't find answer to these questions at internet. So solely depend here at Treehouse teachers.So please help me. Because I am getting stuck due to these and I doubt "Am I doing the right way? " or "I am just completing the project." Because doing in the right way is important . So please help me.
Jacob Mishkin
Jacob Mishkin
23,117 Points

I would't worry about lines of CSS code at all. The size of the file is so minimal that it doesn't really matter unless you are creating say a 20 page site with thousands of lines of CSS and you do not have it minified. Much like Steven said, if you want to use bootstrap, use there classes to create the code you need.

for setting the font and background color, ect, you should write your own css to achieve this.

here is the bootstrap docs if you have questions regarding bootstrap, this should be your first place to go.

Personal side note: if you are just starting out, using CSS I'd suggest you do not use bootstrap. You may want to learn how to use the box model, to its fullest then learn bootstrap. You will run into issues where you will have to figure out a problem and the bootstrap class not won't help. This is just a personal opinion.

Aakash Srivastav
seal-mask
.a{fill-rule:evenodd;}techdegree
Aakash Srivastav
Full Stack JavaScript Techdegree Student 11,638 Points
Aakash Srivastav
.a{fill-rule:evenodd;}techdegree
Aakash Srivastav
Full Stack JavaScript Techdegree Student 11,638 Points

Thanks Jacob...thanks for your kind suggestion. After doing projects on pure CSS I started learning bootstrap just to know the difference between pure CSS and bootstrap. How fast things can be achieved using Bootstrap. Firstly , I made the project using pure CSS and the I use "bootstrap" and then I compare both the codes. I didn't jump into the bootstrap directly . I studied flexbox too and it helped me a lot. I haven't used css grid but I can guess with the help of "css flexbox and css grid" , there is no need of bootstrap.