Twitter-Bootstrap - put simple elements inline - html

Is there anyway to put 2 <a> elements displaying inline?
i tryed :
<div class="form-inline">
<a>jjj</a>
<a>sss</a>
</div>
and also
<div class="row-fluid">
<a class="inline">jjj</a>
<a class="inline">sss</a>
</div>
but it doesn't work.

Anchor tags by default should be displayed inline. You must have some extra styling setting them to display as block elements or something similar.
Using your code, here is a working JSFiddle.
Inspect your page to find out where the anchor's display is being set and either modify that or set the element to display:inline after that. As you've already added class="inline" you can simply just add:
a { display:block; /* Pre-existing code */ }
a.inline {
display:inline;
}
Also as a note I don't think row-fluid is designed to work without Bootstrap's other scaffolding elements, if you want a full-width row you should use:
<div class="row-fluid">
<div class="span12">
<a class="inline">jjj</a>
<a class="inline">sss</a>
</div>
</div>

Related

How to style a group of elements under the same div tag independent of each other?

How can I style the numbers in the following HTML code independently of each other?
<div class="info-down">
<div class="container">
<div class="row">
<div class="col-xs-4">24</div>
<div class="col-xs-4">07</div>
<div class="col-xs-4">15</div>
</div>
</div>
</div>
You can add ids or another class to each the divs and style those independently.
Well, you have two options. You could add styling attributes to each of the numbers by adding this style="color:red", so that the line will look like this <div class="col-xs-4" style="color:red">. This would turn the color of the text to red. Or you could make a .CSS document and style it by adding id's to each of the div elements like this, id="firstLine" and then putting this in the .CSS document, #firstLine{color:red;}. the # character is used for styling elements by id's and the . character is used to style the elements by class. The .CSS document is the recommended method of styling as it keeps code split up and looking nice and tidy.
This might help you:
UPDATE with Demo
.col-xs-4:nth-child(1)
{
color:red;
}
.col-xs-4:nth-child(2)
{
color:green;
}
.col-xs-4:nth-child(3)
{
color:blue;
}
<div class="info-down">
<div class="container">
<div class="row">
<div class="col-xs-4">24</div>
<div class="col-xs-4">07</div>
<div class="col-xs-4">15</div>
</div>
</div>
</div>

How to have a button between a hr line - which then collapses elegantly

I would like a button between two hr elements with a bit of spacing wither side of the button and for this to remain the same when collapsing. I am using the Bootstrap framework.
I have got the current effect using the second answer from this question:
Add centered text to the middle of a <hr/>-like line
Therefore, my code is the same as what the answer provided. The first answer doesn't provide the spacing either side of the button.
Using media queries I am able to maintain the desired effect until I reach the 768px width break. Where this happens:
I can't continue to use media queries as I would have to apply them per pixel!
There must be an elegant solution to this? I'm assuming better use of columns and width percentages ?
Any help would be appreciated.
Using Bootstrap this solution should work fiddle:
<div class="container-fluid">
<div class="row">
<div class="col-xs-5">
<hr>
</div>
<div class="col-xs-2">
<a class="btn btn-md btn-primary">Add</a>
</div>
<div class="col-xs-5">
<hr>
</div>
</div>
</div>
You can use image for these lines by simply adding img tag:
CSS
img{
width:200px;
border:0;
height:10px;
background:url(http://goo.gl/bPZONP);
}
HTML
<div><img src="http://goo.gl/bPZONP">Button<img src="http://goo.gl/bPZONP"></div>
Demo
http://jsfiddle.net/qW6z9/

What is the equivalent of this CSS in Twitter Bootstrap?

<div style="float:left;">
column 1
</div>
<div style="float:left;">
column 2
</div>
<div style="clear:both;"></div>
I'm used to writing clear:both. But I heard in Twitter Bootstrap there is something called "clearfix"? On which element should/would I apply "clearfix"?
You probably only have to do:
<div class="container">
<div class="row">
<div class="span6">column 1</div>
<div class="span6">column 2</div>
</div>
</div>
clearfix should not be necessary.
using css you can simple use the after psudeo
.class1:after, .class2:after //append as many as you like
{
clear:both;
*zoom:1;
height:0;
visibility: hidden;
display:block;
}
alternative(providing children are not using the position selector)
(parent-elemts){overflow:hidden;}//bit of a quick fix!
keep unwanted markup out of your html file
Edit: sorry! for some reason the add comment button or upvote button is not working for me tonight.
To append my answer to answer your other question:
twitter bootstrap you say uses a .clearfix class, which is similar to the css I provided below, however their method needs to be added to the element, ie: "element class="clearfix" OR similar, where as css pseduo's we dont need to add this extra bit of code to our document. Take note however, not all browsers support css pseduo's.

selective css (link tag) for div

Can I have a css tag on my page, that is applied selectively to some div element on that page only.
Say it has some entry like
* {
margin: 0;
}
I do not want this property to be applied on all the elements on that page.
You must assign id to the divs you want to apply css individually and seperately.
and you must assign class to a set of elements if you want to apply some css to that set collectively.
It will not apply on all elements in that page.
ID method:
#div{
margin: 0;
}
Class method:
.div{
margin: 50;
}
HTML:
<div id="div"> </div>
<div class="test"> </div>
<div class="test"> </div>
<div class="test"> </div>
If you are applying it to one specific div, but not to any others, you might as well put it in-line
<div style="margin:0"> ..... </div>
for this case you can do it
<div id="someId" style="margin:0"> </div>
If you're positive you're only going to be using it on one element, just use an inline style like other said:
<div style="margin:0;"> Your Content </div>
If you're going to be using it on more than once, make a class in CSS,
.nomargin {
margin: 0;
}
and then use it by calling that class:
<div class="nomargin"> Your Content </div>
This will ensure that you can make changes to all of these classes at once if you need to change something in the future. ALWAYS use an external style if there will be more than one element using it, it will save you so many headaches in the long run.

How do I make two elements align side-by-side in a different width container?

For example:
<!-- make sure the link block fulfill the whole container -->
a {display:block;float:left;border:1px solid #ccc; width:48%}
<!-- work great in width:400px; -->
<div id=container1 style="width:400px">
<a href="" >first element</a>
<a href="" >second element</a>
</div>
<!-- not good! no enough space for second link block in my situation test in firefox-->
<div id=container1 style="width:200px">
<a href="" >first element</a>
<a href="" >second element</a>
</div>
So, is there a way to make them all fulfill and align side by side in different width of containers!?
Thank you very much!!
It looks like you're making a list of links - if this is the case, you should use (instead of <div>) the <ul> tag with <li> and <a> inside.
If you do this you can apply the width/float rules to the <li> instead, and apply the border and display: block to the <a> tag.
I changed your width to 50%, as that's obviously what you're trying to achieve.
Live Demo
Here are two alternate solutions which will work only in modern browsers/IE8+:
You can use the outline property instead of border.
See: https://developer.mozilla.org/en/CSS/outline
Live Demo
You can use box-sizing: border-box.
See: https://developer.mozilla.org/en/CSS/box-sizing
Live Demo
Set margin:0; padding:0; for both container1 and a tags. That could be the problem.in