How to make table responsive and align with the image using bootstrap
Question
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;
}
3 answers
solution1
1 2019-02-20 05:20:11
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><a href="" class="col-10 text-left p-0">これはテストのための長いリンクです。</a> </div> <div class="row"> <div>2019.1.21 </div><a href="" class="col-10 text-left p-0">これもまた長いリンクです。</a> </div> </div> </div> </div> </body>
それが役立つことを願います
平和 🖖
solution2
0 2019-02-20 04:18:26
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!
solution3
0 2019-02-20 04:39:27
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><a href="" class="col-10 text-left p-0">これはテストのための長いリンクです。</a> </div> <div class="row"> <div>2019.1.21 </div><a href="" class="col-10 text-left p-0">これもまた長いリンクです。</a> </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.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
How to make vertical and horizontal align responsive image in bootstrap
How to make table responsive and attractive using bootstrap?
Align responsive image to bottom of div using bootstrap
How to make image responsive with bootstrap
How to make image responsive with Bootstrap?
How to align text on top of image and make it responsive?
How to align responsive image side by side with table
Bootstrap responsive footer image align
Responsive image align center bootstrap 3
How to make scrollable html table columns responsive using bootstrap
Related Tags