I have a <p> that I need to wrap around a responsive embedded video on my site.
Before I knew my client wanted to have a large amount of <p> content, I simply made two columns.
<div class="container">
<div class="row">
<div class="col-md-6 ">
<div class="embed-responsive embed-responsive-16by9">
<iframe src="//www.youtube.com/embed/<?= $this->page->getPageYouTubeId() ?>" frameborder="0" allowfullscreen></iframe>
</div>
</div>
<div class="col-md-6 ">
<h1 class="big-title"><?= $this->page->getPageHeadline() ?></h1>
<div class="blog-title">
<p><?= $this->page->getPageContent() ?></p>
</div>
<a class="btn btn-default scrollto" href="#content"><i class="fa fa-arrow-down"></i> Check Out The Properties!</a>
</div>
</div>
I know a need to use a float: left in someway, but I have tried various things and none of them are working ie...
<div class="row">
<div class="col-md-12 ">
<div class="pull-left">
<div class="embed-responsive embed-responsive-16by9">
<iframe src="//www.youtube.com/embed/<?= $this->page->getPageYouTubeId() ?>" frameborder="0" allowfullscreen></iframe>
</div>
</div>
<h1 class="big-title"><?= $this->page->getPageHeadline() ?></h1>
<div class="blog-title">
<p><?= $this->page->getPageContent() ?></p>
</div>
<a class="btn btn-default scrollto" href="#content"><i class="fa fa-arrow-down"></i> Check Out The Properties!</a>
</div>
</div>
</div>
I am a backend dev so this stuff isn't my strong suit.
http://webwarephpdevelopment.com:8080/fl/West-Palm-Beach
Related
I use Polo - Responsive Multi-Purpose HTML5 Template.
I can't center my object
I did try many solutions, and nothing work for me still on left side.
See screenshot
<!--Single image lightbox -->
<div class="hr-title hr-long center"><abbr>Single image lightbox</abbr> </div>
<div class="row col-no-margin">
<div class="col-md-4">
<div class="grid-item">
<div class="grid-item-wrap">
<div class="grid-image"> <img alt="Image Lightbox" src="https://via.placeholder.com/300x200" /> </div>
<div class="grid-description">
<a title="Paper Pouch!" data-lightbox="image" href="https://via.placeholder.com/300x200" class="btn btn-light btn-rounded">Zoom</a>
</div>
</div>
</div>
</div>
<!--Single image lightbox -->
<hr class="space">
</div>
Add below CSS to center align the image
img {
margin-left: 50%;
transform: translateX(-50%);
}
<!--Single image lightbox -->
<div class="hr-title hr-long center"><abbr>Single image lightbox</abbr> </div>
<div class="row col-no-margin">
<div class="col-md-4">
<div class="grid-item">
<div class="grid-item-wrap">
<div class="grid-image"> <img alt="Image Lightbox" src="https://via.placeholder.com/600x400" /> </div>
<div class="grid-description">
<a title="Paper Pouch!" data-lightbox="image" href="images/mockup/1.jpg" class="btn btn-light btn-rounded">Zoom</a>
</div>
</div>
</div>
</div>
</div>
<!--Single image lightbox -->
<hr class="space">
This is not the only solution, this is a suggestion :)
You can just use class offset-md-4 combined with text-center and it should work.
Also think about mobile. I have added offset-2 and col-8 to make sure it looks good on small screen too.
img {
max-width: 100%;
margin: auto;
display: block;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="hr-title hr-long center">
<abbr>Single image lightbox</abbr>
</div>
<div class="container">
<div class="row col-no-margin">
<div class="offset-2 col-8 offset-md-4 col-md-4 text-center">
<div class="grid-item">
<div class="grid-item-wrap">
<div class="grid-image"> <img alt="Image Lightbox" src="https://via.placeholder.com/300x200" /></div>
<div class="grid-description">
<a title="Paper Pouch!" data-lightbox="image" href="https://via.placeholder.com/300x200" class="btn btn-light btn-rounded">Zoom</a>
</div>
</div>
</div>
</div>
</div>
</div>
<!--Single image lightbox -->
<hr class="space">
Instead of
<div class="col-md-4">
Do the following:
<div class="col-md-12 text-center">
.text-center is the bootstrap class which will center the image with respect to the column
.col-md-12 will imply there is only 1 column in the entire row
here is my html code, what i want do when cursor on iframe when i click it plays video and when i scroll parent page scroll
<section class="section section-padding">
<div class="container">
<div class="row">
<div class="col-lg-12">
<div class="section-title text-center">
<h2>How We Work</h2>
</div>
</div>
<div class="col-lg-6">
<div class="">
<iframe width=560 height=315 src="https://www.youtube.com/embed/wYHA_qStcqE?rel=0&controls=0&showinfo=0" frameborder=0 allowfullscreen></iframe>
</div>
</div>
<div class="col-lg-5">
<div class="content">
<iframe width=560 height=315 src="https://www.youtube.com/embed/sy41imOrHbg?rel=0&controls=0&showinfo=0" frameborder=0 allowfullscreen></iframe>
</div>
</div>
</div>
</div>
</section>
You can add this attribute "scrolling".
<section class="section section-padding">
<div class="container">
<div class="row">
<div class="col-lg-12">
<div class="section-title text-center">
<h2>How We Work</h2>
</div>
</div>
<div class="col-lg-6">
<div class="">
<iframe scrolling="yes" width=560 height=315 src="https://www.youtube.com/embed/wYHA_qStcqE?rel=0&controls=0&showinfo=0" frameborder=0 allowfullscreen></iframe>
</div>
</div>
<div class="col-lg-5">
<div class="content">
<iframe scrolling="yes" width=560 height=315 src="https://www.youtube.com/embed/sy41imOrHbg?rel=0&controls=0&showinfo=0" frameborder=0 allowfullscreen></iframe>
</div>
</div>
</div>
</div>
</section>
I am designing the asp.net bootstrap form. I have one div in it.
Code:
<div id="gallery">
<a href="aboutus.aspx">
<img src="images/layout/exportsatdubai.jpg" class="img-responsive" width="900" title="" alt="" rel="a" />
</a>
<a href="http://expogr.com/" target="_blank">
<img src="images/layout/777x282-africa-1.jpg" class="img-responsive" width="900" title="" alt="" rel="a" />
</a>
<a href="addlisting.aspx">
<img src="images/layout/becomeAMember.jpg" class="img-responsive" width="900" title="" alt="" rel="a" />
</a><a href="dubaiexhibitions.aspx">
<img src="images/layout/dubaiexportersexhibitions.jpg" class="img-responsive" width="1000" title="" alt=""
rel="a" />
</a>
</div>
Css:
#gallery
{
position: relative;
height: 282px;
}
I wanted to make this div responsive using Bootstrap grid system. I am confused with div ie. How to apply grid system on div?
<div class="row">
<div class="col-sm-12">
<div class="gallery">
------contents------
</div>
</div>
</div>
Is it like this? I am new to Bootstrap. I just wanted to know how to apply grid system to div.
You can use the bootstrap grid like this.
<div class="container">
<div class="row">
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">
<a href="aboutus.aspx">
<img src="images/layout/exportsatdubai.jpg" class="img-responsive" alt="" rel="a" />
</a>
</div>
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">
<a href="http://expogr.com/" target="_blank">
<img src="images/layout/777x282-africa-1.jpg" class="img-responsive" alt="" rel="a" />
</a>
</div>
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">
<a href="addlisting.aspx">
<img src="images/layout/becomeAMember.jpg" class="img-responsive" alt="" rel="a" />
</a>
</div>
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">
<a href="dubaiexhibitions.aspx">
<img src="images/layout/dubaiexportersexhibitions.jpg" class="img-responsive" alt="" rel="a" />
</a>
</div>
</div>
</div>
You can follow this link for further details. Bootstrap Grid
A general way to use grid system is
<div class="container">
<div class="row">
<div class="col-sm-3">Content1</div>
<div class="col-sm-3">Content2</div>
<div class="col-sm-3">Content3</div>
<div class="col-sm-3">Content4</div>
</div>
</div>
Every column will have equal width and it will act responsive. You don't need to set height or width of divs inside these columns unless you intentionally want it. If you can provide more details what exactly do you want , i can try to help more.
you can use the grid system of 12 spans and as many rows as you want as you have different spanning of images for different rows like this:
<div class="container">
<div class="row">
<div class="col-xs-12 col-md-12"></div>
<a href="aboutus.aspx">
<img src="images/layout/exportsatdubai.jpg" class="img-responsive" alt=""/>
</a>
</div>
<div class="row">
<div class="col-xs-6 col-md-6">...</div>
<div class="col-xs-6 col-md-6">...</div>
</div>
<div class="row">
<div class="col-xs-6 col-md-6">...</div>
<div class="col-xs-6 col-md-6">.....</div>
</div>
.....
.....
and so on
</div>
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
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,