CODEWITHSUNDEEP
twitter-bootstrapnavbar
Steve
Steve

Reputation: 37

Bootstrap navigation toggle and column stack?

I'm taking online course to learn bootstrap but the instructor kind of skipped over some stuff. How does bootstrap know to stack columns at a certain screen size when I didn't put it in the code? Is this just a part of the link rel (stylesheet) to bootstrap? Also I added a navbar with a toggle button. I coded it to have icon bar for each link in the navbar. But the toggle button is only a square button and it's not aligned right like I thought it would be. Could someone help me out?

I've figured out my toggle button issue. I just want to understand the concept of the collasping columns and how to customize that.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap 101 Template</title>

    <!-- Bootstrap -->
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet">

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->

        <style>

            .box {

                background-color: #d3d3d3;
                border: 1px solid grey;

            }

        </style>

  </head>
  <body>

    <div class="navbar navbar-default">

        <div class="container">

            <div class="navbar-header">

                <a href="" class="navbar-brand">My Website</a>

                <button type="button" class="navbar-toggle right" data-toggle="collapse" data-target=".navbar-collapse">

                <span class="sr-only">Toggle navigation</span>

                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>

                </button>

            </div>

                <div class="collapse navbar-collapse">

                    <ul class="nav navbar-nav">

                        <li class="active"><a href="">Page 1</a></li> 
                        <li><a href="">Page 2</a></li> 
                        <li><a href="">Page 3</a></li> 
                        <li><a href="">Page 4</a></li> 
                        <li><a href="">Page 5</a></li> 
                        <li><a href="">Page 6</a></li>                  
                    </ul>


                </div>

        </div>

    </div>

    <h1>Hello, world!</h1>

    <div class="container">

        <form class="form-horizontal" role="form">

            <div class="form-group">

            <label for="email">Email Address</label>

            <input class="form-control" type="email" name="email" placeholder="Your email" />


            </div>

            <div class="form-group">

                <label for="password">Password</label>

                <input class="form-control" type="password" name="password"

            </div><br>

                <input type="submit" class="btn btn-warning" value="Login" />

            </form><br><br>

            <table class="table table-striped table-bordered table-hover">

                <tr class="success">

                    <th>

                        Name

                    </th>

                    <th>

                        Age

                    </th>

                </tr>

                <tr>

                    <td class="danger">

                        Rob

                    </td>

                    <td>

                        33
                    </td>

                </tr>

                <tr>

                    <td>

                    Jenny

                    </td>

                    <td>

                    35

                    </td>
                </tr>

                <tr>

                    <td>

                        Rob

                    </td>

                    <td>

                        33

                    </td>

                </tr>

                <tr>

                    <td>

                        Jenny

                    </td>

                    <td>

                        35
                    </td>

                </tr>

                <tr>

                    <td>

                        Rob

                    </td>

                    <td>

                        33

                    </td>

                </tr>

                <tr>

                    <td>

                        Jenny

                    </td>

                    <td>

                        35

                    </td>

                </tr>

            </table>

        </div>  


        <div class="row">

            <div class="col-md-4 box">Content</div>
            <div class="col-md-4 box">Content</div>
            <div class="col-md-4 box">Content</div>

        </div>



    </div>

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>

http://developmenttesting.netne.net/bootstrap/bootstapnavbar.html

Upvotes: 0

Views: 115

Answers (3)

Coding Enthusiast
Coding Enthusiast

Reputation: 3933

I will advice you to try remove links like: 

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet">

and see what happens. Comment out some stuff and see what happens. The online courses I took too jumped most of it and that's the only way I learnt. To understand more about bootstrap, you can read the documentation bootstrap website to get more understanding of the whole thing but the best way is to try stuff you will read or see during the course, it will really help you get a grasp. Goodluck with your course

Upvotes: 0

maioman
maioman

Reputation: 18744

You need to checkout the breakpoint feature that regulates how bootstrap's grid systems adapts to different screen sizes;

if you need to change how the default Bootstrap is set up you'll also need to download a copy of CSS and modify it (instead of CDN),

there's also a configurator tha can make a modified stylesheet with breakpoints you set plus other customization goodies, check it out!!

Upvotes: 0

Carol Skelly
Carol Skelly

Reputation: 362430

How does bootstrap know to stack columns at a certain screen size when I didn't put it in the code?

It's in the Bootstrap code. Bootstrap uses CSS media queries to apply specific CSS properties and rules based on common screen widths (or "breakpoints"): http://getbootstrap.com/css/#grid-media-queries

Is this just a part of the link rel (stylesheet) to bootstap?

Yes.

Upvotes: 0

Related Questions