I am using bootstrap 3. The input type=text elements are cool. Now I would like to create a similar rounded border around a div element. Anything I've tried seems ugly, Is it possible with bootstrap 3?
Thanks in advance
To quickly make a div look like a Bootstrap input, simply add a .form-control class to your div.
<div class="form-control">I am inside a div.</div>
Also check out Bootstrap Panels. Since divs are not form controls, panals have rounded corners and are more appropriate for divs.
<div class="panel panel-default">
<div class="panel-body">I am inside a panel.</div>
</div>
Here is a JSFiddle demo of both options.
Since you're trying to emulate a bootstrap input, #James Lawruk's suggestion of using .form-control is the quickest simplest way to do it.
But if you want to learn how to emulate styling you see elsewhere (which you should), you need to inspect the css used in .form-control (if on Chrome, right-click and "inspect element"), copy the relevant styling, and create your own class to apply.
In this case:
.form-control{
display: block;
width: 100%; /* THIS */
height: 34px;
padding: 6px 12px;
font-size: 14px;
line-height: 1.42857143;
color: #555; /* THIS */
background-color: #fff;
background-image: none;
border: 1px solid #ccc; /* THIS */
border-radius: 4px; /* THIS */
}
becomes
.custom{
width: 100%;
color: #555;
border: 1px solid #ccc;
border-radius: 4px;
}
NOTE: I am ignoring a few pseudo-classes also attached to .form-control, like :focus, but pseudo-elements are a another reason you might not want to apply a class that was designed for another purpose.
Related
At the bottom of my page there are 3 buttons. "Send, Save and Cancel" buttons. The Save and Cancel buttons are the same height but the "Send" button is different from the other two. Why is this happening?
I read on another post that said elements render buttons different from normal buttons so I tried to fix it with the solution given but it didn't work. I also tried removing element but it still didn't work. Thanks for your help!
Buttons Styles
background-color: #8f81e8;
color: #fff;
border-radius: 5px;
text-transform: uppercase;
font-weight: 300;
font-size: 16px;
cursor: pointer;
padding: 1rem;
CodePen
It's because your send is input while other elements are button.
Add border: none; to your css
you can give static height to all three buttons.
You have two different divs: .user-messages (the left one) and .settings the right one.
The left one contains an input, while the right one contains two buttons. So you can either add border:none to the left one to make the border disappear and then re-arrange your layout to use a button instead of an input.
Update
Wrap the buttons into a seperate div below the div of the two pages and do the following:
div {
display:flex;
justify-content:space-around;
}
button {
width: 100%;
margin: 5px; /* or whatever you want to have */
}
<div style="width: 100%; background-color: green;">
<button type="button">A</button>
<button type="button">B</button>
<button type="button">C</button>
</div>
Is the result of my snippet the desired outcome?
Seems to be the display: flex on the settings-btn-box that is causing it. One solution could look something like this:
.settings-btn-box {
/* display: flex; */
}
.settings-btn-box button {
width: 49%;
}
.btn-save {
/* margin-right: 10px; */
}
.btn-cancel {
/* margin-left: 10px; */
float: right;
}
Personally, I'm not a big fan of float, but since it's the last element in the div it should be fine.
I have a form with a lot of color inputs. I am using boostrap and the default look for a color input is horrible so I have been adding my own CSS on top of it to clean it up. I have gotten rid of the big white border but now I would like to have it display as a circle instead of a square. I would like it to be a flat circle with no border and maybe even with a slight shadow for a material design-esque look.
This is one of my color inputs:
<div class="col-xs-1 menu-title-color-div color-input-div">
<input type="color" id="menu-title-color-input"
class="form-control menu-data color-input menu-title-color-input"
name="MenuTitleColor">
</div>
and the CSS I am using to gain the look. (When I figure out how to display them as a circle I am going to move this CSS to a more specific css selector)
.form-control {
color: #ffffff;
background-color: inherit;
padding: 0;
border: none;
box-shadow: none;
}
Here is what it looks like so far. There also still seems to be a thin, gray border around the inputs but I can't figure out how to get rid of that either.
github
I hope I am understanding you correctly - you want those three buttons to be circles instead of squares? Or do you want the whole div to be a square?
Either way, this is one option of doing it by manipulating the radius and setting a width and height:
.form-control {
color: #ffffff;
background-color: inherit;
padding: 0;
border: none;
box-shadow: none;
width: 100%;
height:100%;
border-radius: 50%;
}
I have the following problem: I have to use an HTML->PDF conversion service to render a piece of HTML. However, this service is a bit limited in it's functionality, so I need a way to "work around" it.
I'm mainly just printing text, so it's not a big deal, but the only problem is that I have to print some "unticked" and some "ticked" check boxes, my converter is failing at this. In particular I've tried:
Using the unicode ☐ ("☐") and ☑ ("☑") characters, but the converter doesn't render them (probably the font it's using doesn't
have them)
Using the WingDing characters þ and ¨ but again, the wingding font is not recognized
The converter doesn't support images, so can't just use an image
I was thinking, at this point, to "simulate" a checkbox by using spans with borders, something like:
<span style="border: 1px solid black; height: 12px; width: 12px;"></span>
However, I can't make it look correct (no fault of the converter this time, even browsers show the above as just one vertival line.
Can anyone help me "draw" checkboxes using just "basic" html elements? What would be the cleanest way?
PS: checkboxes need to be inline with the text.
You're on the right track.
Using HTML and CSS:
/* The standalone checkbox square*/
.checkbox {
width:20px;
height:20px;
border: 1px solid #000;
display: inline-block;
}
/* This is what simulates a checkmark icon */
.checkbox.checked:after {
content: '';
display: block;
width: 4px;
height: 7px;
/* "Center" the checkmark */
position:relative;
top:4px;
left:7px;
border: solid #000;
border-width: 0 2px 2px 0;
transform: rotate(45deg);
}
<div class="checkbox"></div> Unchecked<br><br>
<div class="checkbox checked"></div> Checked
The reason YOUR code didn't work was because you were using a span element, which is an inline element. You can use a span for this, but you'll need to add the style of display: block to the element (making it act as a block element instead of an inline element).
The div tag is a block, so no need for setting it's display style. If you would like the div to display inline, set the display: inline-block
Try this :
<div style="border: 1px solid black;
width: 10px;
height: 10px;
display: inline-block;
margin-right: 4px;">
</div>
https://jsfiddle.net/8rt4dqfc/
I am trying to change default bootstrap tab styles. So my custom style should be similar to this image's styles.
I tried it like this, but it's not working. The main thing doesn't skew the bottom of each tabs.
.content .nav-tabs {
background: #dd5b5b;
padding: 15px 0 0 0;
}
.content .nav-tabs > li > a {
padding: 5px 40px;
background: #eaedf2;
border: 1px solid #a48686;
border-bottom: none;
border-top-right-radius: 2em;
border-top-left-radius: 1.5em;
}
JS BIN with the code so far
Can anybody help me to get the output like the above image using pure css?
Thank you.
Bootstrap easily allows to customize tabs and their behaviour.
For the colors, consider using Gradients in your CSS, working in the corresponding classes, as you wish. Here is a nice generator: http://www.colorzilla.com/gradient-editor/
For the icons, you can just use FontAwesome (http://fontawesome.io/icons/) or similar webfont.
I'm trying to create a fancy button hover state for the default button in Bootstrap 3. Basically, the button starts out with 4px of border-bottom and when hovered this reduces to 2px. Because of this, I compensate with top: 2px on the button.
This works fine, however it's affecting other elements which I don't want it to do. For example, it pulls the paragraph beneath it up. Here's a JSFiddle example:
http://jsfiddle.net/kD6dQ/
You can see when you hover over the button the paragraph below changes position. How do I stop that?
I've tested this in the latest versions of Chrome and Firefox.
You used top for your element. When changed to margin-top it works.
fiddle
css:
.btn-default:hover {
background: #eba22b;
color: white;
border-bottom: 2px solid #db9016;
margin-top: 2px;
}
Try this for the hover declaration:
.btn-default:hover {
background: #eba22b;
color: white;
border-bottom: 2px solid #db9016;
top: 2px;
margin-bottom: 2px;
}
Check this fiddle: http://jsfiddle.net/kD6dQ/1/
The best way to solve this is to simply add height to .btn-default
E.G: height: 35px;
DEMO HERE