My tab works well if I have a lot of text.
But has soon as I shrink the text the tab get's smaller. Any idea what settings may be causing this?
I know it works well with only bootstrap. I think I have a settings that is messing up my tab. What should I be looking for in my custom css? This is my css: https://ufile.io/ve4xc
HTML:
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<div role="tabpanel">
<div class="col-sm-3">
<ul class="nav nav-pills brand-pills nav-stacked" role="tablist">
<li role="presentation" class="brand-nav active">Application</li>
<li role="presentation" class="brand-nav">GitLab</li>
<li role="presentation" class="brand-nav">Docker</li>
</ul>
</div>
<div class="col-sm-9">
<div class="tab-content">
<div role="tabpanel" class="tab-pane active" id="app">
<p>
Lo
</p>
</div>
<div role="tabpanel" class="tab-pane" id="gitlab">
</div>
<div role="tabpanel" class="tab-pane" id="docker">
<p>
Lorem ipsizzle dolor away amizzle, consectetuer pizzle elizzle. Nullizzle yo velizzle, check it out volutpizzle, quis, gravida vel, yo.
Ma nizzle eget tortor. Sizzle eros. My shizz izzle dolizzle gizzle turpis tempizzle fo shizzle mah nizzle fo rizzle, mah home g-dizzle.
Maurizzle pellentesque nibh izzle own yo'. Check it out in tortor. Pellentesque fizzle rhoncizzle nisi.
</p>
<p>
In hac habitasse platea dictumst. Shizzlin dizzle dapibus. You son of a bizzle tellizzle urna, pretizzle fo shizzle mah nizzle fo rizzle, mah home g-dizzle,
ghetto ac, check it out vitae, nunc. Shizzlin dizzle suscipizzle. Integizzle sempizzle velit sizzle dizzle.
</p>
</div>
<div role="tabpanel" class="tab-pane" id="tab4">
<p>
Collaboratively administrate empowered markets via plug-and-play networks.
Dynamically procrastinate B2C users after installed base benefits. Dramatically visualize customer directed convergence without
revolutionary ROI.
</p>
<p>
Efficiently unleash cross-media information without cross-media value.
Quickly maximize timely deliverables for real-time schemas. Dramatically maintain clicks-and-mortar
solutions without functional solutions.
</p>
<p>
Completely synergize resource sucking relationships via premier niche markets. Professionally cultivate
one-to-one customer service with robust ideas. Dynamically innovate resource-leveling customer service
for state of the art customer service.
</p>
</div>
</div>
Well, my guess is that you need to set the class "row" to the first div:
<div role="tabpanel" class="row">
<div class="col-sm-3">
...
Try that. I also recommend you to check bootstrap grid documentation to get it right.
Related
Hi i'm working with a new template, and there's a main image on the landing page.
photo
It's the photo behind the main text. I cannot figure out where the img source is.
I don't see it in the HTML. I just would like to find where this stock image is and swap my new image into its place.
I'm pretty sure the following code is where it should be:
<!-- home -->
<section aria-label="home" class="mainbg" id="home">
<!-- intro -->
<div class="container">
<div class="row">
<div class="overlay-main v-align">
<div class="col-md-10 col-xs-11">
<h1 class="onStep" data-animation="animbouncefall" data-time="300">LOUIS WALLACE CONSTRUCTION</h1>
<div class="onStep" data-animation="fadeInUp" data-time="600" id="slidertext">
<h3 class="main-text">We Build Your Dream</h3>
<h3 class="main-text">We Are Passionate</h3>
<h3 class="main-text">We Are Capable</h3>
</div>
<p class="onStep" data-animation="animbouncefall" data-time="900">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum sit amet eas malesuada leo. Vestibulum eros magna volutpat at facilisis cursus, tempus etex Vestibulum pellentesque et dolor sit amet. Pellentesque eu enim nec nibh convallis suscipit. Morbi interdum dignissim metus dignissim gravida.
</p>
</div>
</div>
</div>
</div>
<!-- intro end -->
</section>
<!-- home end -->
Is there some way it could be in the css?
Edit: when I inspect it, first of all I'm not entirely sure which one is for the image. In any case, when I select what I think is the right element, the styles area don't point to any img tag.
It's more than likely being displayed as a background using the mainbg css class. Can you look in your stylesheet for mainbg?
I am using this pre-made profile code. They have given me the html code to it. So I tried using it. And all it gave me was the wrong display. I have linked the picture of what it should be displayed as. And to what it is displaying when I use it.
Also sorry if the code is a little wonky. I just got started with it. Thanks to whom ever helps me!
What it should display as
What it does instead.
Code:
<div class="container">
<div class="row clearfix well">
<div class="col-md-2 column">
<img class="img-thumbnail" alt="140x140"
src="http://lorempixel.com/140/140/" />
</div>
<div class="col-md-8 column">
<blockquote>
<p>
Potter Guy
</p> <small>21 / M / Single / Straight <cite>London
England</cite></small>
</blockquote>
</div>
<div class="col-md-2 column">
<button class="btn btn-default btn-block" type="button">
Poke
</button>
<button class="btn btn-default btn-block" type="button">
Message
</button>
<button class="btn btn-default btn-block" type="button">
Save
</button>
</div>
</div>
<div class="row clearfix">
<div class="col-md-12 column">
<div class="tabbable" id="tabs-444468">
<ul class="nav nav-tabs">
<li class="active">
About
</li>
<li>
Photos
</li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="panel-200304">
<div class="row clearfix">
<div class="col-md-8 column">
<p>
<strong>About me</strong><br/>
it's just awful to write this stuff and i
hate having to sell myself or make myself seem like some amazing superhuman.
i have some generic interests, im a bit shy, and i dont play games and just
want be there for a girl and make her feel like the most unique and special
person, so this is one of the most annoying experiences ever. i dont even
know why i bother with this stuff when everyone is basically selling
themselves as an idealized superman and I just want girls to know who I am
and they can take or leave it.
</p>
<hr/>
<p>
<strong>What i am doing with my
life</strong><br/>
it's just awful to write this stuff and i
hate having to sell myself or make myself seem like some amazing superhuman.
i have some generic interests, im a bit shy, and i dont play games and just
want be there for a girl and make her feel like the most unique and special
person, so this is one of the most annoying experiences ever. i dont even
know why i bother with this stuff when everyone is basically selling
themselves as an idealized superman and I just want girls to know who I am
and they can take or leave it.
</p>
<hr/>
<p>
<strong>I am really good at ?</strong><br/>
it's just awful to write this stuff and i
hate having to sell myself or make myself seem like some amazing superhuman.
i have some generic interests, im a bit shy, and i dont play games and just
want be there for a girl and make her feel like the most unique and special
person, so this is one of the most annoying experiences ever. i dont even
know why i bother with this stuff when everyone is basically selling
themselves as an idealized superman and I just want girls to know who I am
and they can take or leave it.
</p>
<hr/>
<p>
<strong>The first thing you will notice
about me?</strong><br/>
it's just awful to write this stuff and i
hate having to sell myself or make myself seem like some amazing superhuman.
i have some generic interests, im a bit shy, and i dont play games and just
want be there for a girl and make her feel like the most unique and special
person, so this is one of the most annoying experiences ever. i dont even
know why i bother with this stuff when everyone is basically selling
themselves as an idealized superman and I just want girls to know who I am
and they can take or leave it.
</p>
<hr/>
<p>
<strong>I cant live without ?</strong><br/>
My Mobile
My Car
My Dog
</p>
<hr/>
<p class="well">
<strong>I am looking for ?</strong><br/>
someone good with heart
</p>
</div>
<div class="col-md-4 column">
<table class="table">
<thead>
<tr>
<th>
Details
</th>
<th>
His/ Her
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
Last Online
</td>
<td>
1 hour ago
</td>
</tr>
<tr>
<td>
Ethinicity
</td>
<td>
White
</td>
</tr>
<tr>
<td>
Height
</td>
<td>
5' 8"
</td>
</tr>
<tr>
<td>
Body type
</td>
<td>
Slim
</td>
</tr>
<tr>
<td>
Diet
</td>
<td>
Veg
</td>
</tr>
<tr>
<td>
Smoke
</td>
<td>
No
</td>
</tr>
<tr>
<td>
Drink
</td>
<td>
Occasionally
</td>
</tr>
<tr>
<td>
Drugs
</td>
<td>
No
</td>
</tr>
<tr>
<td>
Religion
</td>
<td>
Hindu
</td>
</tr>
<tr>
<td>
Sign
</td>
<td>
Vergo
</td>
</tr>
<tr>
<td>
Education
</td>
<td>
Masters
</td>
</tr>
<tr>
<td>
Job
</td>
<td>
Consultant
</td>
</tr>
<tr>
<td>
Income
</td>
<td>
5 figures
</td>
</tr>
<tr>
<td>
Language
</td>
<td>
<ol>
<li>English</li>
<li>Spanish</li>
<li>Hindi</li>
</ol>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<div class="tab-pane" id="panel-567649">
<div class="row clearfix">
<div class="col-md-8 column">
<img alt="140x140" src="http://lorempixel.com/140/140/" /><img
alt="140x140" src="http://lorempixel.com/140/140/" /><img alt="140x140"
src="http://lorempixel.com/140/140/" /><img alt="140x140"
src="http://lorempixel.com/140/140/" />
</div>
<div class="col-md-4 column">
<p>
Lorem ipsum dolor sit amet, <strong>consectetur adipiscing
elit</strong>. Aliquam eget sapien sapien. Curabitur in metus urna. In hac
habitasse platea dictumst. Phasellus eu sem sapien, sed vestibulum velit.
Nam
purus nibh, lacinia non faucibus et, pharetra in dolor. Sed iaculis posuere
diam ut cursus. <em>Morbi commodo sodales nisi id sodales. Proin
consectetur, nisi id commodo imperdiet, metus nunc consequat lectus, id
bibendum diam velit et dui.</em> Proin massa magna, vulputate nec bibendum
nec, posuere nec lacus. <small>Aliquam mi erat, aliquam vel luctus eu,
pharetra quis elit. Nulla euismod ultrices massa, et feugiat ipsum consequat
eu.</small>
</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
The provided HTML uses Bootstrap styling. Bootstrap is a commonly used library for user interfaces.
To use Bootstrap, you would include a link tag referencing the bootstrap CSS file in the head as well as a script tag referencing the bootstrap javascript file at the bottom of the body like so:
<!DOCTYPE html>
<html>
<head>
<title>Your web page's title</title>
<meta charset="UTF-8">
<meta name="description" content="Free Web tutorials">
<meta name="keywords" content="HTML,CSS,XML,JavaScript">
<meta name="author" content="John Doe">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>
<body>
<div class="container">
<div class="row clearfix well">
<div class="col-md-2 column">
<img class="img-thumbnail" alt="140x140"
src="http://lorempixel.com/140/140/" />
</div>
<div class="col-md-8 column">
<blockquote>
<p>
Potter Guy
</p> <small>21 / M / Single / Straight <cite>London
England</cite></small>
</blockquote>
</div>
<div class="col-md-2 column">
<button class="btn btn-default btn-block" type="button">
Poke
</button>
<button class="btn btn-default btn-block" type="button">
Message
</button>
<button class="btn btn-default btn-block" type="button">
Save
</button>
</div>
</div>
<div class="row clearfix">
<div class="col-md-12 column">
<div class="tabbable" id="tabs-444468">
<ul class="nav nav-tabs">
<li class="active">
About
</li>
<li>
Photos
</li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="panel-200304">
<div class="row clearfix">
<div class="col-md-8 column">
<p>
<strong>About me</strong><br/>
it's just awful to write this stuff and i
hate having to sell myself or make myself seem like some amazing superhuman.
i have some generic interests, im a bit shy, and i dont play games and just
want be there for a girl and make her feel like the most unique and special
person, so this is one of the most annoying experiences ever. i dont even
know why i bother with this stuff when everyone is basically selling
themselves as an idealized superman and I just want girls to know who I am
and they can take or leave it.
</p>
<hr/>
<p>
<strong>What i am doing with my
life</strong><br/>
it's just awful to write this stuff and i
hate having to sell myself or make myself seem like some amazing superhuman.
i have some generic interests, im a bit shy, and i dont play games and just
want be there for a girl and make her feel like the most unique and special
person, so this is one of the most annoying experiences ever. i dont even
know why i bother with this stuff when everyone is basically selling themselves as an idealized superman and I just want girls to know who I am and they can take or leave it.
I am really good at ?
it's just awful to write this stuff and i hate having to sell myself or make myself seem like some amazing superhuman. i have some generic interests, im a bit shy, and i dont play games and just want be there for a girl and make her feel like the most unique and special person, so this is one of the most annoying experiences ever. i dont even know why i bother with this stuff when everyone is basically selling themselves as an idealized superman and I just want girls to know who I am and they can take or leave it.
The first thing you will notice about me?
it's just awful to write this stuff and i hate having to sell myself or make myself seem like some amazing superhuman. i have some generic interests, im a bit shy, and i dont play games and just want be there for a girl and make her feel like the most unique and special person, so this is one of the most annoying experiences ever. i dont even know why i bother with this stuff when everyone is basically selling themselves as an idealized superman and I just want girls to know who I am and they can take or leave it.
I cant live without ?
My Mobile My Car My Dog
I am looking for ?
someone good with heart
Details His/ Her Last Online 1 hour ago Ethinicity White Height 5' 8" Body type Slim Diet Veg Smoke No Drink Occasionally Drugs No Religion Hindu Sign Vergo Education Masters Job Consultant Income 5 figures Language
English
Spanish
Hindi
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam eget sapien sapien. Curabitur in metus urna. In hac habitasse platea dictumst. Phasellus eu sem sapien, sed vestibulum velit. Nam purus nibh, lacinia non faucibus et, pharetra in dolor. Sed iaculis posuere diam ut cursus. Morbi commodo sodales nisi id sodales. Proin consectetur, nisi id commodo imperdiet, metus nunc consequat lectus, id bibendum diam velit et dui. Proin massa magna, vulputate nec bibendum nec, posuere nec lacus. Aliquam mi erat, aliquam vel luctus eu, pharetra quis elit. Nulla euismod ultrices massa, et feugiat ipsum consequat eu.
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</body>
</html>
Here's a quick pen
First off, apologies if my title isn't the most descriptive in the world, I couldn't think of anything else for it.
I'm using a HTML5 theme by HTML5UP called Alpha. The website is intended to be a first point of help for clients using an app my colleagues have developed. I would like to make two columns, one 8 wide and one 4 wide. using bootstrap I would write this...
<div class="col-sm-8">
***CONTENT***
</div>
<div class="col-sm-4">
***CONTENT***
</div>
However this theme uses the following notation:
<div class="row">
<div class="6u 12u(narrower)">
<section class="box special">
<span class="image featured"><img src="images/pic02.jpg" alt="" /></span>
<h3>Sed lorem adipiscing</h3>
<p>Integer volutpat ante et accumsan commophasellus sed aliquam feugiat lorem aliquet ut enim rutrum phasellus iaculis accumsan dolore magna aliquam veroeros.</p>
<ul class="actions">
<li>Learn More</li>
</ul>
</section>
</div>
My issue is, I've tried swapping col-sm-X straight out for Xu but that doesn't work. Can anybody here point me in the right direction?
Thanks,
Ethan.
i try to change column width and it's working..!!
changes:
class="6u 12u(narrower)" --> class="4u 12u(narrower)"
class="6u 12u(narrower)" --> class="8u 12u(narrower)"
I am using firefox 33.0 in Ubuntu 14.04. I have a website(localhost) with bootstrap 3 carousel. I have applied "animated pulse" (animate.min.css) class to my "img" in the "class=item" div and "animated fadeinleft" to my carousel-caption.
<div class="item">
<img src="images/2.jpg" class="img-responsive animated pulse">
<div class="container">
<div class="carousel-caption">
<h1 class="animated fadeinleft">Another example headline.</h1>
<p class="animated fadeinright">Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
</div>
</div>
</div>
There are 3 slides in total. For the first appearance of each slide, the image and carousel caption comes with the effect (animate.min.css). But after that the slides just comes and goes without any effect. This happens only in firefox. In Chrome 38.0.2125.104 it works as expected. Somebody please suggest a way to fix the issue.
If you look at the example on their site the classes are applied and if you want to trigger again you need to remove and add classes again. That is how CSS3 animation is restarted or triggered again by removing and adding classes again. You can read more about this here. In your case the classes are not removed and added again.
For Bootstrap you can use the slide.bs.carousel where you can add the classes again. I have added a data attribute [data-animation] to the elements for the respective animation.
<div class="active item">
<img src="http://lorempixel.com/1024/750" alt="Slide1" class="img-responsive animated pulse" data-animation="pulse" />
<div class="container">
<div class="carousel-caption">
<h1 class="animated fadeInLeft" data-animation="fadeInLeft">Another example headline.</h1>
<p class="animated fadeInRight" data-animation="fadeInRight">Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
</div>
</div>
</div>
JS code
function animateElement(obj, anim_) {
obj.addClass(anim_ + ' animated').one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function () {
$(this).removeClass();
});
}
$('#myCarousel').on('slide.bs.carousel', function (e) {
var current = $('.item').eq(parseInt($(e.relatedTarget).index()));
$('[data-animation]').removeClass();
$('[data-animation]', current).each(function () {
var $this = $(this);
var anim_ = $this.data('animation');
animateElement($this, anim_);
});
});
Fiddle Demo
The basic Microdata should be something like:
<div itemscope itemtype="http://schema.org/LocalBusiness">
<a itemprop="url" href="url"><div itemprop="name"><strong>name</strong></div>
</a>
<div itemprop="description">My Description</div>
<div itemprop="address" itemscope itemtype="http://schema.org/PostalAddress">
<span itemprop="streetAddress">My Address</span><br>
<span itemprop="addressLocality">My City</span><br>
<span itemprop="postalCode">My Zip</span><br>
<span itemprop="addressCountry">My Country</span><br>
</div>
</div>
But can I "split" the itemscope along the page?
Giving an extreme example - Say I have the name at the header of a page, the address in the middle of the page, and the country at the footer.
Would it still be a valid / effective to split the data in such a way? or do I always need to use a cluster.
And if a split is valid, how exactly to perform it?
Do I just need to repeat the divs like :
<div itemscope itemtype="http://schema.org/LocalBusiness">
<div itemprop="name"><strong>name</strong></div>
</a>
<div itemprop="description">My Description</div>
</div>
And …
<div itemscope itemtype="http://schema.org/LocalBusiness">
<span itemprop="streetAddress">My Address</span><br>
</div>
And …
<div itemscope itemtype="http://schema.org/LocalBusiness">
<span itemprop="country">My Country</span><br>
</div>
This is my first time considering the use of Microdata - and I just want to make sure that I do it correctly - and I could not see any references to such a "split".
And on the same topic, can I use already existing elements, while adding only the itemscope?
For example:
<div itemscope itemtype="http://schema.org/LocalBusiness">
<h1><div id = "title" class="title" itemprop="name"><strong>name</strong></div></h1>
</a>
The easiest is to have everything in the same hierarchical tree. But you can split things using itemref. See this example from the same document you linked to:
In the following example, the "a" property has the values "1" and "2", in that order, but whether the "a" property comes before the "b" property or not is not important:
<div itemscope>
<p itemprop="a">1</p>
<p itemprop="a">2</p>
<p itemprop="b">test</p>
</div>
Thus, the following is equivalent:
<div itemscope>
<p itemprop="b">test</p>
<p itemprop="a">1</p>
<p itemprop="a">2</p>
</div>
And the following:
<div itemscope itemref="x">
<p itemprop="b">test</p>
<p itemprop="a">2</p>
</div>
<div id="x">
<p itemprop="a">1</p>
</div>
No, a parser will probably see what you're suggesting as 3 separate Local Business entities.
But you can have other text between the various properties in http://schema.org/LocalBusiness as follows:
<div itemscope itemtype="http://schema.org/LocalBusiness">
<a itemprop="url" href="url"><div itemprop="name"><strong>name</strong></div></a>
<p>
This paragraph is not used by schema.org
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam blandit pretium
massa, in consectetur velit. Vivamus aliquam, turpis in pellentesque pulvinar,
lectus diam fermentum velit, quis fermentum arcu turpis in orci. Duis egestas
urna vel velit suscipit mollis. Nulla sed diam massa.
</p>
<div itemprop="description">My Description</div>
</div>