My title box is too wide. It should only be as wide as the title-text inside it called "WEBSITE TITLE".
Is it possible to get my padding-right to be the same as my current padding-left which would be around 5px?
FIDDLE HERE... FIDDLE
HTML:
<footer class="main_footer">
<div class="container">
<div class="row">
<div class="col-sm-12">
<div class="container-fluid">
<div class="text-center-footer-text">
<a href="#">
<h4>WEBSITE<span> TITLE</span></h4>
</a>
</div>
<p>Cool website.</p>
<p>text1</p>
<p>text2</p>
</div>
</div>
</div>
</div>
</footer>
CSS:
.text-center-footer-text h4 {
font-size: 20px;
padding: 5px;
color: green;
font-family: Agency FB;
font-weight: normal;
background-color: black;
border: 5px solid blue;
}
.text-center-footer-text h4 span {
color: red;
}
Set display: inline-block or display: table to h4
.text-center-footer-text h4 {
font-size: 20px;
padding: 5px;
color: green;
font-family: Agency FB;
font-weight: normal;
background-color: black;
border: 5px solid blue;
display: inline-block;
}
.text-center-footer-text h4 span {
color: red;
}
<footer class="main_footer">
<div class="container">
<div class="row">
<div class="col-sm-12">
<div class="container-fluid">
<div class="text-center-footer-text">
<a href="#">
<h4>WEBSITE<span> TITLE</span></h4>
</a>
</div>
<p>Cool website.</p>
<p>text1
</p>
<p>text2
</p>
</div>
</div>
</div>
</div>
</footer>
try with
display:inline-block.
http://jsfiddle.net/sunp5usj/2/
hope this helps.
Regards!
Related
Basically, I have some text with a border as such.
However, I want to achieve something like this, where the top bit has an orange colour and there are icons, how do I do so?
Code:
<div>
<p style="font-family: 'Space Grotesk'; margin-top: 100px; margin-left: 230px; border: 2px solid black; width: 250px; padding-left: 20px; height: 280px; padding-top: 40px; border-radius: 10px;">Awesome product! Works well. Easy to wear, great color scheme, does not tear easily and came home in under two days. Worth every rupee, it really helped me save money from buying the one-time use patches and rubber patches and has been a great experience with the patch.</p>
<hr style="height: 2px; background-color: black; margin-top: -314px; width: 270px; margin-left: 232px; border: none; position: relative;">
<h3 style="font-family: 'Space Grotesk'; margin-top: 230px; margin-left: 350px;">Rishan Reddy</h3>
<h3 style="font-family: 'Space Grotesk'; margin-left: 420px; margin-top: -12px;">Indus</h3>
</div>
Also, I want to make three of these divs side by side. How do I accomplish that?
Use fontawesome for your ellipsis. The header and content can be done as two divs in a container as below. It should be self-explanatory however if not, drop me a comment and I'll elaborate
.container {
border: 2px solid black;
border-radius: 1rem;
width: fit-content;
max-width: 30ch;
overflow: hidden;
min-height:10rem;
}
p {
margin: 0;
}
.header {
font-size: 1.5em;
background-color: #FFBF23;
line-height: 1.5rem;
padding-inline: 1rem;
border-bottom: 2px solid black;
}
.content {
padding: 1.5rem 1rem;
}
.signature-container {
margin-top:0.5rem;
display: flex;
justify-content: flex-end;
}
.review-container {
display:grid;
gap:1rem;
grid-template-columns:repeat(3, fit-content(30ch));
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css" integrity="sha512-xh6O/CkQoPOWDdYTDqeRdPCVd1SpvCA9XXcUnZS2FmJNp1coAFzvtCN9BmamE+4aHK8yyUHUSCcJHgXloTyT2A==" crossorigin="anonymous" referrerpolicy="no-referrer"
/>
<div class='review-container'>
<div class='container'>
<div class='header'>
<i class="fa-solid fa-ellipsis"></i>
</div>
<div class='content'>
<p>This is Review 1</p>
<div class='signature-container'>
<div>
<p>Adam Silver</p>
<p>Ashburn</p>
<p>Virginia</p>
</div>
</div>
</div>
</div>
<div class='container'>
<div class='header'>
<i class="fa-solid fa-ellipsis"></i>
</div>
<div class='content'>
<p>This is Review 2</p>
<div class='signature-container'>
<div>
<p>Adam Silver</p>
<p>Ashburn</p>
<p>Virginia</p>
</div>
</div>
</div>
</div>
<div class='container'>
<div class='header'>
<i class="fa-solid fa-ellipsis"></i>
</div>
<div class='content'>
<p>This is Review 3</p>
<div class='signature-container'>
<div>
<p>Adam Silver</p>
<p>Ashburn</p>
<p>Virginia</p>
</div>
</div>
</div>
</div>
<div class='container'>
<div class='header'>
<i class="fa-solid fa-ellipsis"></i>
</div>
<div class='content'>
<p>This is Review 4</p>
<div class='signature-container'>
<div>
<p>Adam Silver</p>
<p>Ashburn</p>
<p>Virginia</p>
</div>
</div>
</div>
</div>
</div>
I need the table part align in the image but i'm using bootstrap container, col-md-4 and also i need お知らせ to be at the top when using mobile.
HTML:
<div class="container padding" id="temp">
<div class="row text-center padding">
<div class="col-md-4">
<img src="sbpage/img/img1.png">
<div class="txt">
<h3>かっこよく<br>
しっかり稼げる</h3>
<h4>
マグロなど一匹あたり約１～２万円で<br>
売れるので月収100万円も夢ではあ<br>
りません。目指せ年収1000万円！
</h4>
</div>
</div>
<div class="col-md-4">
<img src="sbpage/img/img2.png">
<div class="txt">
<h3>大物釣って<br>
家族に自慢！</h3>
<h4>
自慢できる仕事ってそうそうあるもの<br>
ではない、がここにはある！うちの父<br>
ちゃんりょうマンやき！そんな声が聞こ<br>
えてきそう。
</h4>
</div>
</div>
<div class="col-md-4">
<img src="sbpage/img/img3.png">
<div class="txt">
<h3>漁師になるなら<br>
土佐が一番！</h3>
<h4>
日本を代表する漁場といえば、何とい<br>
っても言わずと知れた南国土佐。釣っ<br>
た魚はおそらくどこにも負けない旨さ<br>
のものばかり！土佐の高知は日本一<br>
魚がうまい所なのです。
</h4>
</div>
</div>
</div>
</div>
CSS:
#temp h3{
color: #1D2087;
font-size: 33px;
margin-top: 55px;
font-weight: bold;
}
#temp .txt h4{
color: #1D2087;
font-size: 15px;
padding: 1% 0 0 12%;
font-weight: bold;
text-align: left;
}
#info{
background-color: #1D2087;
font-size: 19px;
color: white;
padding: 35px 1% 3% 25px;
margin-top: 55px;
}
.no1 {
font-weight: bold;
}
#info tr a{
color: white;
padding-left: 25px;
float: left;
}
#info tr td a:hover{
color: #ffff00;
}
Alignment
News table
Note that I've made the footer #info heading to go from left aligned to center on smaller screens. the images are also responsive so that they don't overlap on smaller screens. Images are aligned with the #info borders.
Here is your updated code: Codepen
#temp h3 {
color: #1D2087;
font-size: 33px;
margin-top: 55px;
font-weight: bold;
}
#temp .txt h4 {
color: #1D2087;
font-size: 15px;
padding: 1% 0 0 12%;
font-weight: bold;
text-align: left;
}
#info {
background-color: #1D2087;
font-size: 19px;
color: white;
padding: 35px 1% 3% 25px;
margin-top: 55px;
}
.no1 {
font-weight: bold;
}
#info a {
color: white;
padding-left: 25px;
float: left;
text-decoration: underline;
}
#info a:hover {
color: #ffff00;
text-decoration: none;
}
#info .txt {
height: 2em;
}
.headin {
text-align: center
}
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
</head>
<body>
<div class="d-flex pt-4" id="temp">
<div class="col-md-4">
<img class="img-fluid" src="https://picsum.photos/900?image=0" alt="">
<div class="txt text-center">
<h3>かっこよく<br> しっかり稼げる
</h3>
<h4>
マグロなど一匹あたり約１～２万円で<br> 売れるので月収100万円も夢ではあ
<br> りません。目指せ年収1000万円！
</h4>
</div>
</div>
<div class="col-md-4">
<img class="img-fluid" src="https://picsum.photos/900?image=2" alt="">
<div class="txt text-center">
<h3>大物釣って<br> 家族に自慢！
</h3>
<h4>
自慢できる仕事ってそうそうあるもの<br> ではない、がここにはある！うちの父
<br> ちゃんりょうマンやき！そんな声が聞こ
<br> えてきそう。
</h4>
</div>
</div>
<div class="col-md-4">
<img class="img-fluid" src="https://picsum.photos/900?image=6" alt="">
<div class="txt text-center">
<h3>漁師になるなら<br> 土佐が一番！
</h3>
<h4>
日本を代表する漁場といえば、何とい<br> っても言わずと知れた南国土佐。釣っ
<br> た魚はおそらくどこにも負けない旨さ
<br> のものばかり！土佐の高知は日本一
<br> 魚がうまい所なのです。
</h4>
</div>
</div>
</div>
<div class="d-flex p-3">
<div class="col-sm-12" id="info">
<div class="txt h5 text-xs-center text-sm-center text-md-left headin">
<b>お知らせ</b>
</div>
<div class="container-fluid">
<div class="row">
<div>2019.1.20 </div>これはテストのための長いリンクです。
</div>
<div class="row">
<div>2019.1.21 </div>これもまた長いリンクです。
</div>
</div>
</div>
</div>
</body>
それが役立つことを願います
平和 🖖
I'm not sure what you are exactly looking for. But as to my understanding setting your image width to 100% within the container would solve your alignment issue.
.col-md-4 img{
width: 100%;
}
And to answer your second question (News table), you need to show your news table in your markup so that I can provide you with an solution. Cheers!
Hope this will help you. I've just create the class for <img> tag.
.img
{
height: 30%;
width: 100%;
}
It shows the aligned image.
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<style>
#temp h3{
color: #1D2087;
font-size: 33px;
margin-top: 55px;
font-weight: bold;
}
#temp .txt h4{
color: #1D2087;
font-size: 15px;
padding: 1% 0 0 12%;
font-weight: bold;
text-align: left;
}
.img
{
height: 30%;
width: 100%;
}
#info{
background-color: #1D2087;
font-size: 19px;
color: white;
padding: 35px 1% 3% 25px;
margin-top: 55px;
}
.no1 {
font-weight: bold;
}
#info tr a{
color: white;
padding-left: 25px;
float: left;
}
#info tr td a:hover{
color: #ffff00;
}
</style>
</head>
<body>
<div class="container padding" id="temp">
<div class="row text-center padding">
<div class="col-md-4">
<img class="img" src="https://i.stack.imgur.com/ac47X.png">
<div class="txt">
<h3>かっこよ<br>
しっかり稼げる</h3>
<h4>
マグロなど一匹あたり約１～２万円で<br>
売れるので月収100万円も夢ではあ<br>
りません。目指せ年収1000万円！
</h4>
</div>
</div>
<div class="col-md-4">
<img class="img" src="https://i.stack.imgur.com/ac47X.png">
<div class="txt">
<h3>大物釣って<br>
家族に自慢！</h3>
<h4>
自慢できる仕事ってそうそうあるもの<br>
ではない、がここにはある！うちの父<br>
ちゃんりょうマンやき！そんな声が聞こ<br>
えてきそう。
</h4>
</div>
</div>
<div class="col-md-4">
<img class="img" src="https://i.stack.imgur.com/ac47X.png">
<div class="txt">
<h3>漁師になるなら<br>
土佐が一番！</h3>
<h4>
日本を代表する漁場といえば、何とい<br>
っても言わずと知れた南国土佐。釣っ<br>
た魚はおそらくどこにも負けない旨さ<br>
のものばかり！土佐の高知は日本一<br>
魚がうまい所なのです。
</h4>
</div>
</div>
</div>
<!--div class="d-flex p-3"-->
<div class="row">
<div class="col-sm-12" id="info">
<div class="txt h5 text-xs-center text-sm-center headin" style="text-align:center;">
<b>お知らせ</b>
</div>
<div class="container-fluid">
<div class="row">
<div>2019.1.20 </div>これはテストのための長いリンクです。
</div>
<div class="row">
<div>2019.1.21 </div>これもまた長いリンクです。
</div>
</div>
</div>
</div>
</div>
</body>
</html>
And I've used the online bootstrap package. Instead of that use your downloaded package. So you can avoid the uncaught errors.
Best of luck.
I'm trying to create buttons and I have a parent div holding all of the other divs together. The thing with the parent div though, it's creating its own width and it just won't create an auto width around the other divs.
I just want to center all the buttons/divs perfectly and the width from the parent div is preventing me.
Any help would be amazing, thank you!!
<style>
h1.helph1 {
text-align: center;
font-family: Montserrat, sans-serif;
font-weight: 100;
padding-bottom: 40px;
padding-top: 20px;
border-bottom: #e3e3e3 solid 1px;
}
.toplinks div, .middlelinks div, .bottomlinks div {
float: left;
width: 250px !important;
}
.helpparent .toplinks div, .middlelinks div, .bottomlinks div{
background: #2fb796;
padding: 10px;
margin: 10px;
color: white;
font-family: Montserrat;
text-align: center;
}
.helpparent {
width: 66.1%;
margin: 0 auto;
}
</style>
<html>
<h1 class="helph1">Forum Help Center</h1>
<div class="helpparent">
<div class="toplinks">
<div class="announcementhelp">Announcements</div>
<div class="gettingstartedhelp">Getting Started</div>
<div class="gasrhelp">GASR 101</div>
</div>
<div class="seperator" style="clear:both;"></div>
<div class="middlelinks">
<div class="forumshophelp">Forums and Shops</div>
<div class="rulesdmcahelp">Community & DMCA Guidelines</div>
<div class="sandrhelp">Support & Report System</div>
</div>
<div class="seperator" style="clear:both;"></div>
<div class="bottomlinks">
<div class="eventhelp">Forum Events</div>
<div class="storehelp">GASR Store</div>
<div class="profilehelp">Your Profile & Settings</div>
</div>
<div class="seperator" style="clear:both;"></div>
</div>
</html>
You can get rid of the width on the .help-parent class and add display: flex; flex-direction: column; align-items: center; to center the divs. However, you must remove the float on the .toplinks div, .middlelinks div, .bottomlinks div for this to work. Also as a result of removing the float, the text-decoration on the links seems to come back, so I added text-decoration: none; to your <a> tags.
<style>h1.helph1 {
text-align: center;
font-family: Montserrat, sans-serif;
font-weight: 100;
padding-bottom: 40px;
padding-top: 20px;
border-bottom: #e3e3e3 solid 1px;
}
.toplinks div,
.middlelinks div,
.bottomlinks div {
width: 250px !important;
}
a {
text-decoration: none;
}
.helpparent .toplinks div,
.middlelinks div,
.bottomlinks div {
background: #2fb796;
padding: 10px;
margin: 10px;
color: white;
font-family: Montserrat;
text-align: center;
}
.helpparent {
display: flex;
flex-direction: column;
align-items: center;
}
</style>
<html>
<h1 class="helph1">GASR Help Center</h1>
<div class="helpparent">
<div class="toplinks">
<a href="https://www.youtube.com/">
<div class="announcementhelp">Announcements</div>
</a>
<a href="https://www.youtube.com/">
<div class="gettingstartedhelp">Getting Started</div>
</a>
<a href="https://www.youtube.com/">
<div class="gasrhelp">GASR 101</div>
</a>
</div>
<div class="seperator" style="clear:both;"></div>
<div class="middlelinks">
<a href="https://www.youtube.com/">
<div class="forumshophelp">Forums and Shops</div>
</a>
<a href="https://www.youtube.com/">
<div class="rulesdmcahelp">Community & DMCA Guidelines</div>
</a>
<a href="https://www.youtube.com/">
<div class="sandrhelp">Support & Report System</div>
</a>
</div>
<div class="seperator" style="clear:both;"></div>
<div class="bottomlinks">
<a href="https://www.youtube.com/">
<div class="eventhelp">Forum Events</div>
</a>
<a href="https://www.youtube.com/">
<div class="storehelp">GASR Store</div>
</a>
<a href="https://www.youtube.com/">
<div class="profilehelp">Your Profile & Settings</div>
</a>
</div>
<div class="seperator" style="clear:both;"></div>
</div>
</html>
Try getting rid of your div element inside your a. This div is unnecessary and is leaving your a without a clickable area.
After that you can choose to use flex to align your content
h1.helph1 {
text-align: center;
font-family: Montserrat, sans-serif;
font-weight: 100;
padding-bottom: 40px;
padding-top: 20px;
border-bottom: #e3e3e3 solid 1px;
}
.toplinks a, .middlelinks a, .bottomlinks a {
width: 250px !important;
}
.helpparent .toplinks a, .middlelinks a, .bottomlinks a{
background: #2fb796;
padding: 10px;
margin: 10px;
color: white;
font-family: Montserrat;
text-align: center;
}
.toplinks, .middlelinks, .bottomlinks {
display: flex;
flex-direction: column;
align-items: center;
}
<h1 class="helph1">Forum Help Center</h1>
<div class="helpparent">
<div class="toplinks">
Announcements
Getting Started
101
</div>
<div class="seperator" style="clear:both;"></div>
<div class="middlelinks">
Forums and Shops
Community & DMCA Guidelines
Support & Report System
</div>
<div class="seperator" style="clear:both;"></div>
<div class="bottomlinks">
Forum Events
GASR Store
Your Profile & Settings
</div>
<div class="seperator" style="clear:both;"></div>
</div>
Struggling to understand bootstrap, I'm trying to make a header that looks like the image below and stays like that for all screens sizes, however I don't seem to get the results using the code below, help?
.intro {
top:20%;
left:32%;
color: black;
font-weight: bold;
font-size: 18px;
hr {
margin-left:0rem;
width:80px;
}
h1 {
color: green !important;
margin-left: 10rem;
font-weight: bold;
font-size:42px;
line-height: 1rem !important;
}
h3 {
line-height:5rem !important;
padding-bottom: 1rem;
color: black;
font-weight: bold;
font-size: 115px;
}
}
<link href="//netdna.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row intro">
<div class="col-md-12">
<div class="row">
<h1 class="what">This is Text</h1>
</div>
<div class="row no-gutters">
<div class="col-xs-12 col-xs-offset-1">
<h1>this is more</h1>
</div>
</div>
<div class="row">
<div class="col-lg-1">
<h3 style="float:left">BIGGER </h3>
</div>
<div class="col-lg-1">
<h1> ?</h1>
</div>
</div>
<div class="row">
<div class="col-xs-5">
<hr/>
</div>
</div>
</div>
</div>
Please replace this code with you old code.
I think it's help for you?
<link href="//netdna.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row intro">
<div class="col-md-12">
<div class="row">
<div class="col-lg-6">
<h1 class="what">This is Text</h1>
</div>
</div>
<div class="row no-gutters">
<div class="col-xs-12 col-xs-offset-1">
<h1>this is more</h1>
</div>
</div>
<div class="row">
<div class="col-lg-6">
<h3>BIGGER <span>?</span></h3>
</div>
</div>
</div>
</div>
</div>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<style>
.intro {
top: 20%;
left: 32%;
color: black;
font-weight: bold;
font-size: 18px;
}
h1 {
color: green !important;
font-weight: bold;
font-size: 42px;
line-height: 1rem !important;
}
h3 {
padding-bottom: 1rem;
color: black;
font-weight: bold;
font-size: 115px;
position: relative;
margin: 0;
line-height: 1;
}
h3 span {
font-size: .5em;
display: inline-block;
transform: translateY(-75%);
line-height: 1;
}
h3:after {
content: '';
position: absolute;
border-bottom: 6px solid black;
bottom: 0;
left: 30%;
right: 0;
}
</style>
I saw your code and I can see unwanted tag because I am not able to see the opening tag of hr and some edits in style sheet.
CSS:
.intro {
top:20%;
left:32%;
color: black;
font-weight: bold;
font-size: 18px;
}
hr {
margin-left:0rem;
width:80px;
}
h1 {
color: green !important;
margin-left: 10rem;
font-weight: bold;
font-size:42px;
line-height: 1rem !important;
}
h3 {
line-height:5rem !important;
padding-bottom: 1rem;
color: black;
font-weight: bold;
font-size: 115px;
}
HTML:
<div class="row intro">
<div class="col-md-12">
<div class="row">
<h1 class="what">This is Text</h1>
</div>
<div class="row no-gutters">
<div class="col-xs-12 col-xs-offset-1">
<h1>this is more</h1>
</div>
</div>
<div class="row">
<div class="col-lg-1">
<h3 style="float:left">BIGGER </h3>
</div>
<div class="col-lg-1">
<h1> ?</h1>
</div>
</div>
<div class="row">
<div class="col-xs-5">
</div>
</div>
</div>
</div>
Be sure to load your styles after bootstrap. Changed your h3 a little, added the ? in a span and am using a pseudo element for the underline.
<link href="//netdna.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<style>
.intro {
top: 20%;
left: 32%;
color: black;
font-weight: bold;
font-size: 18px;
}
h1 {
color: green !important;
font-weight: bold;
font-size: 42px;
line-height: 1rem !important;
}
h3 {
padding-bottom: 1rem;
color: black;
font-weight: bold;
font-size: 115px;
position: relative;
margin: 0;
line-height: 1;
}
h3 span {
font-size: .5em;
display: inline-block;
transform: translateY(-75%);
line-height: 1;
}
h3:after {
content: '';
position: absolute;
border-bottom: 6px solid black;
bottom: 0;
left: 30%;
right: 0;
}
</style>
<div class="container">
<div class="row intro">
<div class="col-md-12">
<div class="row">
<div class="col-lg-6">
<h1 class="what">This is Text</h1>
</div>
</div>
<div class="row no-gutters">
<div class="col-xs-12 col-xs-offset-1">
<h1>this is more</h1>
</div>
</div>
<div class="row">
<div class="col-lg-6">
<h3>BIGGER <span>?</span></h3>
</div>
</div>
</div>
</div>
</div>
This should do what u want in terms of bootstrap. If you want to change the spacing size and color of the text then use CSS but this way will keep everything the same cross browser
<html>
<head>
<title> C.E.O.
</title>
<link rel="stylesheet" type="text/css" href="stack.css" />
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrap.cdn.com/3.2.0/js/bootstrap.min.js"></script>
</head>
<body>
<!-- Background image builder -->
<div class="container">
<div class="row">
<div class="col-md-12">
<h1 class="head" style="text-align:center;"> This is text </h1>
<h1 class="head2" style="text-align:center;"> This is too </h1>
<h3 class="subhead" style="text-align:center; font-size: 90px;"> BIGGER? </h3>
</div>
</div>
</div>
</body>
</html>
I'd like to have my span with number "30" with the same height of the vertical line of the div that contains it.
#divDay {
font-family: Arial;
font-size: 44px;
border-right: 2px solid #000;
margin-bottom: 6px;
margin-top: 10px;
height: 100%
}
#divDate {
font-family: Arial;
font-size: 18px;
margin-bottom: 6px;
margin-top: 10px;
}
#divHeader{
border-bottom: 2px solid #000;
}
<div class="row">
<div id="divHeader" class="col-xs-12">
<div id="divDay" class="col-xs-2">
<span>30</span>
</div>
<div id="divDate" class="col-xs-10">
<div class="row">
<span style="margin-left: 8px">Monday</span>
</div>
<div class="row">
<span style="margin-left: 8px">April 2016</span>
</div>
</div>
</div>
</div>
https://jsfiddle.net/h1m80Lv8/
Big thanks for any help.
#import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css');
#divDay {
font-family: Arial;
height: 100%
}
#divDate {
border-left: 2px solid #000;
font-family: Arial;
font-size: 18px;
margin-bottom: 6px;
margin-top: 10px;
}
#divDay span { position:absolute;font-size: 72px;margin-top:-15px;}
#divHeader{
border-bottom: 2px solid #000;
}
<div class="row">
<div id="divHeader" class="col-xs-12">
<div id="divDay" class="col-xs-2">
<span>30</span>
</div>
<div id="divDate" class="col-xs-10">
<div class="row">
<span style="margin-left: 8px">Monday</span>
</div>
<div class="row">
<span style="margin-left: 8px">April 2016</span>
</div>
</div>
</div>
</div>
Then you need to give the span "display: block;"
#divDay>span {
display: block;
}
Check Fiddle here
More options:
<span style="padding: 6px;">30</span>
Or:
<span style="display:inline-block;">30</span>