Questions about Bootstrap

[Mikari]

You could try changing the navi and title to display:inline; on the css.

[nyxmidnight]

Are you using the navbar example from the docs? It's essential to make your nav responsive and make sure the links don't go everywhere as well as making the links sit level with the site brand. You can just remove the box-shadow from the nav to maintain the appearance you want. Here is my suggestion:

Code: Select all

					<nav class="navbar navbar-default" role="navigation">
					  <div class="container-fluid">
					    <!-- Brand and toggle get grouped for better mobile display -->
					    <div class="navbar-header">
					      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
					        <span class="sr-only">Toggle navigation</span>
					        <span class="icon-bar"></span>
					        <span class="icon-bar"></span>
					        <span class="icon-bar"></span>
					      </button>
					      <a class="navbar-brand" href="index.php">Cleveland County Choral Society</a>
					    </div>

						<!-- Collect the nav links, forms, and other content for toggling -->
						<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
							<ul class="navbar-nav nav">
								<li><a href="about.php">About Us</a></li>
								<li><a href="concerts.php">Concerts</a></li>
								<li><a href="media.php">Media</a></li>
							</ul>

    					</div><!-- /.navbar-collapse -->
					</div><!-- /.container-fluid -->
				</nav>

And you add this in your custom.css:

Code: Select all

.navbar-default {
	background: transparent;
	border: 0;
}

As for your Jumbotron, here is my suggestion:

Code: Select all

.jumbotron {
	background: none;
	background-image: url('../../image.jpg');
}

../../ means two directories up.

Let me know if it helps!

[Robin]

EEEEE THAT FIXED IT :D :D ^o^ THANK YOU THANK YOU THANK YOU! :D

(I had apparently deleted the ending div tags between the site brand and the navigation links, which caused havoc when it came to rendering the navigation. That'll teach me to hit the Backspace key too much XD)

Also, Nyx, you deserve ALL THE COOKIES for that image link trick! I had no idea what the "../../" stuff meant until today! :D **The More You Know star appears**

Now to style and color the navbar the way I want, and I'll pretty much have a fully functional site ready for content!

[nyxmidnight]

Yay cookies!

Seriously I am happy it works now :D

[Robin]

Meeee tooooo :D :D and now that I actually know a little more of what I'm doing, I might be able to use Bootstrap on my blog, too xD

[Robin]

Ok, back with a couple new questions:

#1: The website I've been working on actually needs a carousel instead of a jumbotron, so I tried to drop in a sample carousel from the Basic Templates offered on getbootstrap.com. Here's what happened:
Happy jumbotron, minding its own business...
Poopy carousel, somehow displaying BEHIND the content that's supposed to be below it (and not displaying images correctly, but that's question #2)

The navbar displays correctly, so I have excerpted the parts of the code where I most likely screwed up. I haven't put in any custom styles--everything is running off basic bootstrap.css.

Code: Select all

<div id="myCarousel" class="carousel slide" data-ride="carousel">
      <!-- Indicators -->
      <ol class="carousel-indicators">
        <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
        <li data-target="#myCarousel" data-slide-to="1"></li>
        <li data-target="#myCarousel" data-slide-to="2"></li>
      </ol>
      <div class="carousel-inner" role="listbox">
        <div class="item active">
          <img src="C:\Users\Robin\Documents\sites\CCCS\img\christmas2013_fullchoir.jpg" alt="First slide">
          <div class="container">
            <div class="carousel-caption">
              <h1>Welcome!</h1>
              <p>We are Cleveland County Choral Society, providing concerts twice a year in Shelby, North Carolina.</p>
			  <p><a class="btn btn-lg btn-primary" href="#" role="button">More about us</a></p>
            </div>
          </div>
        </div>
        <div class="item">
          <img src="C:\Users\Robin\Documents\sites\CCCS\img\unknownyear_section.jpg" alt="Second slide">
          <div class="container">
            <div class="carousel-caption">
              <h1>Concerts</h1>
              <p>Our 2014 concerts are December 6th and 7th at Aldergate Methodist Church in Shelby, NC.</p>
			  <p><a class="btn btn-lg btn-primary" href="#" role="button">Concert times and ticket prices</a></p>
            </div>
          </div>
        </div>
        <div class="item">
          <img src="C:\Users\Robin\Documents\sites\CCCS\img\spring2006_candid1.jpg" alt="Third slide">
          <div class="container">
            <div class="carousel-caption">
              <h1>Media</h1>
              <p>Browse our pictures and see videos from previous concerts!</p>
              <p><a class="btn btn-lg btn-primary" href="#" role="button">See more</a></p>
            </div>
          </div>
        </div>
      </div>
      <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
        <span class="glyphicon glyphicon-chevron-left"></span>
        <span class="sr-only">Previous</span>
      </a>
      <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
        <span class="glyphicon glyphicon-chevron-right"></span>
        <span class="sr-only">Next</span>
      </a>

    <div class="container">
      <!-- Example row of columns -->
      <div class="row">
        <div class="col-md-4">
          <h2>Our Group</h2>
          <p>Though we all have different voices, one common thread binds us together:  we ALL love to sing.  There are no auditions--if you love to sing and you're in the Cleveland County area, we welcome you!</p>
          <p><a class="btn btn-default" href="about.php" role="button">More about us &raquo;</a></p>
        </div>
        <div class="col-md-4">
          <h2>Concerts</h2>
          <p>Our concerts are usually held on the first weekends of May and December every year at Aldersgate UMC, and include a variety of both secular and sacred choral music.</p>
          <p><a class="btn btn-default" href="concerts.php" role="button">Upcoming Concerts &raquo;</a></p>
       </div>
        <div class="col-md-4">
          <h2>Media</h2>
          <p>See our media page for pictures, videos, and audio clips of our performances!  You can also like us on Facebook and follow us on Twitter.</p>
          <p><a class="btn btn-default" href="media.php" role="button">See media &raquo;</a></p>
        </div>
      </div>

#2: Can't seem to make the image links in the carousel work. (The image links are going to be super weird during testing--I have to about describe the folder hierarchy to have it make any sense.)
- The css files are under /CCCS/bootstrap.3.2.0.dist/css
- The image files are under /CCCS/img/

I tried the ../ trick in a few different permutations, but couldn't make it work. Absolute links are, of course, not working either. Blehhh. Relative links, why y'all so cray? LOL

[nyxmidnight]

You have too many containers, my friend! And you're missing a few closing divs as well.

Code: Select all

						<div id="myCarousel" class="carousel slide" data-ride="carousel">
					      <!-- Indicators -->
					      <ol class="carousel-indicators">
					        <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
					        <li data-target="#myCarousel" data-slide-to="1"></li>
					        <li data-target="#myCarousel" data-slide-to="2"></li>
					      </ol>
					      <!-- Wrapper for slides -->
					      <div class="carousel-inner" role="listbox">
					        <div class="item active">
					          <img src="#" alt="First slide">
					            <div class="carousel-caption">
					              <h4>Welcome!</h4>
					              <p>We are Cleveland County Choral Society, providing concerts twice a year in Shelby, North Carolina.</p>
					           		<p><a class="btn btn-lg btn-primary" href="#" role="button">More about us</a></p>
					            </div> <!-- .carousel-caption -->
					          </div> <!-- .item .active -->
					        <div class="item">
					          <img src="#" alt="Second slide">
					            <div class="carousel-caption">
					              <h1>Concerts</h1>
					              <p>Our 2014 concerts are December 6th and 7th at Aldergate Methodist Church in Shelby, NC.</p>
					           <p><a class="btn btn-lg btn-primary" href="#" role="button">Concert times and ticket prices</a></p>
					            </div> <!-- .carousel-caption -->
					        </div> <!-- .item -->
					        <div class="item">
					          <img src="#" alt="Third slide">
					            <div class="carousel-caption">
					              <h1>Media</h1>
					              <p>Browse our pictures and see videos from previous concerts!</p>
					              <p><a class="btn btn-lg btn-primary" href="#" role="button">See more</a></p>
					            </div> <!-- .carousel-caption -->
					          </div> <!-- .item -->
					        </div> <!-- .carousel-inner -->
					        <!-- Controls -->
					      <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
					        <span class="glyphicon glyphicon-chevron-left"></span>
					        <span class="sr-only">Previous</span>
					      </a>
					      <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
					        <span class="glyphicon glyphicon-chevron-right"></span>
					        <span class="sr-only">Next</span>
					      </a>
					     </div> <!-- #myCarousel -->

As for question #2, I need to know where the php files are. What is your directory structure? Something like this?

Code: Select all

php files (CCCS)
|_bootstrap.3.2.0.dist
|__css
|__img

If so, your images should be referred to as "img/image.jpg".

[Robin]

@Nyx Yep, that's how the directory files are situated! I used that link structure and it worked great.

Also, I put in the new carousel code and it works great as well. I actually copy-pasted the original code from one of the Bootstrap templates so that I could figure out how it worked...must have not copypasta'ed all the code I was supposed to ^_^;

Thank you so much, Nyx! I swear I'll get the hang of this someday ^_^;

[nyxmidnight]

Don't worry about it. We all gotta start somewhere!

[Robin]

One last thing and I'll have my whole Bootstrap site built ^o^ finally, right? :D :D :D

I've been looking at this responsive Bootstrap image gallery tutorial to build my own image gallery. I'm pretty ok with coding most of it (YAY!), but I'm using thumbnails to make sure all the images are the same size and don't screw up the page layout. Ideally, visitors would click a thumbnail and the jQuery lightbox would open up to show the larger picture.

However, I don't see a part in any of the code where I can include both the thumbnail image source and the actual larger image source. Do I need to look up another tutorial, or would this one be adaptable to what I need?