I have the following label:
<label for="name" class="control-label"><h5 class="text-muted">Name</h5></label>.
I would like to have a text-muted effect for the label text, but my markup above does not accomplish that.
What is the right way of doing this?
I am sorry to ask, but what is your CSS of the .class-muted ?
Didn't you forget to write the code to the css file?
Here's the working fiddle
http://jsfiddle.net/2Q2Rz/1/
Update
If you are using Twitter Bootstrap 2.3.2 or older, there's no .text-muted class, it is .muted according to the documentation
The .text-muted class appears only in Twitter Bootstrap 3
Related
I would like to create a form using BootStrap 4 that looks like the forms that BootStrap 3 allowed one to create easily. i.e. I would like a bold label right-aligned within a specific size (e.g. col-sm-4), and next to it I would like an input field whose width is controlled by an enclosing div tag with a class like col-sm-4 (as an example). How can I do this? I have spent an hour or so now battling with .css and BS4 to create this, but have been unable to achieve the effect I desire. Any hints would be great.
The code below will produce the effect I wish for but will not allow me to have different sized inputs (they all default to the same size)
css:
div.form-inline label.col-sm-3 {
justify-content: flex-end;
font-weight:650;
}
html:
<div class="form-inline">
<label for="INcity" class="col-form-label col-12 col-sm-3">City</label>
<div class="col-sm-4"><input type="text" name="INcity" class="required form-control" id="INcity"></div>
</div>
If I instead use form-group, then I can alter the size of the input fields using the enclosing tags, but then the css (even when I change it to be .form-group instead of .form-inline) fails to align the label correctly and set it to bold. So I guess I'm looking for either the correct .css or an example of how to achieve the whole effect simply (as it was with BS3). I must be missing something obvious because I can not believe that the BS4 developers would make it so difficult to achieve the same look as BS3 allowed without any of the .css hacks etc that I am having to do. Though I do notice that every one of the examples given in the BS4 documentation has the label left-aligned, so perhaps they have decided to make that formatting decision for every BS4 user, but that seems a bit unlikely (and unfriendly).
In order for col-* to work they MUST be inside a .row or .form-row.
There's no need for any extra CSS:
https://codeply.com/go/0Vkxbmgb4c
<div class="form-row">
<label for="INcity" class="col-form-label col-12 col-sm-3 font-weight-bold text-right">City</label>
<div class="col-sm-4">
<input type="text" name="INcity" class="required form-control" id="INcity">
</div>
</div>
https://getbootstrap.com/docs/4.0/components/forms/#form-grid
If you have several of these that you are converting from BS3 to BS 4, then the way that ZimSystem has suggested as an answer will be extremely tiresome to implement - being as you will have to change every single instance of this. Just create some css (as it seemed you were actually asking for) with the following .css and use find and replace to replace every instance of control-label with col-form-label. This approach is much easier than the approach suggested above, and uses a more modular approach (in that you only have to write the css markup once - modularity should be every programmer's approach in my opinion). Ensure this css is loaded AFTER BS4 css has loaded.
.col-form-label
{
font-weight:600;
text-align:right;
}
I'm using VS and mvc. I have a Html.BeginForm which takes a randomKey as a string in the input box. There is a retrieve button that currently abuts the input box and I just want to add a margin to the button. In the site.css there is a .retrieveButton class but it doesn't seem to override the bootstrap css. Help please!
<div>
#Html.EditorFor(model => model.RandomKey...placeholder = "Enter your 8 digit key" } })
<div class="form-group">
<div>
<input type="submit" value="Retrieve" class="btn btn-default retrieveButton"/>
</div>
</div>
</div>
In case of duplicate class names, the last CSS file wins (it augments or redefines what came before it).
So make sure that your CSS files are added to the page in the correct order. Probably your personal CSS should come after Bootstrap CSS. To do this for MVC 4+, see file App_Start -> BundleConfig.cs.
For more in-depth info about bundling in MVC see e.g. this: http://timgthomas.com/2012/09/a-quick-start-of-asp-net-mvc-4s-bundling/
You can try using !important in the CSS or you can try using a more direct selector.
When you have multiple statements that try to apply the same property to the same element then the statement with the more precise selector will be used.
try:
.form-group > .btn.btn-default.retrieveButton {
}
You can read more about this here:
https://www.smashingmagazine.com/2007/07/css-specificity-things-you-should-know/
When using ui-select with theme Bootstrap, the "select" looks the same size of a Bootstrap button, ie: btn btn-default
I want the select to look like a "btn-sm" button.
How can I do that? what classes should I modify?
A solution someone gave in the Github site of ui-select:
Wrap the directive in a div with form-group-sm, eg:
<div class='form-group-sm'><ui-select>...</ui-select></div>
https://github.com/angular-ui/ui-select/issues/169#issuecomment-298361767
I am attempting to modify the width of the ninja form text inputs on my wordpress site. I am able to call each individually by id with:
#ninja_forms_field_6 {width:25%; min-width:250px;}
However, I would like to do so by class. However, I can't seem to figure out the correct class to call. I have looked at the source code and it displays:
<input id="ninja_forms_field_6" data-mask="" data-input-limit="" data-input-limit-type="char" data-input-limit-msg="character(s) left" name="ninja_forms_field_6" type="text" placeholder="First Last" class="ninja-forms-field ninja-forms-req " value="" rel="6" />
<div id="ninja_forms_field_6_error" style="display:none;" class="ninja-forms-field-error">
</div>
When I've tried to use:
.ninja-field ninja-forms-req {width:25%; min-width:250px;}
Nothing seems to happen. In particular, my css editor doesn't seem to like the space between ninja-field and ninja-forms-req. I've found some other answers that indidcate these are two separate tags, but I still can't seem to get the text inputs to respond to my inputs. I should note that I am using the "Simple Custom CSS" plug-in to make changes to CSS. Any help in advance would be appreciated. Thanks.
Try .ninja-field.ninja-forms-req.
When targetting multiple CSS classes on the same element you need to separate them with periods.
I found this to work really well with ninja forms and their issue with the width of buttons in some themes. This also solved my problem using the custom css plugin. Just use the height according to your theme button height.
.ninja-forms-field {
width:100%!important;
height:50px!important;
}
I've a little problem using bootstrap and adding dynamically element on my page.
I've a form where I lwant to dynamically add new inputs. All that work fine but the rendering is not that good because it seems that there is some missing margin padding between the label and the select.
I use bootstrap as main css.
Here is an exemple : http://jsfiddle.net/4Uf2U/1/
<div class="form-inline">
<label>Label</label>
<select><option>Option</option></select></div>
Does anyone have an idea why this happen and how to correct this ?
It is because of the select. The one that is not dynamic is formatted like so:
<div class="form-inline">
<label>Label</label>
<select><option>Option</option></select>
</div>
And the dynamic ones are one liners like so:
<div class="form-inline"><label>Label</label><select><option>Option</option></select></div>
So use one way and the style (appearance) will be the same.
Here is an updated jsFiddle: click