i have a question about the floating labels
is it possible to display the floating labels like this in bootstrap?
the form areas a very big. i tried wit CSS without success
Related
I want to create a UI with "lots of controls", that are somewhat densely packed together vertically. I'm currently using Materialize which by default makes horizontally stacked forms look quite nice, but vertically stacking different types of UI elements looks terrible by default. An example:
In this example I would like the buttons to be aligned with the box of the dropdown menu, or for the label above the dropdown to float above the invisible upper line that the buttons are aligned to. But my question is not about this specific case, I show this to illustrate a problem I'm generally having with Materialize in this type of UI.
It would be possible to specify an exact number of pixels to every element class's margin that would force things to be aligned. But then it seems I'm kind of fighting against the defaults every step of the way.
My question: How to make good looking vertically aligned UI elements?
(It doesn't have to use Materialize if some other CSS framework solves this much better.)
I would like to add this type of hover text overlay:
https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_image_overlay_fade
to an image grid that looks something like this:
https://dab1nmslvvntp.cloudfront.net/wp-content/uploads/2016/03/1456867697gridlayout05.jpg
What would the HTML & CSS look like for this? When I tried adding one hover overlay, my image grid ended up breaking and the images began stacking on top of each other.
To do this you can easily do it using CSS2 Float concept. Just take the Tweets and Replies part in row-1 div and add float left with clearfix to Tweets and to Replies with float Right. And then coming to the next row i.e. row-2 similarly add float left with clearfix to Search and to Messages with float Right. And this would do the work using CSS2. There other ways as well using CSS3 but I find this one here easy to use.
I'm doing a form using Bootstrap 3.3.2 and I'm having problems aligning labels of diferent rows when the elements have diferent col-xs-*
Bootply example
What I need is the Bar and Faa labels to get aligned as well as the Bar's field with Faa's and Bor's ones maintaining the sizes and positions of the fields (Bar's field is double in size ).
Problem is that you're using both form-group and col-xs-* classes on the same div.
What you need is to wrap each form-group in another div with the col-xs-*.
I've fixed your code:
[Bootply fixed][1]
[1]: http://www.bootply.com/yDbREoFh2v
I looked into this post since it's exactly what I am trying to achieve: Radio Button and Label to display in same line.
Yet the struggle continues... Here's the layout I have (first 3 columns) and I expect to have (last two columns). Please ignore the outline boxes. Those were drawn just to mark the div.
I have two to three radio buttons that needs to be in the same line, as per the image shown below. These radio buttons their title should be within one div and nested inside a main div that contains the radio buttons, and the other html selector (e.g. Capacity) I tried giving enough width to this div, so radio buttons can sit horizontally in one line. But it doesn't work.
jsFiddle for html and css.
After removing float:left, width, height from said classes. As you see the Select button no longer aligns.
Remove float: left; from .fl1 em
And remove width and height from #bookingForm input, #bookingForm textarea will solve your issue.
Check Fiddle Here.
Remove CSS height and width property from this style.
#bookingForm input, #bookingForm textarea{ }
Comment the css - height and width of #bookingForm input, #bookingForm textarea
I have a table and a form one next to the other with Bootstrap. I have applied the well class to the form, to make it stand out. However, the well and the contained form are not aligned?
Please see my fiddle here.
How can I align the well and the form? (Notice that when both the table and form have the class span6, then all is good. However, I want span7 and span5 respectively.)
The form element's width is greater than the width defined by Bootstrap for span5, and thus some rendering engines will force the element to break out of the well.
If you absolutely have to use span5, try reducing the width of the labels, and margins of the input elements within the form.