Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 7 years ago.
Improve this question
So I would like to have a kind of line break '-----------' between two divs.
Is there a way using bootstrap/css to make this responsive?
You could use the css property: border-bottom together with the border style: dotted to achieve the effect. Or the solid to have a solid line.
Example:
CSS:
.first {
border-bottom: dotted 1px black;
}
.second {
border-bottom: dotted 1px black;
}
HTML:
<div class="first">
<p>
This is first
</p>
</div>
<div class="second">
<p>
This is second
</p>
</div>
It sounds like you want to use the
<hr />
tag. If your divs start out side-by-side and then stack on smaller screens, you'll want to use media queries to decide when to display the horizontal rules.
Bootstrap has built-in classes to help you do this. They are documented here under the "Responsive utility classes" heading.
As Eric Zaporzan said, you could use the horizontal rule tag <hr/> to draw a line across the page. However if you want it strictly between the two divs then you could simply use border-bottom: 1px solid black; on the higher div.
Related
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed last year.
Improve this question
I have two divs placed up and down as mentioned in the image. I want to draw a vertical connecting line between these two divs. I used pipe (|) font to do this. But, it is not looking elegant. Can someone help me to draw an elegant vertical line between the divs?
Use border-left:4px dashed blue; property to create a dashed line for connecting the two divs.
.box {
width:80%;
margin-left:10%;
height:70px;
background: grey;
}
.vl {
border-left: 4px dashed blue;
height: 40px;
margin-left:50%
}
<div class="box"></div>
<div class="vl"></div>
<div class="box"></div>
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 1 year ago.
Improve this question
html code
<div class="title-content">
<div class="h1">
<h1><strong>stuff</strong></h1>
</div>
</div>
css code?
I need the css code and I want it in center of the bage while the border on under the word only and not all the line .
If you want just the title characters to be underlined and not the whole width of the title class element, then a simple text-align center will do it with the h1 display setting changed and the border set on that.
.title-content {
text-align: center;
}
.h1 {
border-bottom: 1px black solid;
display: inline-block;
}
<div class="title-content">
<div class="h1">
<h1><strong>stuff</strong></h1>
</div>
</div>
If you want more complex layout then probably investigating flex would be useful.
You could add it to the .title-content class using CSS.
.title-content {
display: flex;
justify-content: center;
}
.title-content h1 {
border-bottom: 1px solid black;
}
<div class="title-content">
<div class="h1">
<h1><strong>stuff</strong></h1>
</div>
</div>
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 5 years ago.
Improve this question
What I would like to do is make a bordered element with a horizontal line inside which contains an image at the top and text at the bottom. I had no idea how to make a div with a border and a horizontal line separating it.
What you've asked is how to create a horizontal border between two sections of a div, the easiest way I can think of is to just use an <hr /> element. You could also of course do this by stacking two divs vertically, but I think this is simplest.
.split-box {
border: black 1px solid;
border-radius: 20px;
}
.split-box hr {
border-width: 1px 0 0 0;
border-color: black;
margin: 0;
}
.split-text {
padding: 10px;
}
<div class="split-box">
<div class="split-text">
Top part of box
</div>
<hr />
<div class="split-text">
Bottom part of box
</div>
</div>
You can run the code snippet above to see this in action.
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 8 years ago.
Improve this question
I have link that I want a border around but I can't get the border to appear closer to the text. Below is the css for the element;
.signup{
border: 1px solid;
border-radius: 10px;}
which displays the border as;
If I add height: 1.2em it reduces the bottom spacing but not the top;
how do I reduce the spacing above the text?
I'm using the bootstrap flatly theme http://bootswatch.com/flatly/ the element I want the border around is 'WrapBootstrap' in the top right of the navigation bar.
You should give the border style to the <span> itself.
span{
border: 1px solid black;
border-radius: 10px;
padding: 5px 10px;
}
Editing the padding will allow you to move the border from the text.
In your case the position of the <span> and the .margin might be causing the discrepancy. Like #dfsq pointed out, there could be other factors.
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 8 years ago.
Improve this question
I've got the following code for my html section
only the first heading creates a border and the rest are all over the place, below is two photos of what it should look like, and what it does look like...
![enter image description here][1]
![enter image description here][2]
Any ideas? Thanks!
The code is a bit messy. But if this is what you want: http://jsfiddle.net/96z7U/3/
These are the changes:
<h1 class="titleBorder">Module Details</h1>
It had no class.
#moduleDetails {
border-style: solid;
/*border-width: 1px;*/
padding: 5px;
}
I'm not sure if you intended that border.
And:
.titleBorder {
padding-top: 10px;
border-style: solid;
border-width: 1px;
margin:0 auto;
float:left;
width:100%;
}
Add float left and width 100%
The problem seems to be connected with the fact that the content below the heading have the style float:left which causes the issue. Try adding the following code before each heading with class 'titleBorder':
<div style="clear:both"></div>