Re: Questions about Bootstrap
Posted: Mon Oct 13, 2014 11:38 pm
You could try changing the navi and title to display:inline; on the css.
A place to discuss shrines
http://amassment.org/board/
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>
Code: Select all
.navbar-default {
background: transparent;
border: 0;
}
Code: Select all
.jumbotron {
background: none;
background-image: url('../../image.jpg');
}
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 »</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 »</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 »</a></p>
</div>
</div>
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 -->
Code: Select all
php files (CCCS)
|_bootstrap.3.2.0.dist
|__css
|__img