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.
when I add a border to my <h3> tag it wraps around the row instead of the actual element inside it. I have tried various changes of the HTML structure and CSS however I am unable to find a solution.
Here is my HTML:
<div class="container">
<div class="row">
<div class="brand col-md-5"><img src="media/img/logo.png" alt="Driven Car Sales" class="img-rounded logo-custom"></div>
<h3 class="phone-number col-md-7">01429 7654287</h3>
</div>
</div>
Here is my CSS:
.phone-number {
text-align: right;
margin-top: 2.8em;
diaplay: inline-block;
border: 1px solid orange;
As you can see the text aligns right as I need the number to display right of the page.
Any tips would be much appreciated.
almost good, change
diaplay: inline-block;
to
display: inline-block;
Wrap the h3 with a div with the class col-md-7.
The col-md-7 class is used for a column and in most cases, you don't really apply it directly to elements like a header tag.
I have a button on top of a div with a background colour, a box-shadow, and a border. The button has border-radius corners and the top div's background colour and other styles show through.
Easiest way to explain is this jsfiddle:
http://jsfiddle.net/wCppN/1/
HTML:
<div class="journal-content-article">
<div class="button">
Hello Button
</div>
</div>
<div class="journal-content-article">
Normal article with white background.
</div>
CSS:
.journal-content-article {
background-color: white;
border: 1px solid black;
box-shadow: 5px 5px 5px darkgrey;
}
.button {
border-radius: 20px;
background-color: green;
}
I want to be able to leave the 'normal article' div as is, but be able to remove the white background, the black border, and the box-shadow from the 'button'.
This is being done through Liferay web content so I'm limited to what HTML changes can be made. Only any HTML inside the div 'journal-content-article' can be changed, and can't add additional classes to that div or any parent div.
I also can't change the 'normal article' div contents as the users (no CSS/HTML experience) have to type that in.
Any ideas on how to achieve this, or am I forced to use Javascript?
Thanks!
Maybe this:
http://jsfiddle.net/wCppN/7/
<div class="journal-content-article">
<div class="button">Hello Button</div>
</div>
<div class="journal-content-article">
<div class="myClass">Normal article with white background.</div>
</div>
.journal-content-article {
margin: 20px 20px;
width: 150px;
}
.myClass {
background-color: white;
border: 1px solid black;
box-shadow: 5px 5px 5px darkgrey;
}
I don't think you can override .journal-content-article's style without either doing something like fredsbend suggests, or being able to edit the div itself. You can effectively override the white background, something like this:
div class="journal-content-article">
<div class="journal-content-inside">
<div class="button">
Hello Button
</div>
</div>
</div>
.journal-content-inside {
background-color: black;
margin: 0 auto;
padding: 0;
width: 150px;
overflow: hidden;
border: none;
}
However that doesn't fix the border and box-shadow problem. I don't know that those really are fixable without javascript or other means of editing outside the div.
One method that may help someone else, would be to set a negative margin on the button:
.button {
margin: -10px;
}
http://jsfiddle.net/wCppN/11/
This makes the button larger than the border and shadow, and with overflow: hidden off, covers up the problem.
However it has the disadvantage that the button becomes bigger than you want. In some designs that might be fine, but we have a box/column structure and just -2px of margin looks too badly out of alignment for me to use this (I'm a perfectionist)!
It might help someone else though!
The following code is setup in the template to show each time a new sidebar widget is inserted. (It shows around each new widget)
<div class="sidebox-top"></div>
<div class="sidebox">
<div class="widgets">
<div class="textwidget">
[WIDGET CONTENT]
</div>
</div>
</div>
The above displays the following CSS:
.sidebox-top {
background-image: url("/images/top-border-side.gif");
background-position: center top;
background-repeat: no-repeat;
height: 4px;
}
.sidebox {
border-bottom: 1px solid #D9D9D9;
border-left: 1px solid #D9D9D9;
border-right: 1px solid #D9D9D9;
margin-bottom: 14px;
padding: 10px 18px 5px;
}
The result is this:
This works great for most all widgets used. However, I want the above images to show in the sidebar without the sidebox-top blue line or border. I know there is a way to use certain CSS symbols to identify before or after by using the > symbol, I'm just not sure how to use that here or if it will even work.
Any help is always appreciated. Thank you!
Replicating the issue
Okay, I've attempted to replicate your image in this JSFiddle demo. In case JSFiddle is down, here is what this looks like:
For this instead of using a background-image and 4px height on .sidebox-top, I've simply used a 4px border-top. Whilst not an identical replication, this achieves the same basic effect.
Hiding the .sidebox-top element
Step 1
To begin with, we need to target the very first child contained within the .textwidget divider, only if it's an img. We do not want to apply this styling to any other img elements after that, nor do we want to apply the styling if the img isn't the first element within the container. To do this, we can use:
.textwidget img:first-child { ... }
Step 2
The next step is to give our image top padding and negative top margin equal to the sum of the top padding of .sidebox and the height of .sidebox-top. We then want to give our image a background which is the same colour as the background of your widget:*
.textwidget img:first-child {
background: #fff;
padding-top:14px;
margin-top: -14px;
}
* Note: This assumes that your widget's background is the same as your widget's container's background and that the background is a solid colour. If it isn't, you'll need to play around with background-position to align your patterned background with the widget's background.
From this, we end up with our image overlapping the top border whilst remaining in the same position that it started in:
Step 3
The third step is to cover the entire .sidebox-top. To do this we're going to need to give our selected img left and right padding and negative left and right margin equal to the sum of the left and right padding of the .sidebox and its border-width:
.textwidget img:first-child {
... /* Styling from Step 2 */
padding-left: 18px;
padding-right: 18px;
margin-left: -19px;
margin-right: -19px;
}
Step 4
Step 3 has certainly covered the entire .sidebox-top, but it's also covered the borders of .sidebox. For this we need to add identical borders to our selected img and reduce the left and right padding on our img to allow for this:
.textwidget img:first-child {
... /* Styling from Step 2 */
padding-left: 17px;
padding-right: 17px;
... /* Margins from Step 3 */
border-left: 1px solid #D9D9D9;
border-right: 1px solid #D9D9D9;
}
Final Step
The final step is to add a top border to our img to complete the border of the widget. As with Step 4, for this we'll need to reduce the size of the top padding to allow for this border:
.textwidget img:first-child {
... /* Styling from previous steps */
padding-top: 13px;
border-top: 1px solid #D9D9D9;
}
Final JSFiddle demo.
How do you make a vertical line using HTML?
Put a <div> around the markup where you want the line to appear to next, and use CSS to style it:
.verticalLine {
border-left: thick solid #ff0000;
}
<div class="verticalLine">
some other content
</div>
You can use the horizontal rule tag to create vertical lines.
<hr width="1" size="500" style="0 auto" />
By using minimal width and large size, horizontal rule becomes a vertical one.
You can use an empty <div> that is styled exactly like you want the line to appear:
HTML:
<div class="vertical-line"></div>
With exact height (overriding style in-line):
div.vertical-line{
width: 1px; /* Line width */
background-color: black; /* Line color */
height: 100%; /* Override in-line if you want specific height. */
float: left; /* Causes the line to float to left of content.
You can instead use position:absolute or display:inline-block
if this fits better with your design */
}
<div class="vertical-line" style="height: 45px;"></div>
Style the border if you want 3D look:
div.vertical-line{
width: 0px; /* Use only border style */
height: 100%;
float: left;
border: 1px inset; /* This is default border style for <hr> tag */
}
<div class="vertical-line" style="height: 45px;"></div>
You can of course also experiment with advanced combinations:
div.vertical-line{
width: 1px;
background-color: silver;
height: 100%;
float: left;
border: 2px ridge silver ;
border-radius: 2px;
}
<div class="vertical-line" style="height: 45px;"></div>
You can also make a vertical line using HTML horizontal line <hr />
html, body{height: 100%;}
hr.vertical {
width: 0px;
height: 100%;
/* or height in PX */
}
<hr class="vertical" />
There is no vertical equivalent to the <hr> element. However, one approach you may want to try is to use a simple border to the left or right of whatever you are separating:
#your_col {
border-left: 1px solid black;
}
<div id="your_col">
Your content here
</div>
HTML5 custom elements (or pure CSS)
1. javascript
Register your element.
var vr = document.registerElement('v-r'); // vertical rule please, yes!
*The - is mandatory in all custom elements.
2. css
v-r {
height: 100%;
width: 1px;
border-left: 1px solid gray;
/*display: inline-block;*/
/*margin: 0 auto;*/
}
*You might need to fiddle a bit with display:inline-block|inline because inline won't expand to containing element's height. Use the margin to center the line within a container.
3. instantiate
js: document.body.appendChild(new vr());
or
HTML: <v-r></v-r>
*Unfortunately you can't create custom self-closing tags.
usage
<h1>THIS<v-r></v-r>WORKS</h1>
example: http://html5.qry.me/vertical-rule
Don't want to mess with javascript?
Simply apply this CSS class to your designated element.
css
.vr {
height: 100%;
width: 1px;
border-left: 1px solid gray;
/*display: inline-block;*/
/*margin: 0 auto;*/
}
*See notes above.
One other option is to use a 1-pixel image, and set the height - this option would allow you to float it to where you need to be.
Not the most elegant solution though.
You can draw a vertical line by simply using height / width with any html element.
#verticle-line {
width: 1px;
min-height: 400px;
background: red;
}
<div id="verticle-line"></div>
There is a <hr> tag for horizontal line. It can be used with CSS to make horizontal line also:
.divider{
margin-left: 5px;
margin-right: 5px;
height: 100px;
width: 1px;
background-color: red;
}
<hr class="divider">
The width property determines the thickness of the line. The height property determines the length of the line. The background-color property determines the color of the line.
There isn't any tag to create a vertical line in HTML.
Method: You load a line image. Then you set its style like "height: 100px ; width: 2px"
Method: You can use <td> tags <td style="border-left: 1px solid red; padding: 5px;"> X </td>
To create a vertical line centered inside a div I think you can use this code.
The 'container' may well be 100% width, I guess.
div.container {
width: 400px;
}
div.vertical-line {
border-left: 1px solid #808080;
height: 350px;
margin-left: auto;
margin-right: auto;
width: 1px;
}
<div class="container">
<div class="vertical-line"> </div>
</div>
Rotate a <hr> 90 degrees:
<hr style="width:100px; transform:rotate(90deg);">
You can use hr (horizontal line) tag and than rotate it 90 degree with css below
hr {
transform:rotate(90deg);
-o-transform:rotate(90deg);
-moz-transform:rotate(90deg);
-webkit-transform:rotate(90deg);
}
http://jsfiddle.net/haykaghabekyan/0c969bm6/1/
One more approach is possible : Using SVG.
eg :
<svg height="210" width="500">
<line x1="0" y1="0" x2="0" y2="100" style="stroke:rgb(255,0,0);stroke-width:2" />
Sorry, your browser does not support inline SVG.
</svg>
Pros :
You can have line of any length and orientation.
You can specify the width, color easily
Cons :
SVG are now supported on most modern browsers. But some old browsers (like IE 8 and older) don't support it.
I used a combination of the "hr" code suggested, and here's what my code looks like:
<hr style="width:0.5px; height:500px; position: absolute; left: 315px;"/>
I simply changed the value of the "left" pixel value to position it. (I used the vertical line to line-up content on my webpage, and then I removed it.)
Vertical line right to the div
<div style="width:50%">
<div style="border-right:1px solid;">
<ul>
<li>
Empty div didn't shows line
</li>
<li>
Vertical line length depends on the content in the div
</li>
<li>
Here I am using inline style. You can replace it by external style or internal style.
</li>
</ul>
</div>
</div>
Vertical line left to the div
<div style="width:50%">
<div style="border-left:1px solid;">
<ul>
<li>
Empty div didn't shows line
</li>
<li>
Vertical line length depends on the content in the div
</li>
<li>
Here I am using inline style. You can replace it by external style or internal style.
</li>
</ul>
</div>
</div>
Why not use |, which is the html special character for |
If your goal is to put vertical lines in a container to separate side-by-side child elements (column elements), you could consider styling the container like this:
.container > *:not(:first-child) {
border-left: solid gray 2px;
}
This adds a left border to all child elements starting from the 2nd child. In other words, you get vertical borders between adjacent children.
> is a child selector. It matches any child of the element(s) specified on the left.
* is a universal selector. It matches an element of any type.
:not(:first-child) means it's not the first child of its parent.
Browser support: > * :first-child and :not()
I think this is better than a simple .child-except-first {border-left: ...} rule, because it makes more sense to have the vertical lines come from the container's rules, not the different child elements' rules.
Whether this is better than using a makeshift vertical rule element (by styling a horizontal rule, etc.) will depend on your use case, but this is an alternative at least.
To add a vertical line you need to style an hr.
Now when you make a vertical line it will appear in the middle of the page:
<hr style="width:0.5px;height:500px;"/>
Now to put it where you want you can use this code:
<hr style="width:0.5px;height:500px;margin-left:-500px;margin-right:500px;"/>
This will position it to the left, you can inverse it to position it to the right.
In the Previous element after which you want to apply the vertical row , You can set CSS ...
border-right-width: thin;
border-right-color: black;
border-right-style: solid;
Simply use either of the UTF-8 Miscellaneous Symbols
|
|
That's all you need and its compatible with all browsers.
Thanks me later.
For an inline style I used this code:
<div style="border-left:1px black solid; position:absolute; left:50%; height:300px;" />
and that positioned it directly in the center.
I needed an inline vertical line, so I tricked a button into becoming a line.
<button type="button" class="v_line">l</button>
.v_line {
width: 0px;
padding: .5em .5px;
background-color: black;
margin: 0px; 4px;
}
I think it is a simple way not do to anything more You can change border left or right according to your need
.vertical-line{
border-left:1px solid #000
}
<span class="vertical-line"></span
You can also use the HTML symbol | which renders as '|'
To make the vertical line to center in the middle use:
position: absolute;
left: 50%;