What it the best way to do that input the full width inside span3 (unresponsive design)?
Something like width: 100%;
http://jsfiddle.net/rq9FM/
Thanks.
First, when using Twitter Bootstrap I like to add a class to my <body> tag so I can override bootstrap styles if needed.
<body class="myclass">
For the CSS I would do something like this..
.myclass .well {padding:19px 0;}
//UNRESPONSIVE
.myclass .form-search input {width:108px;}
//RESPONSIVE
.myclass .form-search input {width:43%;}
The left and right padding needs to be removed from the well and from there all you should have to do is change the size of the <input>. If your span is going to be a fixed width then the unresponsive example should work for your example. If the span is going to change sizes, then you will only want the input to take up a percentage of its container.
Related
I have a bootstrap with a navbar at the top. In the navbar, I have five buttons that looks as follows:
The Razor code for one of the buttons looks like this (the other four are about the same):
Sign up<b class="caret"></b>
I'd like to make the buttons all the same width but I can't seem to find the CSS that controls this.
Well first you have to figure out the right CSS selector (Chrome Inspect Element can help here). I suspect these are probably nested in a DIV or UL with a .nav class or whatever. Then you can just set the 'width' property in your style.css (or whatever your stylesheet is named) file, or between style tags in your HTML.
If you can edit the HTML just add a class like "nav-btn" to each button you want to modify.
So, for example, if you added that here's what it would look like...
HTML:
Sign up<b class="caret"></b>
CSS:
.nav-btn {
width: 50px; //or whatever width/units you like that fits everything
}
Alternatively, you can add the CSS within your HTML file with the <style> tag:
<style>
.nav-btn {
width: 50px; //or whatever width/units you like that fits everything
}
</style>
width: 25%;
(These are more characters to meet minimum answer length requirements)
i have taken this h1 and i have given it a class and applied border bottom to it so that i can give a nice underline effect.
I can use text-decoration property but giving bold underline effect gives me the ability to have width of underline line.
When i give h1 an underline, the border goes to 100% full width of the container.
please tell me how to fix it.
thanks.
Use display: inline the reason why the H1 is showing the border all the way across is because it is a displaying block by default. Hope this helps!
Because h1 is a block level element and by default this element take a 100% width. so make it a inline element.
here is the CSS to build the h1 as a inline element.
h1{border-bottom:1px solid red;display:inline-block;}
here is the HTML
<h1>My First Heading</h1>
Here is a Demo.. http://jsbin.com/voyuluyo/1/edit
HTML
<h1 class="headings"> hi this is SO </h1>
<h1 class="headings1"> hi this is SO </h1>
CSS
.headings
{
border-bottom:10px solid black;
}
.headings1
{
display:inline-block;
border-bottom:10px solid red;
}
Fiddle
Working Demo
Output:
As RaySinlao said, display:block will make it expand all the way. If you want to make the next element go to the next line, display:inline won't work. Use display:table. Table will shrink-wrap (to fit contents) or expand (to fix weird bugs) or clearfix. Come to think of it, table does a lot of stuff.
I want my finished product to look like this:
My
Shopping
Cart
Which, I've gotten it to work so far but I'm using three paragraph tags
<div><p>My</p><p>Shopping</p><p>Cart</p></div>
Outer most div has width:200px
P tags are width:100% and text-align:center
JS fiddle example
Is there any way to accomplish this without all the p tags? I don't need to get rid of them but I like to think there is a better way.
You can set the word spacing to the width of the container.
div {
width:200px;
text-align:center;
word-spacing: 200px;
}
jsFiddle Demo
P.S - Actually you can also set it to a very large value (32767px on Chrome 29.0.1 and infinite values on FF23) and it'll work the same way. That way it won't be coupled with the container's width.
You could just use one <p> tag for all the text and then force line breaks with <br> tags like so:
HTML
<p>My<br/><br/>
Shopping<br/><br/>
Cart</p>
Working Fiddle
You can use br tag and css property of line-height to achieve desired effect
<style>
.centerIt{
line-height:1.3;/**choose as per your requirement**/
text-align:center;
width:200px;
}
</style>
<div class='centerIt'>My<br />Shopping<br />Cart</div>
http://jsfiddle.net/LkYrk/
To explain my problem, I'm trying to make a div wide enough to accommodate a dynamically generated title without wrapping it, but the div also has other content, which I want to wrap.
In other words:
CSS:
.box {
min-width:170px;
}
.box span.title {
font-size:24px;
white-space: nowrap;
}
.box span.text{
font-size:10px;
white-space: normal;
}
HTML:
<div class="box">
<span class="title">Title on one line</span><br />
<span class="text">This is the main body of text which I want to wrap as
required and have no effect on the width of the div.</span>
</div>
However, this is causing the div to expand to be wide enough to contain the main body of text on one line, which I want to wrap. I've tried various arrangements for CSS and the putting them all inside container divs and the like but I can't seem to get the box to be exactly wide enough to contain only the title without wrapping (but not less than the min width)
Is there any way to do this just in CSS? Note I don't want to set a max width as this just causes it to become a static size again, as the main body of text is always going to be enough to hit the max width. I also can't line break the body manually as it's dynamically generated.
Is this (jsFiddle) what you're trying to accomplish?
I just added display: table; to .box's CSS. This expands the main div to the width of the title span but wraps the text span.
Note: You can also set a constant width to prevent the div from expanding to the width of the window. This way it will still expand to the width of the title if it is larger than your constant width, but will not grow if the user drags out the window. In my example I added width: 100px; to demonstrate.
A working jQuery example:
http://jsfiddle.net/8AFcv/
$(function() {
$(".box").width($(".title").width());
})
For headlines you should use the <hN> tags (<h1>, <h2> etc).
For no text wrap:
white-space: nowrap;
On the element who's text you don't want to wrap.
Working Example on jsFiddle
If i understand your correctly you can easily set the same width for yours text as for yours title using JS or jQuery, for ex:
$('.text').width($('.title').width())
and run it at jQuery(document).ready or by event if you add it dynamically
Block elements such as divs extend as far as content pushes them, unless specified by explicit widths or heights.
A pure CSS solution for this is unlikely without setting a max-width on the div.
A pointer on CSS:
Don't include the tags in your selectors (i.e. tag.class) as you are then forced to use that tag with that class. Simply using .class will make it easier to change your markup (should you need to) as well as make your class extend its use to more than a single tag.
I want to have a setup like this:
<div id="block">
<div class="btn">2</div>
<div class="btn">1235e</div>
<div class="btn">really long one</div>
</div>
jsfiddle: http://jsfiddle.net/cutcopypaste/3uu5Q/
Where the btns and block div get their width based on the content. Just like it appears in the fiddle, except that the width of the btns are based on their text rather than their container
I cannot use a table because I need to be able to apply styling to get vastly different appearance, so I need the html markup to stay basically the same. If it's absolutely necessary I could apply some js.
I tried a couple different ways of displaying, but not sure how to acheive this. I don't wish to hard-code any widths as the content will be changing, and I need it to work in older versions of IE (though I can use libraries like IE9.js).
Here's an example of how the #block will be sized to be as wide as its longest button:
#block {
float: left;
}
.btn {
float: left;
clear: both;
}
The floated elements will expand only to their content's width. It's assuming you want each button on its own line.
If you want the buttons to flow together, remove the clear:both from the .btn rule. However if you do want them all on one line you'll have to be aware of float drop. This will happen if the widths of all your buttons added together is greater than the available width. In this case, the rightmost button will drop down below the other buttons.
Update: based on OP's comment, here's the CSS for a table cell style where #block and all .btn elements expand to the widest button's width:
#block {
display: inline-block;
}
.btn {
display: block;
}
Along with an example.
Where the btns and block div get their width based on the content.
I'm not 100% sure whether I get you right, but using display:inline elements like spans instead of <div>s should solve your problem.
make them float or inline, that way they won't act like blocks (wont be 100% width).