WordPress.org

Ready to get started?Download WordPress

Forums

Bootstrap for images and blog section in WordPress theme (1 post)

  1. onogbebor
    Member
    Posted 2 months ago #

    I am trying to use bootstrap in two parts of my wordpress theme on the index page. The first place is for an images carousel for images and the second part is the blog section. Both are functioning correctly. I know I'm missing something but can't seem to get it to work.

    Thanks in advance for the help.

    <div id="myCarousel" class="carousel slide">
    			<!-- Indicators -->
    			<div class="carousel-indicators">
    				<div data-target="#myCarousel" data-slide-to="0" class="active"></div>
    				<div data-target="#myCarousel" data-slide-to="1"></div>
    				<div data-target="#myCarousel" data-slide-to="2"></div>
    			</div>
    
    			<!-- Wrapper for slides -->
    			<div class="carousel-inner">
    				<div class="active item">
    					<img src="osaretinogbebor.com/public_html/wp-content/themes/Osaretin_Ogbebor_BRWNpress/img/Osaretin_One.jpg">
    					<div class="carousel-caption">
    						<h1>Power, Love and a Sound Mind.</h1>
    						<h2>2 Timothy 1:7</h2>
    					</div>
    				</div>
    				<div class="item">
    					<img src="osaretinogbebor.com/public_html/wp-content/themes/Osaretin_Ogbebor_BRWNpress/img/Osaretin_Two.jpg">
    					<div class="carousel-caption">
    						<h1>Study to show thyself approved</h1>
    						<h2>2 Timothy 2:15</h2>
    					</div>
    				</div>
    				<div class="item">
    					<img src="osaretinogbebor.com/public_html/wp-content/themes/Osaretin_Ogbebor_BRWNpress/img/Osaretin_Three.jpg">
    					<div class="carousel-caption">
    						<h1>The greatest of these is Love</h1>
    						<h2>1 Corinthians 13:13</h2>
    					</div>
    				</div>
    			</div>
    
    			<!-- Controls -->
    			<a href="#myCarousel">
    				<span class="icon-prev"></span>
    			</a>
    			<a href="#myCarousel">
    				<span class="icon-next"></span>
    			</a>
    		</div><!-- end Home -->
    
                        <h1>Blog</h1>
    
    			<div class="ff-container">
    
    				<input id="select-type-all" name="radio-set-1" type="radio" class="ff-selector-type-all" checked="checked" />
    				<label for="select-type-all" class="ff-label-type-all">All</label>
    
    				<input id="select-type-1" name="radio-set-1" type="radio" class="ff-selector-type-1" />
    				<label for="select-type-1" class="ff-label-type-1">Web Design</label>
    
    				<input id="select-type-2" name="radio-set-1" type="radio" class="ff-selector-type-2" />
    				<label for="select-type-2" class="ff-label-type-2">Video</label>
    
    				<input id="select-type-3" name="radio-set-1" type="radio" class="ff-selector-type-3" />
    				<label for="select-type-3" class="ff-label-type-3">Logotypes</label>
    
    				<input id="select-type-4" name="radio-set-1" type="radio" class="ff-selector-type-4" />
    				<label for="select-type-4" class="ff-label-type-4">Print Design</label>
    
    				<div class="clr"></div>
    
    				<ul class="ff-items">
    					<li class="ff-item-type-1">
    						<a href="osaretinogbebor.com/img/Osaretin_One.jpg" title="Dog">
    							<span>Media Grid</span>
    						<div class="brdr-portfolio">
    							<img class="rollover_img" src="http://placehold.it/250x250" alt="1" />
    						</div>
    						</a>
    
    					<li class="ff-item-type-2">
    						<a href="http://www.youtube.com/embed/zOyKvfMLOuQ" title="Lamborghini Aventador">
    							<span>Notify</span>
    						<div class="brdr-portfolio">
    							<img class="rollover_img" src="http://placehold.it/250x250" alt="2" />
    						</div>
    						</a>
    
    					<li class="ff-item-type-2">
    						<a href="https://player.vimeo.com/video/87701971" title="Yosemite">
    							<span>Peek Calendar</span>
    						<div class="brdr-portfolio">
    							<img class="rollover_img" src="http://placehold.it/250x250" alt="3" />
    						</div>
    						</a>
    
    					<li class="ff-item-type-3">
    						<a href="img/bridge.jpg" title="City">
    							<span>ONC</span>
    						<div class="brdr-portfolio">
    							<img class="rollover_img" src="http://placehold.it/250x250" alt="4" />
    						</div>
    						</a>
    
    					<li class="ff-item-type-4">
    						<a href="img/road.jpg" title="Camera">
    							<span>Essential Butterfly</span>
    						<div class="brdr-portfolio">
    							<img class="rollover_img" src="http://placehold.it/250x250" alt="5" />
    						</div>
    						</a>
    
    					<li class="ff-item-type-3">
    						<a href="img/trail.jpg" title="Mountains">
    							<span>Bike</span>
    						<div class="brdr-portfolio">
    							<img class="rollover_img" src="http://placehold.it/250x250" alt="6" />
    						</div>
    						</a>
    
    					<li class="ff-item-type-4">
    						<a href="img/tunnel.jpg" title="Mountains">
    							<span>Your Local</span>
    						<div class="brdr-portfolio">
    							<img class="rollover_img" src="http://placehold.it/250x250" alt="6" />
    						</div>
    						</a>
    
    					<li class="ff-item-type-3">
    						<a href="img/write.jpg" title="Mountains">
    							<span>Change</span>
    						<div class="brdr-portfolio">
    							<img class="rollover_img"  src="http://placehold.it/250x250" alt="6" />
    						</div>
    						</a>
    
    			</div>
    
                </div>
            </div>
        </div><!-- end Portfolio -->

    [Moderator Note: Please post code & markup between backticks or use the code button. Your posted code may now have been permanently damaged by the forum's parser.]

    My site currently:
    osaretinogbebor.com

Reply

You must log in to post.

About this Topic