I use class media bootstrap to listing the contact information. It gives me this result :
I want the detail contacts to be in one row (not stacking like that). I did the div class=row but doesn't give me what I want.
this is my code :
<section id="kontak">
<div class="container">
<div class="row">
<div class="col-lg-12 text-center">
<h2>Kontak</h2>
<hr class="hr-line">
<h5>Konfirmasi Pembayaran atau Informasi Lainnya Silahkan Hubungi Kami Di</h5>
<br>
</div>
</div>
<div class="row">
<div class="media">
<div class="col-sm-4">
<div class="media-left"><img class="media-object" src="<?php echo base_url('asset/img/whatsapp.jpg');?>" alt="..."></div>
<div class="media-body">
<h4 class="media-heading">Whatsapp</h4>
<h5>+62-898-2057-545</h5>
</div>
</div>
</div>
<div class="media">
<div class="col-sm-4">
<div class="media-left"><img class="media-object" src="<?php echo base_url('asset/img/email.jpg') ?>" alt="..."></div>
<div class="media-body">
<h4 class="media-heading">Email</h4>
<h7><strong>kirimundangandotcom#gmail.com</strong></h7>
</div>
</div>
</div>
<div class="media">
<div class="col-sm-4">
<div class="media-left"><img class="media-object" src="<?php echo base_url('asset/img/phone.png') ?>" alt="..."></div>
<div class="media-body">
<h4 class="media-heading">Telepon</h4>
<h5>+62-898-2057-545</h5>
</div>
</div>
</div>
</div>
</div>
</section>
Please help :(
your media blocks are inside out...
<div class="col-sm-4">
<div class="media">
<div class="media-left"><img class="media-object" src="<?php echo base_url('asset/img/email.jpg') ?>" alt="..."></div>
<div class="media-body">
<h4 class="media-heading">Email</h4>
<h7><strong>kirimundangandotcom#gmail.com</strong></h7>
</div>
</div>
</div>
your .col_* blocks should be the only direct children of your .rows. everything in a row should be in a column.
only thing you need is to remove div with class media
<section id="kontak">
<div class="container">
<div class="row">
<div class="col-lg-12 text-center">
<h2>Kontak</h2>
<hr class="hr-line">
<h5>Konfirmasi Pembayaran atau Informasi Lainnya Silahkan Hubungi Kami Di</h5>
<br>
</div>
</div>
<div class="row">
<div class="col-sm-4">
<div class="media-left"><img class="media-object" src="<?php echo base_url('asset/img/whatsapp.jpg');?>" alt="..."></div>
<div class="media-body">
<h4 class="media-heading">Whatsapp</h4>
<h5>+62-898-2057-545</h5>
</div>
</div>
<div class="col-sm-4">
<div class="media-left"><img class="media-object" src="<?php echo base_url('asset/img/email.jpg') ?>" alt="..."></div>
<div class="media-body">
<h4 class="media-heading">Email</h4>
<h7><strong>kirimundangandotcom#gmail.com</strong></h7>
</div>
</div>
<div class="col-sm-4">
<div class="media-left"><img class="media-object" src="<?php echo base_url('asset/img/phone.png') ?>" alt="..."></div>
<div class="media-body">
<h4 class="media-heading">Telepon</h4>
<h5>+62-898-2057-545</h5>
</div>
</div>
</div>
</div>
</section>
Your structure is not correct
<div class="col-sm-4">
<div class="media">
- - - - - - -
</div>
</div>
. I take your example. check demo
Related
Hello i have a problem with my code :
<div class="row">
<div class="col-4"><img src="https://www.plumenshopus.com/i/2018/08/four-chaleur-tournante-pyrolyse-candy-fcpk-electrique-encastrable-symbole-brandt-darty-pulsee-brassee-electrolux-gaz-air-brasse-vapeur-smeg-catalyse-mini-ariston-pulse-difference-615x385.jpg" alt="bloc1" /></div>
<div class="col-4"><img src="https://www.plumenshopus.com/i/2018/08/four-chaleur-tournante-pyrolyse-candy-fcpk-electrique-encastrable-symbole-brandt-darty-pulsee-brassee-electrolux-gaz-air-brasse-vapeur-smeg-catalyse-mini-ariston-pulse-difference-615x385.jpg" alt="bloc1" /></div>
</div>
<div class="row">
<div class="col-4"><img src="https://www.plumenshopus.com/i/2018/08/four-chaleur-tournante-pyrolyse-candy-fcpk-electrique-encastrable-symbole-brandt-darty-pulsee-brassee-electrolux-gaz-air-brasse-vapeur-smeg-catalyse-mini-ariston-pulse-difference-615x385.jpg" alt="bloc1" /></div>
<div class="col-4"><img src="https://www.plumenshopus.com/i/2018/08/four-chaleur-tournante-pyrolyse-candy-fcpk-electrique-encastrable-symbole-brandt-darty-pulsee-brassee-electrolux-gaz-air-brasse-vapeur-smeg-catalyse-mini-ariston-pulse-difference-615x385.jpg" alt="bloc1" /></div>
</div>
And i have this result :
result bootstrap picture
And i want one other img likes this :
results final
How can i add other image with bootstrap for the final results ?
Thank you
As per my interpretation of your question, using a 2 columns inside a row and further dividing the first column into columns would work.
<div id="container">
<div class="row main">
<div class="col-8">
<div class="row">
<div class="col">
<img src="https://picsum.photos/300/600" class="img-fluid" alt="">
</div>
<div class="col">
<img src="https://picsum.photos/300/600" class="img-fluid" alt="">
</div>
</div>
<div class="row">
<div class="col">
<img src="https://picsum.photos/300/600" class="img-fluid" alt="">
</div>
<div class="col">
<img src="https://picsum.photos/300/600" class="img-fluid" alt="">
</div>
</div>
</div>
<div class="col-4">
<img src="https://picsum.photos/300/1200" class="img-fluid" alt="">
</div>
</div>
</div>
Demo: https://stackblitz.com/edit/js-tcjrtb
Correct me if my understanding of the question is wrong.
<div class="container">
<div class="row">
<div class="col"><img src="" alt="bloc1" /></div>
<div class="col"><img src="" alt="bloc1" /></div>
<div class="col"><img src="" alt="bloc1" /></div>
</div>
<div class="row">
<div class="col"><img src="" alt="bloc1" /></div>
<div class="col"><img src="" alt="bloc1" /></div>
<div class="col"><img src="" alt="bloc1" /></div>
</div>
</div>
This code should do the work. Simple application of bootstrap documentation
See Codepen example
<div class="row">
<div class="col-xs-3">
<img src="image/t.png " class="img-responsive">
</div>
<div class="col-xs-9 ">
<img src="image/b.png " class="img-responsive">
</div>
</div>
I want b.png image to be right-align.
You just need to add .pull-right class.
So it will be like this example :
<div class="row">
<div class="col-xs-3">
<img src="image/t.png " class="img-responsive">
</div>
<div class="col-xs-9 ">
<img src="image/b.png " class="pull-right img-responsive">
</div>
</div>
Just add the pull-right bootstrap class
<div class="col-xs-9 ">
<img src="image/b.png " class="img-responsive pull-right">
</div>
What would be the best / correct method to replicate the following using bootstrap. There are four colum, each of which is 25% wide, and I would like to add an image inbetween. The columns remain 25% all the way from mobile to desktop.
Simple
<div class="row">
<div class="col-xs-3 pull-left">
<div class"col-xs-10">
<img src="envelop.png" class="img-responsive"/>
</div>
<div class"col-xs-2 text-center">
<img src="plus.png" class="img-responsive"/>
</div>
</div>
<div class="col-xs-3 pull-left">
<div class"col-xs-10">
<img src="envelop.png" class="img-responsive"/>
</div>
<div class"col-xs-2 text-center">
<img src="plus.png" class="img-responsive"/>
</div>
</div>
<div class="col-xs-3 pull-left">
<div class"col-xs-10">
<img src="envelop.png" class="img-responsive"/>
</div>
<div class"col-xs-2 text-center">
<img src="plus.png" class="img-responsive"/>
</div>
</div>
<div class="col-xs-3 pull-left">
<div class"col-xs-10">
<img src="envelop.png" class="img-responsive"/>
</div>
<div class"col-xs-2 text-center">
</div>
</div>
</div>
PS: You may use text or content for + sign ... its upto you !! I prefer text/content because it will render faster then image.
This seems to do the job, though it's a bit convoluted. The 15-column layout is tricky.
.row.shift-left {
margin-left: -20px;
}
<div class="container-fluid">
<div class="row">
<div class="col-xs-11 col-xs-offset-1">
<div class="row shift-left">
<div class="col-xs-3">
<div class="row">
<div class="col-xs-9">Words words words.</div>
<div class="col-xs-3">
<img src="http://placehold.it/300x800" class="img-responsive" />
</div>
</div>
</div>
...
Demo
I am a little stuck with creating this layout in Bootstrap 3's Grid:
http://oi62.tinypic.com/142sjt0.jpg
(Could not post image here due to rep)
This is where I got up to: http://www.bootply.com/7VrPUQwFAV
<div class="container">
<div class="row">
<div class="col-sm-3">
<img class="img-responsive" src="http://placehold.it/263x263" alt="">
<img class="img-responsive padding-top-30" src="http://placehold.it/263x556" alt="">
</div>
<div class="col-sm-6">
<img class="img-responsive" src="http://placehold.it/555x555" alt="">
<div class="row">
<div class="col-sm-12 col-sm-offset-6">
<img class="img-responsive padding-top-30" src="http://placehold.it/555x263" alt="">
</div>
</div>
</div>
<div class="col-sm-3">
<img class="img-responsive" src="http://placehold.it/526x526" alt="">
<img class="img-responsive padding-top-30" src="http://placehold.it/526x526" alt="">
</div>
</div>
</div>
Can anyone please help?
<div class="container">
<div class="row">
<div class="col-sm-3">
<img class="img-responsive" src="http://placehold.it/263x263" alt="">
<img class="img-responsive padding-top-30" src="http://placehold.it/263x556" alt="">
</div>
<div class="col-sm-9">
<div class="row">
<div class="col-sm-8">
<img class="img-responsive" src="http://placehold.it/555x555" alt="">
</div>
<div class="col-sm-4">
<img class="img-responsive" src="http://placehold.it/263x263" alt="">
<img class="img-responsive" src="http://placehold.it/263x263" alt="">
</div>
</div>
<div class="row">
<div class="col-sm-4">
<img class="img-responsive" src="http://placehold.it/263x263" alt="">
</div>
<div class="col-sm-8">
<img class="img-responsive" src="http://placehold.it/555x263" alt="">
</div>
</div>
</div>
</div>
</div>
I am working on formatting for a better user experience using bootstrap3. I have decided to implement the row-fluid(grid) layout. However the issue is that both grids are stick on each other instead of having some space between them. It is like the second grid cannot tell where the float ends. I have tried clear, search online but up to now no luck. I appreciate any help I can get. Here is my code
<div class="row-fluid">
<!--First grid-->
<div class="col-lg-4 col-md-5 col-xs-14" style="border:1px solid black; border-radius:5px;">
<div class="thumbnail pull-left">
<?php echo '<img class="profilePic" class="img-responsive" src="../' . $imageProfile . '" height="160" width="160" style="border-radius:10px;" />';?>
<p class="updateProfilePic">
Update profile picture
<br/>
<img src="../webImage/cameraIcon.png" height="20" width="20"/>
</p>
</div>
<div>
<h3><?php echo $name?></h3>
<h4><?php echo $type?></h4>
</div>
<div style="clear:both" class="row-fluid">
<div class="panel panel-default">
<div class="panel-heading">
<div class="panel-title">About Me</div>
</div>
<div class="panel-body">
<span><?php echo $about?></span>
</div>
<div class="panel-heading">
<div class="panel-title">Email</div>
</div>
<div class="panel-body">
<span><?php echo $email?></span>
</div>
<div class="panel-heading">
<div class="panel-title">Phone</div>
</div>
<div class="panel-body">
<span><?php echo $phone?></span>
</div>
<div class="panel-heading">
<div class="panel-title">Website</div>
</div>
<div class="panel-body">
<span><?php echo $website?></span>
</div>
<div class="panel-heading">
<div class="panel-title">Experience</div>
</div>
<div class="panel-body">
<span><?php echo $experience?></span>
</div>
<div class="panel-heading">
<div class="panel-title">City</div>
</div>
<div class="panel-body">
<span><?php echo $city?></span>
</div>
</div>
</div>
</div>
<!--Second grid-->
<div class="clearfix col-lg-7 col-md-5 col-xs-14" style="border:1px solid black; border-radius:5px;">
<div class="thumbnail" >
<?php echo '<img src="../' . $imageCover . '" height="180" width="350"/>';?>
</div>
<p class="updateCoverPic">
Update cover picture
<br/>
<img src="../webImage/cameraIcon.png" height="20" width="20"/>
</p>
<div class="panel panel-default">
<div class="panel-heading active" style="color:white">
<div class="panel-title">Nearby Events</div>
</div>
<div class="panel-heading">
<div class="panel-title">
<div class="loadContent"></div>
</div>
</div>
</div>
</div>
</div>
You can set a margin to all grid-cols in a row
.class{ margin:0 20px; }
So the grid-cols are more in mid
I just solved it. I added margin-left to the second grid. However I am up for any other solutions that you guys might have.
A good way to add spacing between the grids is to just add another div inside your columns. This way, you dont have to set any margins on the grid itself. Here's an example:
<div class="container-fluid">
<div class="row">
<div class="col-md-4">
<div class="your-custom-div">
<p>Putting this custom div will allow you to have natural
spacing betweem the grid. </p>
</div>
</div>
</div>
</div>
Your columns obviously have to add to 12. I've only used 4/12 above. Feel free to message if you're confused.
Cheers,