Here is my code.
<div class="col-lg-4">
<label>ID Expire</label>
<div class="row ">
<div class="col-lg-5">
<input type="text" class="form-control input-sm" id="TextIDExpire" />
</div>
<div class="col-sm-4">
<button class="btn btn-default form-control " id="BtnBrowsePhoto"> Browse <i class="glyphicon glyphicon-folder-open"></i> </button>
</div>
<div class="col-lg-3">
<button class="btn bg-yellow form-control" id=" btnviewphoto"> View <i class="glyphicon glyphicon-eye-open"></i> </button>
</div>
</div>
</div>
Expected output is
but i got much white spaces between controls.What i want to do. Please help me
want to center an image , very easy , bootstrap comes with two classes .center-block and text-center , use the former in the case of your image being a BLOCK element eg. add img-responsive class to your img makes the img a block element , you should know this if you know how to navigate in the web console and see applied styles to an element .
Don't want to use a class , no problem , here is the CSS bootstrap uses , you can make a custome class or write a CSS rule for the element to match the bootstrap class .
// in case your dealing with a block element apply this to the element itself
.center-block {
margin-left:auto;
margin-right:auto;
display:center;
}
// in case your dealing with a inline element apply this to the parent
.text-center {
text-align:center
}
Related
I have a row div which contains 1 div called horizontal-form, inside this horizontal-form contains other two divs, called form-group, and inside this form-group I have another div, called input-group which contains 1 a tag and 1 span text.I would like to align these span to the most right position. I tried to use class = pull-right but then it aligned to the right position but compared to the nearest div, here is the input-group. Can anyone show me how can I align the span to any position that I wish, for example here i would like to align it to the right position compared to the div row or horizontal-form
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<div class="row">
<div class="horizontal-form">
<div class="form-group">
<div class="input-group subQuestionsLabel" data-toggle="collapse" >
FirstItem
<span class="button">
<button type="button" class="btn btn-default"><i class="fa fa-indent"></i> </button>
</span>
</div>
</div>
<div class="form-group">
<div class="input-group subQuestionsLabel" data-toggle="collapse" >
SecondItem
<span class="button">
<button type="button" class="btn btn-default"><i class="fa fa-indent"></i> </button>
</span>
</div>
</div>
</div>
</div>
This happened beacause of "input-group" class as it has "display:table;" property in css.
So There is two ways to resolve this.
Remove this class
Overwrite css for this class as "display:block"
The thing you are asking its not the right way to do it as i see in your code because you are using bootstrap and bootstrap logic doesnt work like this. If you need your span align whatever you want dont put it inside the div with horizontal-form class and form-group class. In this case if i understood it well to align it right just apply float: right; to the span.
I have one silly question about Bootstrap Grid System.
Is that okay to use <a href="#" class="col-lg-4"> instead of <div class="col-lg-4">?
Is it because I want create a column-4 grid menu with hyperlink.
Basically, it should look like this which the hyperlink only cover the text not the whole column even if I had styled width: 100%; height: 100%; inside the <a> tag.
<div class="row">
<div class="col-lg-4">
Menu 1
</div>
</div>
After I change the code, it should look like
<div class="row">
<a href="#" class="col-lg-4">
Menu 1
</a>
</div>
Is this a best practice of using Bootstrap?
Or we have to follow the standard which define by Bootstrap?
do it like this and it will be looking great:
just add a class or style to your a element.
or add class "btn btn-default btn-block" to use bootstrap button styles
<div class="row">
<div class="col-lg-4 text-center">
<a href="#" class=" btn-block">
Menu 1
</a>
</div>
</div>
The only problem I see with that is that the A won't have the css property display: block; by default so you might run into styling issues. If you fix this issue by adding this property, I can see any problem with that.
I use AngularJs, Bootstrap, NodeWebkit.
I'm trying to create my pages' header like this :
So here is my code :
<div class="row">
<img class="col-md-offset-1 col-xs-1 col-sm-1 col-md-1 col-lg-1 img-rounded image-module-pd " src="{{titreImage}}"></img>
<h3 class="col-xs-5 col-sm-5 col-md-5 col-lg-5 text-left titre-module">{{ titreLocalization | translate }}</h3>
<div class="input-group text-right">
<span id="basic-addon1" class="input-group-addon glyphicon glyphicon-search" ></span>
<input class="form-control" ng-model="recherche_texte" Name="recherche_input" placeholder="{{ 'RECHERCHE_TITRE' | translate }}" type="text" style="width:250px;"/>
</div>
</div>
This is what I get :
There are a few issues : My glyphicon is not fully vertically alignated with the input, why ? I've just pasted the example from bootstrap's documentation.
My input + glyphicon are not on the right
My input + glyphicon are not vertically alignated with my title.
I hope my images are big enough so you can understand my problems.
Thank you
There are minor mistakes against important Bootstrap 3 rules:
First:
Content should be placed within columns, and only columns may be immediate children of rows
Second:
If more than 12 columns are placed within a single row, each group of extra columns will, as one unit, wrap onto a new line.
Third:
Icon classes cannot be directly combined with other components. They should not be used along with other classes on the same element. Instead, add a nested <span> and apply the icon classes to the <span>
So, place your image, title and search components into separate div with col classes and use offset where needed, but be sure that your column count doesn't add up over 12, otherwise these contents will wrap onto the next line.
This following is a working example, available at Bootply to play around with the code:
<div class="row">
<div class="col-xs-offset-1 col-xs-1">
<img class="img-rounded image-module-pd" src="http://placehold.it/100x60">
</div>
<div class="col-xs-5">
<h3 class="text-left titre-module">Title</h3>
</div>
<div class="col-xs-offset-2 col-xs-2">
<div class="input-group text-right">
<span id="basic-addon1" class="input-group-addon">
<span class="glyphicon glyphicon-search"></span>
</span>
<input class="form-control" ng-model="recherche_texte" name="recherche_input" placeholder="Search" type="text">
</div>
</div>
</div>
Note that you may omit col-sm, col-md and col-lg classes if a col-xs class is present and you don't need other breakpoints on larger screen widths:
Grid classes apply to devices with screen widths greater than or equal to the breakpoint sizes, and override grid classes targeted at smaller devices. Therefore, e.g. applying any .col-md-* class to an element will not only affect its styling on medium devices but also on large devices if a .col-lg-* class is not present.
To solve your problem to vertically align the search component read on this other posts that cover this issue:
vertical-align with bootstrap 3
How to center align vertically the container in bootstrap
I am using the grid system of bootstrap.
My HTML looks as follows (jade syntax)
form.form-horizontal(role='form', name='containerForm', id='containerForm', novalidate)
fieldset
.form-group
label.col-lg-2.control-label(for='ContType')
.col-lg-4
select.form-control(ng-model="data.ContainerType", id='ContType', name='ContType', ng-options='translate(s.name) for s in containerTypeList')
.form-group
(and so on)
The 'form-control' CSS class is taking 100% width of parent DIV (e.g. col-lg-4, these col-lg classes are effectively "table cells"):
.form-control {
display: block;
width: 100%;
}
I need however to display some HTML right before the SELECT above (or, alternatively, after). I need that HTML to be in the same line as the SELECT. If I simply enter something after the SELECT now, it goes to next line, due to width=100% of that SELECT.
How I can possibly achieve my goal while keeping bootstrap classes in place?
You could place both in a row, then put each item in it's own column. For example:
<div class="row col-sm-12">
<div class="col-sm-6">
<input type="text" class="form-control">
</div>
<div class="col-sm-6">
<button class="btn btn-primary">Demo</button>
</div>
Alternatively, you could use an input-group, for example:
<div class="input-group">
<input type="text" class="form-control">
<span class="input-group-btn">
<button class="btn btn-default">Demo</button>
</span>
</div>
How do i set width of input in this case in bootstrap 3.0
Here is the example http://jsfiddle.net/6eBFz/
code
<div class="submit">
<div class="col-md-8 col-sm-8">
<button type="submit" class="btn btn-primary">Submit</button>
</div>
<div class="col-md-4 col-sm-4">
<div class="input-group">
<input type="text" class="form-control ">
<span class="input-group-btn">
<button class="btn btn-default" type="button">Add </button>
</span>
</div>
</div>
</div>
i am looking at the bootstrap way and not custom css
Bootstrap inputs take on the width of their container.
From the Bootstrap docs (http://getbootstrap.com/css/#forms-inline)..
"Inputs, selects, and textareas are 100% wide by default in Bootstrap.
To use the inline form, you'll have to set a width on the form
controls used within."
CSS: .set-width{ width: 50%; }
HTML: <div class="input-group set-width">
You can add a set-width method (call it whatever you want) on any div and then manually size it in your CSS. I wouldn't recommend adding style="width: 50%;" to code because it makes it less readable and makes it much harder to edit later on. Plus with making a CSS class you can reuse it on several input fields (or anything else that you want to be set to that width really! Width can be set in pixels, or in em.
Here is a helpful resource to understand CSS classes and ID's