Currently I have this web page:
as it shows in the image, I want the main text to come right after the heading, but the sidebar pushes it down. How can I fix this problem?
The code is:
<div class="row content-area-main">
<div class="col-md-4">
<img src="img/double-lily-modified3.png" alt="LilyPond logo">
</div>
<div class="col-md-5 header-info">
<h1 class="header-info-title">LilyPond</h1>
<p>... music notation for everyone</p>
</div>
<div class="col-md-3">
<div class="card card-block">
<h4 class="card-title">Stable Release</h4>
<ul class="list-group list-group-flush">
<li class="list-group-item">Download 2.18.2</li>
<li class="list-group-item">Manuals 2.18.2</li>
</ul>
</div>
<div class="card card-block">
<h4 class="card-title">Unstable Release</h4>
<ul class="list-group list-group-flush">
<li class="list-group-item">Download 2.19.51</li>
<li class="list-group-item">Manuals 2.19.51</li>
</ul>
</div>
<div class="card card-block">
<h4 class="card-title">Pondings</h4>
<p>The LilyPond Blog is up and running here! Anyone can follow and leave comments on the blog. To contribute, contact Urs Liska.</p>
</div>
</div>
</div>
<div class="row content-area-main">
<div class="col-md-8">
<p>LilyPond is a music engraving program, devoted to producing the highest-quality sheet music possible. It brings the aesthetics of traditionally engraved music to computer printouts. LilyPond is free software and part of the GNU Project.</p>
<p class="header-info-link">Read more in our Introduction!</p>
</div>
</div>
<div class="row content-area">
<div class="col-md-8">
<div class="card card-block">
<h4 class="card-title">Beatuiful Sheet Music</h4>
<img src="img/bwv861-lilypond.png" class="img-fluid img-thumbnail card-image-custom" width="100%">
<p class="card-text">LilyPond is a powerful and flexible tool for engraving tasks of all kinds, for example classical music (like the example above by J.S. Bach), complex notation, early music, modern music, tablature, vocal music, lead sheets, educational materials, large orchestral projects, customized output, and even Schenker graphs.</p>
<span class="card-link">Browse our gallery of Examples and be inspired!</span>
</div>
</div>
</div>
<div class="row content-area-main">
<div class="col-md-8">
<div class="row">
<div class="col-md-6">
<img src="img/double-lily-modified3.png" alt="LilyPond logo">
</div>
<div class="col-md-6 header-info">
<h1 class="header-info-title">LilyPond</h1>
<p>... music notation for everyone</p>
</div>
</div>
<div class="row content-area-main">
<div class="col-md-12">
<p>LilyPond is a music engraving program, devoted to producing the highest-quality sheet music possible. It brings the aesthetics of traditionally engraved music to computer printouts. LilyPond is free software and part of the GNU Project.</p>
<p class="header-info-link">Read more in our Introduction!</p>
</div>
</div>
<div class="row content-area">
<div class="col-md-12">
<div class="card card-block">
<h4 class="card-title">Beatuiful Sheet Music</h4>
<img src="img/bwv861-lilypond.png" class="img-fluid img-thumbnail card-image-custom" width="100%">
<p class="card-text">LilyPond is a powerful and flexible tool for engraving tasks of all kinds, for example classical music (like the example above by J.S. Bach), complex notation, early music, modern music, tablature, vocal music, lead sheets, educational materials, large orchestral projects, customized output, and even Schenker graphs.</p>
<span class="card-link">Browse our gallery of Examples and be inspired!</span>
</div>
</div>
</div>
</div>
<div class="col-md-3">
<div class="card card-block">
<h4 class="card-title">Stable Release</h4>
<ul class="list-group list-group-flush">
<li class="list-group-item">Download 2.18.2</li>
<li class="list-group-item">Manuals 2.18.2</li>
</ul>
</div>
<div class="card card-block">
<h4 class="card-title">Unstable Release</h4>
<ul class="list-group list-group-flush">
<li class="list-group-item">Download 2.19.51</li>
<li class="list-group-item">Manuals 2.19.51</li>
</ul>
</div>
<div class="card card-block">
<h4 class="card-title">Pondings</h4>
<p>The LilyPond Blog is up and running here! Anyone can follow and leave comments on the blog. To contribute, contact Urs Liska.</p>
</div>
</div>
</div>
Grid systems are used for creating page layouts through a series of
rows and columns that house your content. Use rows to create
horizontal groups of columns.
Bootstrap Grid System
Your .row clears the last .row. Try placing your content in the column you'd like it within the same .row.
Related
Hi I have this portion of my website Link here to broken portion and for some reason, the bottom of one of my sections is cut off. If I add a different margin or padding to the main class I just get white area added and the bootstrap card still can't be read. Any ideas?
Picture:
HTML Code:
<div class="main">
<div class="page-header" id="Services" style="background-image: url('./assets/img/background-grassfade.png'); background-color:#fff;">
<div class="filter"></div>
<div class="container-fluid">
<div class="motto">
<div class="row">
<div class="col-md-8 offset-md-2 text-center">
<div class="space-top"></div>
<h2 class="title">Services</h2>
</div>
<div class="container">
<div class="space-top"></div>
<div class="card" data-background="color" data-color="blue">
<div class="card-body text-center d-flex flex-column">
<div class="row">
<div class="col-md-4 align-self-center vcenter">
<div class="card-icon">
<i class="far fa-car-mechanic"></i>
</div>
</div>
<div class="col-md-8 venter">
<h4 class="card-title">Roadside Assistance</h4>
<p class="card-description">Jumpstarting, Tire changes, Fuel and fluid dilvery, Extrication/Pullout. </p>
<p class="card-footer align-self-end mt-auto">
<b>*Delivery of non-alcoholic refreshments upon request for an additional charge.</b>
</p>
</div>
</div>
</div>
</div>
<div class="card" data-background="color" data-color="green">
<div class="card-body text-center d-flex flex-column">
<div class="row">
<div class="col-md-4 align-self-center vcenter">
<div class="card-icon">
<i class="far fa-people-carry"></i>
</div>
</div>
<div class="col-md-8 venter">
<h4 class="card-title">Hauling</h4>
<p class="card-description">Including Rock, Sand, Mulch, Dirt, Feed, Hay, Plants, Trees, Firewood, Applicances, etc. Moving Services, Junk/debris cleanup, small buisness deliveries, post garage sale deliveries. </p>
<p class="card-footer align-self-end mt-auto">
<b>*Loading, transport and unloading covered.</b>
</p>
</div>
</div>
</div>
</div>
<div class="card" data-background="color" data-color="orange">
<div class="card-body text-center d-flex flex-column">
<div class="row">
<div class="col-md-4 align-self-center vcenter">
<div class="card-icon">
<i class="far fa-home"></i>
</div>
</div>
<div class="col-md-8 venter">
<h4 class="card-title">Residential Home Exterior</h4>
<p class="card-description">Including Snow removal (driveways and sidewalks only currently) , Lawn care, Tree and Bush pruning/trimming, Stump removal, Leaf removal, Gutter cleaning, yard debris and junk removal, Landscaping, Power washing (Homes, Concrete, vehicles),
Window washing, Light construction demolition, Fence demolition. </p>
</div>
</div>
</div>
</div>
<div class="card" data-background="color" data-color="brown">
<div class="card-body text-center d-flex flex-column">
<div class="row">
<div class="col-md-4 align-self-center vcenter">
<div class="card-icon">
<i class="far fa-toolbox"></i>
</div>
</div>
<div class="col-md-8 venter">
<h4 class="card-title">Residential Home Interior</h4>
<p class="card-description">Including Window washing, Batt insulation installation and removal, Drywall installation and removal, Indoor painting, Mild carpet and flooring cleanings, Maid services, Rearranging furniture, Drain cleaning, General home maintenance,
Baby proofing. </p>
</div>
</div>
</div>
</div>
<div class="card" data-background="color" data-color="yellow">
<div class="card-body text-center d-flex flex-column">
<div class="row">
<div class="col-md-4 align-self-center vcenter">
<div class="card-icon">
<i class="far fa-shopping-basket"></i>
</div>
</div>
<div class="col-md-8 venter">
<h4 class="card-title">Miscellaneous Services</h4>
<p class="card-description">Construction site clean up, Storm debris removal, Grocery pick up and delivery, vehicle hail dent repair, vehicle washing and detailing (we drive to you!), Dog walking, pet feces removal (outdoors only), Holiday lights/decoration installation.
Looking for something not on this list? Call for pricing/availability! </p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
The template is from Creative Tim: Creative Tim's Website and the CSS used is the included CSS with minimal changes and nothing that should touch any of this.
What I've tried:
Adding margin/margin-bottom to the main, container-fluid, motto and row as well as padding/padding-bottom
I have tried to change the margin-top of the section below it.
I have tried to add space using both <br /> and the provided space-top class.
I can include more of the HTML for the section below if needed. I included a link to the site currently, you should be able to use inspect element to sift around with grabbing CSS but I can include CSS if need be. I couldn't find anywhere that said I could not post a link to my page directly but if I cannot please let me know and I will remove it.
The page-header element inside paper-kit.css has a max-height:
.page-header {
max-height: 999px;
}
You content must be taller than that max-height (not sure why one would set a max-height on a div in a vertical layout but oh well). Comment it out in the web dev tools and all looks fine.
there is a max height of 999px in the class page-header, which is limiting the height remove it
I'm trying to get two different cards to update their active tab-pane using one nav-link.
Here is my code. As you can see, I have one card that has act info and one that has the corresponding video in it. When I click to see the other act info, I want the video to also change (at the moment there is no second video - it just says 'stuff number 2'
<div class="row pt-5" id="acts">
<div class="col-md-4 offset-md-1">
<div class="card">
<!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist">
<li class="nav-item">
<a class="nav-link active" data-toggle="tab" href="#act1" role="tab">Take Five</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#act2" role="tab">Thank You For Your Consideration</a>
</li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div class="tab-pane active" id="act1" role="tabpanel">
<div class="card-block">
<h3 class="card-title">Take Five</h3>
<p class="card-text">Do you also have trouble getting out of bed? Working 9 to 5, the same routine every day.. “Take Five” is about one of those days, a light hearted piece full of absurdness and acrobatics. People of all ages can enjoy the 7- minute act, let Ida surprise you!</p>
</div>
</div>
<div class="tab-pane" id="act2" role="tabpanel">
<div class="card-block">
<div class="container">
<div class="row">
<div class="col-md-9">
<h3 class="card-title">Thank You For Your Consideration</h3>
<p class="card-text">What do you write in a letter when you apply for a job? Everybody has been there, behind a computer screen, mind blank. It sounds too pretentious or too insecure. If only they would see the real you. But if that’s a good idea.. An act about struggles that everyone has experienced, brought with humour, brutal honesty and creativity in movement. Ida’s genuine story is a 6 minute text-based circus performance.</p>
</div>
<div class="col-md-3">
<img src="" alt="TYFYC" class="img-fluid img-rounded">
</div>
</div>j
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-5 offset-md-2">
<div class="card">
<div class="tab-content">
<div class="tab-pane active" id="act1" role="tabpanel">
<div class="card-block">
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="https://player.vimeo.com/video/220114759" allowfullscreen></iframe>
</div>
</div>
</div>
<div class="tab-pane" id="act2" role="tabpanel">
Stuff number 2
</div>
</div>
</div>
</div>
</div>
Is there a way to do this without using a javascript .addClass('active')?
This question already has an answer here:
Bootstrap 3 - Aligning column height
(1 answer)
Closed 6 years ago.
Beginner here, I am building a one page bootstrap site, I have divided the site into sections, i have already added 1st image as the background in section one.
I have tried using the columns but no vial.
I cant get the two images side by side like shown in the prototype (http://imgur.com/a/MJQ2w).
I want the page layout to be like this with no margins but i am unable to do this with bootstrap. Please help me with your expertise.
<header style="background-image: url('static/assets/home-bg.jpg');">
<div class="intro-content">
<div class="brand-name">Learning & Experience</div>
<hr class="colored">
<div class="brand-name-subtext">Lorem Ipsum Dolor Init
</div>
</div>
<div class="scroll-down">
<a class="btn page-scroll" href="#about"><i class="fa fa-angle-down fa-fw"></i></a>
</div>
</header>
<section id="about">
<div class="container-fluid">
<div class="row row-no-gutter">
<div class="col-md-6 img-responsive">
<img src="static/assets/training.png">
</div>
<div class="col-md-6 img-responsive">
<img src="static/assets/recruit.png" >
</div>
</div>
</div>
<div>
Check my example here, Without removes any padding provide by bootstrap
HTML
<section class="values">
<div class="col-md-4 box text-white box blues">
<div class="box-home">
<h4>our values</h4>
<p>At MOCAZ PRIME, with the expertise of experienced traders, we join in giving the best advice and knowledge to individuals to ensure their financial goals can be achieved in any market conditions.</p>
<div class="icon-text">
<p>01.</p>
</div>
</div>
</div>
<div class="col-md-4 text-white box bg-city blacks">
<div class="box-home">
<h4>our philipsophy</h4>
<p>It is our ambition to keep up challenges of a dynamic and changing market. Consequently it is necessary to flexibly bring new techniques which meet the needs of our customers. This all predetermines us to achieve a leading position in the global financial advisory services.</p>
<div class="icon-text">
<p>02.</p>
</div>
</div>
</div>
<div class="col-md-4 text-white box blacks">
<div class="box-home">
<h4>our mission</h4>
<p>Our mission is to facilitate a world-class foreign exchange, metal and contracts for difference trading environment. We're dedicated to providing industry-leading technology to the international trading community and we strive to deliver educational tools and resources that enable traders to further develop their trading skills.</p>
<div class="icon-text">
<p>03.</p>
</div>
</div>
</div>
</section>
DEMO
Replace your code
<div class="col-md-6 img-responsive">
<img src="static/assets/training.png">
</div>
<div class="col-md-6 img-responsive">
<img src="static/assets/recruit.png" >
</div>
With following line of code
<div class="col-md-6">
<img src="static/assets/training.png" class=" img-responsive" />
</div>
<div class="col-md-6">
<img src="static/assets/recruit.png" class=" img-responsive" />
</div>
Fixed the issue, Thanks guys.
<section id="about">
<div class="container-fluid">
<div class="row" id="port2-second-row">
<div class="col-xs-6 imgcont" id="port2-first-col">
<img src="static/assets/training.png" alt="training" />
</div> <!-- end col-sm-6 -->
<div class="col-xs-6 imgcont" id="port2-second-col">
<img src="static/assets/recruit.png" alt="recruit" />
</div> <!-- end col-sm-6 -->
</div> <!-- end port-second-row -->
CSS :
img {
width: 100%;
height: 100%;}
.imgcont {
padding: 0px;
I've made a grid of 6 using two rows with columns and was trying to make it so when the screen resizes from large to small it rearranges from 3 to 2 to 1. But I can't seem to make that work, I could have sworn the last time I used bootstrap to do this it was working. What happens is as the screen resizes, the profiles start to overlap over each other. What I have tried to do is add a css line for each resolution and increase the width percentage which seems to work, but I feel like it's not a clean approach.
here is the code:
<!-- Spotlight -->
<section id="spotlight">
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="col-md-4">
<div class="card card-3">
<img src="http://convio.cancer.ca/mIFE/img/spotlight/man4.jpg">
<h3>Xanthe</h3>
<p>Inspired by the movie Tangled, Xanthe's goal was to grow her hair down to her ankles - but now wants to help cancer patients by donating her hair and raising funds to support the fight against cancer. Xanthe raised over $1,000 in honour of her
cousin who is battling leukemia.
</p>
</div>
</div>
<div class="col-md-4">
<div class="card card-3">
<img src="http://convio.cancer.ca/mIFE/img/spotlight/man4.jpg">
<h3>Team Gary</h3>
<p>Team Gary recently ran in the Mississauga Marathon to support their Grandfather, Father and Family member Gary who is currently fighting liver cancer. The team of 13 raised an incredible $4,455 in the fight against cancer. Way to go Team Gary!</p>
</div>
</div>
<div class="col-md-4">
<div class="card card-3">
<img src="http://convio.cancer.ca/mIFE/img/spotlight/man4.jpg">
<h3>Johnny Blonde Kitchen</h3>
<p>This year they were very excited to be opening a storefront location. They raised $1,300 by fundraising online, and donating 10% of sales from opening day. In addition to fundraising, Jonny cut off his famous locks and donated several inches
to Locks Of Love. We are so excited to have them be a part of our CCS family!</p>
</div>
</div>
</div>
<div class="row">
<div class="col-md-4">
<div class="card card-3">
<img src="http://convio.cancer.ca/mIFE/img/spotlight/man4.jpg">
<h3>Brevitas Consulting</h3>
<p>Brevitas Consulting takes on Breast Cancer Awareness Month each October with a walk-a-thon held one weekend during October bringing together their team in a fun, uplifting event. Thank you Brevitas!
</p>
</div>
</div>
<div class="col-md-4">
<div class="card card-3">
<img src="http://convio.cancer.ca/mIFE/img/spotlight/man4.jpg">
<h3>Irudaya</h3>
<p>These talented young women created and executed a two hour dance production; Journey: A Glimpse Into Tamil Cinema. With the Society being one of their charities of choice, these dancers raised $10,000 for the fight against cancer! Amazing work!</p>
</div>
</div>
<div class="col-md-4">
<div class="card card-3">
<img src="http://convio.cancer.ca/mIFE/img/spotlight/man4.jpg">
<h3>Maureen Parent</h3>
<p>Maureen is a breast cancer survivor who is dedicate to raising funds for cancer research. In 10 years she has raised over $85,000 with an annual pasta dinner and has her sights set on raising $1,000,000 for the fight against breast cancer.</p>
</div>
</div>
</div>
<div class="row text-center">
<div class="col-sm-12">
<div class="col-sm-12">
<div class="addPad">
<p>Be a cancer fighter <a class="btn btn-primary btn-lg btn-padin" id="hideshow2">Get Started</a></p>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<!-- Spotlight -->
<section id="spotlight">
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="col-md-4">
<div class="card card-3">
<img src="http://convio.cancer.ca/mIFE/img/spotlight/man4.jpg">
<h3>Xanthe</h3>
<p>Inspired by the movie Tangled, Xanthe's goal was to grow her hair down to her ankles - but now wants to help cancer patients by donating her hair and raising funds to support the fight against cancer. Xanthe raised over $1,000 in honour of
her cousin who is battling leukemia.
</p>
</div>
</div>
<div class="col-md-4">
<div class="card card-3">
<img src="http://convio.cancer.ca/mIFE/img/spotlight/man4.jpg">
<h3>Team Gary</h3>
<p>Team Gary recently ran in the Mississauga Marathon to support their Grandfather, Father and Family member Gary who is currently fighting liver cancer. The team of 13 raised an incredible $4,455 in the fight against cancer. Way to go Team Gary!</p>
</div>
</div>
<div class="col-md-4">
<div class="card card-3">
<img src="http://convio.cancer.ca/mIFE/img/spotlight/man4.jpg">
<h3>Johnny Blonde Kitchen</h3>
<p>This year they were very excited to be opening a storefront location. They raised $1,300 by fundraising online, and donating 10% of sales from opening day. In addition to fundraising, Jonny cut off his famous locks and donated several inches
to Locks Of Love. We are so excited to have them be a part of our CCS family!</p>
</div>
</div>
</div>
<div class="row">
<div class="col-md-4">
<div class="card card-3">
<img src="http://convio.cancer.ca/mIFE/img/spotlight/man4.jpg">
<h3>Brevitas Consulting</h3>
<p>Brevitas Consulting takes on Breast Cancer Awareness Month each October with a walk-a-thon held one weekend during October bringing together their team in a fun, uplifting event. Thank you Brevitas!
</p>
</div>
</div>
<div class="col-md-4">
<div class="card card-3">
<img src="http://convio.cancer.ca/mIFE/img/spotlight/man4.jpg">
<h3>Irudaya</h3>
<p>These talented young women created and executed a two hour dance production; Journey: A Glimpse Into Tamil Cinema. With the Society being one of their charities of choice, these dancers raised $10,000 for the fight against cancer! Amazing
work!</p>
</div>
</div>
<div class="col-md-4">
<div class="card card-3">
<img src="http://convio.cancer.ca/mIFE/img/spotlight/man4.jpg">
<h3>Maureen Parent</h3>
<p>Maureen is a breast cancer survivor who is dedicate to raising funds for cancer research. In 10 years she has raised over $85,000 with an annual pasta dinner and has her sights set on raising $1,000,000 for the fight against breast cancer.</p>
</div>
</div>
</div>
<div class="row text-center">
<div class="col-sm-12">
<div class="col-sm-12">
<div class="addPad">
<p>Be a cancer fighter <a class="btn btn-primary btn-lg btn-padin" id="hideshow2">Get Started</a>
</p>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
to give you a better idea of what's happening here's a screenshot of when the screen reaches 991px
Any suggestion is greatly appreciated! thanks for your time
Update
Restructured the HTML according to W3S, still gives me the same overlapping issue.
<section id="spotlight">
<div class="container">
<div class="row">
<div class="col-sm-4">
<div class="card card-3">
<img src="http://convio.cancer.ca/mIFE/img/spotlight/xanthe.jpg">
<h3>Xanthe</h3>
<p> </p>
</div>
</div>
<div class="col-sm-4">
<div class="card card-3">
<img src="http://convio.cancer.ca/mIFE/img/spotlight/TeamGary.jpg">
<h3>Team Gary</h3>
<p></p>
</div>
</div>
<div class="col-sm-4">
<div class="card card-3">
<img src="http://convio.cancer.ca/mIFE/img/spotlight/Johnny.jpg">
<h3>Johnny Blonde Kitchen</h3>
<p></p>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-4">
<div class="card card-3">
<img src="http://convio.cancer.ca/mIFE/img/spotlight/Brevitas.jpg">
<h3>Brevitas Consulting</h3>
<p></p>
</div>
</div>
<div class="col-sm-4">
<div class="card card-3">
<img src="http://convio.cancer.ca/mIFE/img/spotlight/irudaya.jpg">
<h3>Irudaya</h3>
<p></p>
</div>
</div>
<div class="col-sm-4">
<div class="card card-3">
<img src="http://convio.cancer.ca/mIFE/img/spotlight/MaureenParent.jpg">
<h3>Maureen Parent</h3>
<p></p>
</div>
</div>
</div>
<div class="row text-center">
<div class="col-sm-12">
<div class="col-sm-12">
<div class="addPad">
<p>Be a cancer fighter <a class="btn btn-primary btn-lg btn-padin" id="hideshow2">Get Started</a></p>
</div>
</div>
</div>
</div>
</div>
</section>
The images are the problem here. Add class="img-responsive" to the image tag and it should fix it for you. At a certain width, the image size gets bigger than the column width and hence it overlaps.
taking a beginner HTML/Bootstrap/CSS etc. course so I'm pretty new to all of this.
I'm trying to align these three "Bootstrap Thumbnail Custom Content" elements next to each other, but I don't have any idea how: http://imgur.com/NChc9UA
I basically need to make it look like it does on their site: http://getbootstrap.com/components/#thumbnails
Here's my code:
<div class="row">
<div class="col-sm-6 col-md-4">
<div class="thumbnail">
<img src="images/obliviontn.jpg" alt="Oblivion">
<div class="caption">
<h3>Let's Play Oblivion</h3>
<p>One of Grohlvana's most popular series, Let's Play Oblvion is a lengthy LP that explores Tamriel in Bethesda's epic fourth Elder Scrolls title.</p>
<p>Watch</p>
</div>
</div>
<div class="row">
<div class="col-sm-6 col-md-4">
<div class="thumbnail">
<img src="images/skyrimtn.jpg" alt="Skyrim">
<div class="caption">
<h3>Skyrim's Hidden Treasures</h3>
<p>Grohlvana's most popular and unique series, Skyrim's Hidden Treasures explores locations in the fifth Elder Scrolls game that aren't tied to any specific quest</p>
<p>Watch</p>
</div>
</div>
<div class="row">
<div class="col-sm-6 col-md-4">
<div class="thumbnail">
<img src="images/fallout3tn.jpg" alt="Fallout 3">
<div class="caption">
<h3>Let's Play Fallout 3</h3>
<p>The current in-progress Let's Play on Grohlvana's channel. Watch as Jack scours the wasteland in hopes to save its various inhabitants.</p>
<p>Watch</p>
</div>
</div>
Again, really new to this so please try to explain thoroughly. Not sure if this is an HTML or CSS issue.
Thanks for any help.
If you notice, each of your three code snippets above have the same parent container i.e. <div class="row">. The .row div is a block-level element with a 100% width which is why your three columns aren't getting aligned in one line. What you can do is that wrap your three columns inside one single <div class="row"> like this:
<div class="row">
<div class="col-sm-6 col-md-4">
<div class="thumbnail">
<img src="images/obliviontn.jpg" alt="Oblivion">
<div class="caption">
<h3>Let's Play Oblivion</h3>
<p>One of Grohlvana's most popular series, Let's Play Oblvion is a lengthy LP that explores Tamriel in Bethesda's epic fourth Elder Scrolls title.</p>
<p>Watch</p>
</div>
</div>
</div>
<div class="col-sm-6 col-md-4">
<div class="thumbnail">
<img src="images/fallout3tn.jpg" alt="Fallout 3">
<div class="caption">
<h3>Let's Play Fallout 3</h3>
<p>The current in-progress Let's Play on Grohlvana's channel. Watch as Jack scours the wasteland in hopes to save its various inhabitants.</p>
<p>Watch</p>
</div>
</div>
</div>
<div class="col-sm-6 col-md-4">
<div class="thumbnail">
<img src="images/skyrimtn.jpg" alt="Skyrim">
<div class="caption">
<h3>Skyrim's Hidden Treasures</h3>
<p>Grohlvana's most popular and unique series, Skyrim's Hidden Treasures explores locations in the fifth Elder Scrolls game that aren't tied to any specific quest</p>
<p>Watch</p>
</div>
</div>
</div>
</div>
Also, in the code which you've posted above, you were missing a lot of closing </div> tags.
Here's a demo using your code (view as full page):
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap-theme.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" />
<div class="row">
<div class="col-sm-6 col-md-4">
<div class="thumbnail">
<img src="images/obliviontn.jpg" alt="Oblivion">
<div class="caption">
<h3>Let's Play Oblivion</h3>
<p>One of Grohlvana's most popular series, Let's Play Oblvion is a lengthy LP that explores Tamriel in Bethesda's epic fourth Elder Scrolls title.</p>
<p>Watch
</p>
</div>
</div>
</div>
<div class="col-sm-6 col-md-4">
<div class="thumbnail">
<img src="images/fallout3tn.jpg" alt="Fallout 3">
<div class="caption">
<h3>Let's Play Fallout 3</h3>
<p>The current in-progress Let's Play on Grohlvana's channel. Watch as Jack scours the wasteland in hopes to save its various inhabitants.</p>
<p>Watch
</p>
</div>
</div>
</div>
<div class="col-sm-6 col-md-4">
<div class="thumbnail">
<img src="images/skyrimtn.jpg" alt="Skyrim">
<div class="caption">
<h3>Skyrim's Hidden Treasures</h3>
<p>Grohlvana's most popular and unique series, Skyrim's Hidden Treasures explores locations in the fifth Elder Scrolls game that aren't tied to any specific quest</p>
<p>Watch
</p>
</div>
</div>
</div>
</div>
jsFiddle Demo.