I have the problem with the form-group class of bootstrap
On https://jsfiddle.net/oursgris/7s2pgthy/#&togetherjs=9SHsiHc4oj
I extracted the problem
When I'm a small or medium device with that code. the line between "Statut" and "Etat" is smaller because I don't use the form-group class.
on medium device I have the wanted result (and large also)
When I add
<div class="form-group">
between statut and etat, there is the space of from-group (a margin-bottom of 15px)
https://jsfiddle.net/oursgris/t4dt9avw/embedded/result/
but in that case the md and large add a line, how can I correct that behaviour ? I imagine that I missuse a css class
After reviewing your JFiddle, I noticed a few things wrong with your form such as improper use of the form-group class. I also reworked your classes to get the desired view I think you are looking for. If all you were looking for a was a inline form through out all the views, all you had to do was stay away from a 12 span class.
I worked out a DEMO for you in a Code Pen
p.s. you didn't need that empty column div (unless you are using that to programmatically display something in it via JQuery. Other than that, the use of form-group takes care of isolating that label and input field in its own row.
Related
I'm using Bootstrap and making a simple form with col-sm-4 grid. Now it looks as:
Also when I resize browser width to 507px, C1 and C2 elements slide down to the next line:
And by some reason my dropdown lists look as plain HTML without any styles, despite I add class="selectpicker" to them. I expect them to be like:
I want to get something like this:
This is my fiddle: https://jsfiddle.net/j96vaokc/
What Bootstrap classes should I use?
Thank you in advance.
You have a couple simple problems. First off, the selectpicker class is part of this Bootstrap jQuery plugin, bootstrap-select. You would have to download and include that script and stylesheet. Before that, you would also need to include the jQuery script.
Here's a working fiddle to demonstrate what it'll look like with your code and the included scripts. Go to the 'External Resources' tab on the left to see which scripts/stylesheets I included and in which order:
https://jsfiddle.net/j96vaokc/5/
I added
.dropdown-toggle {
width:60px !important
}
just to make the presentation neater on jsfiddle.
In regards to the wonky placement during window resize, that has a lot to do with your use of the bootstrap grid classes. In my fiddle you'll see that I removed alot of column classes since they weren't necessary. What I'm doing with the CSS is important because I have to override the default bootstrap-select styling for width in order to properly center. Also, in case you missed it I explicitly added a line break between the labels and select options.
I am newbie in Twitter Bootstrap. It is a very simple question.
Here is the image:
And here is my Code:
<div class="col-md-8 col-xs-6 col-sm-6 placeholders">
<p id="people-things" class="text-center">PEOPLE-THINGS RECOMENDATION</p>
</div>
Problem: I want to put the Recomendation text in one line other then going in next line.
Infos: I had tried every grid in but still couldn't sort it out.
You have to make smaller font-size on .people-things or add this CSS:
.people-things { white-space: nowrap; }
Which is making .people-things to show on one line.
The solution above works but bootstrap grid classes should be ideally used by itself and you should not need any custom styles on top of it.
Try rearranging your grid structure such that apply <col-sm-6> before <col-xs-6>. That will allow more space in the grid cell to fit the text. Also you might not need three levels of grid nesting. You could use: <col-md-8><col-sm-8> and see if that works.
While using Bootstrap I'm having some trouble setting a different width for a form's label and input.
Actually, I can do what I want, but I think there's probably a better way. My current "solution" is to add a new div.row and then an additional div.form-group for making the input smaller, but it adds additional unwanted markup and messes with other stuff (form-validation indicators).
Any good solution for what I'm looking for?
Please take a look as this JSFiddle, to better understand my problem/goal. The 1st section includes the base case, the 2nd section includes my current solution, which I don't really like.
I use Bootstrap's form-horizontal form layout, so my fields appear each in new "line".
form.form-horizontal(role='form')
fieldset(ng-disabled='queryInProgress')
.form-group
label.col-lg-2.control-label(for='Prefix') label
.col-lg-4
input.form-control(type='text', form-control)
input.form-control(type='checkbox', form-control)
input.form-control.input-sm(type='text', form-control)
I however need these inputs ("Container name", checkbox, and following input field) to form one line and I can not easily find a "boostrap" way of doing this. The rest of the form. not shown here, I need to keep form-horizontal layout (I am aware of form-inline thing). How I can make three mentioned controls to appear inline using bootrstap classes?
JsFiddle with tentative look: http://jsfiddle.net/2UEZ6/
I'm trying to do a simple layout on bootstrap but I can't find a solution that doesn't involve javascript.
I need the template to be like this on medium / large desktops: http://jsfiddle.net/Xx3G4/1/
And it must stay like this on small devices: http://jsfiddle.net/Xx3G4/
If I wasn't clear enough, I need the block "p1":
<div class="teemo-block">p1</div>
to be right after the block "stuff" on medium / larges and after the news on small / x-small.
PS:
Do not forget to re size the jsfiddle to see it on the correct viewport;
The solution of this problem using javascript is pretty easy, the problem is finding one without the use of it.
Thanks for reply
If you are using twitter bootstrap and if you don't have problem creating 2 "p1" blocks, one before and the other after the block "stuff", then there is one solution with the bootstrap class name. Bootstrap has a class called hidden-phone(renamed as hidden-xs in version 3), which hides the element with this class names in phones. Check here
The other solution would be to create 2 blocks as said above, use media queries to display one block and hide the other block. But this is not a pretty good solution, just in case if you don't find any other way without involving javascript
Just reposting and translating the answer I got on Portuguese SO (https://pt.stackoverflow.com/questions/9508/posicao-dos-blocos-em-bootstrap/9721#9721)
I have removed the classes col-push and col-pull and replaced them to pull-left and pull-right, also from bootstrap.
<div class="col-xs-12 col-md-4 pull-right">
<div class="teemo-block">
p1
</div>
</div>
Since, by default, all the 'cols' on bootstrap has float left, if you want to change that you must change it manually, that's why the news block got the pull-left and the other blocks got the pull-right, forcing them to stay on the desired position.
Check the result:
http://jsfiddle.net/luckmattos/hsCw9/7/