I have an image section in my HTML like below
<div class="container-fluid">
<div class="row">
<div class="col-md-12">
<img src="<?php echo base_url();?>assets/images/DJ_parties_web_banner.jpg" style="margin-top:-45px;">
</div>
</div>
</div>
The image is not covering the entire section. There is some white space around it. How can I get rid of it?
how do i completely cover the image from left to right?
You are using bootstrap and .row class has 15px padding, that's why there is white space around your image. Add .no-padding class to <div class="row"> DOM element and in your CSS set the following rule to overwrite Bootstrap rules:
.row.no-padding {
padding: 0;
}
<div class="container-fluid">
<div class="row no-padding">
<div class="col-md-12">
<img src="<?php echo base_url();?>assets/images/DJ_parties_web_banner.jpg" style="margin-top:-45px;">
</div>
</div>
</div>
Please use this code, I hope it's working for you.
Thanks
<div class="container-fluid" style="padding:0px;">
<div class="row">
<div class="col-md-12">
<img src="<?php echo base_url();?>assets/images/DJ_parties_web_banner.jpg" style="margin-top:-45px;" width="100%">
</div>
</div>
</div>
Related
I'm having one section of a site which I wondered how can I replicate it using bootstrap, I tried couple of ways but I couldn't get the same result.
I cannot figure out which one will be a row and which one will be a column.
Here is a picture of the section:
Thank you in advance!
I am using bootstrap 3.4.1 if that matters.
Pretty straightforward, you just need to do some nesting of the rows for the bottom. Here is a working solution.
.block {
background-color: red;
border: 5px solid white;
min-height: 50px;
color: white;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-sm-6 block">
content
</div>
<div class="col-sm-6 block">
content
</div>
</div>
<div class="row">
<div class="col-sm-9">
<div class="row">
<div class="col-sm-12 block">
content
</div>
<div class="col-sm-6 block">
content
</div>
<div class="col-sm-6 block">
content
</div>
</div>
</div>
<div class="col-sm-3 block">
content
</div>
</div>
</div>
I am making the footer in bootstrap which have links like Features, About, FQS, Contact us and logo-image(Hide for copyrights).
For large screens, the position of elements like links and logo-image are fine.
But for medium screens "links" started to display vertically, rather than displaying horizontally and logo-image moves downwards the link, as you can observe in picture provided.
Here i want 2 changes.
1)The links must display horizontally even at medium or small screen.
2) As soon as it reaches to the break-point, the elements should swap the position.(The logo-image should display at link's location and vice versa).
Code:
<div class="container-fluid">
<div class="container">
<div class="row">
<div class="form-group">
<div class="col-md-12">
<h5 align="center" class="copyRightFooterH">BF2F</h5>
</div>
</div>
<div class="form-group">
<div class="col-md-12">
<div class="col-md-2">
<h3 id="FH"><a class="Features">Features</a></h3>
</br>
About
</div>
<div class="col-md-2">
<h3 id="FH"><a class="FQS">FQS</a></h3>
</br>
Contact us
</div>
<div class="col-md-8" align="right">
<img src="images/Logo Name2.png" class="" width="350" height="125" alt=""/>
</div>
</div>
</div>
<div class="form-group">
<div class="col-md-12">
<h5 align="center" class="copyRightFooterH">Copy-Right © 2015-2017;</h5>
</div>
</div>
</div><!--End Row-->
</div><!--End container-->
</div><!--End container-fluid-->
I would modify the css outside of bootstrap by giving the logo a specific class. Bootstrap is great framework, adding the custom CSS will let you leverage that framework and still add the manipulations you need. Hope that this helps.
Here is the working codepen.
http://codepen.io/anon/pen/oxJzQd?editors=1100
HTML Changes
<div class="col-md-8 logo">
<img src="images/Logo Name2.png" class="" width="350" height="125" alt=""/>
</div>
CSS
.logo {
text-align:center;
}
/*optional stuffs */
.logo img{ width:100%; height:auto;}
#media only screen and (min-width : 768px) {
.logo { text-align:right;}
/*optional stuffs */
.logo img {width:initial; height:initial;}
}
This is because you are saying at MEDIUM screen size have this column layout:
<div class="col-md-12">
<div class="col-md-2">
<h3 id="FH"><a class="Features">Features</a></h3>
</br>
About
</div>
<div class="col-md-2">
<h3 id="FH"><a class="FQS">FQS</a></h3>
</br>
Contact us
</div>
<div class="col-md-8" align="right">
<img src="images/Logo Name2.png" class="" width="350" height="125" alt=""/>
</div>
</div>
col-md-*
Only effect medium screen sizes and above. If you want to target every device you would use col-xs-*
Like so...
<div class="col-xs-12">
<div class="col-xs-2">
<h3 id="FH"><a class="Features">Features</a></h3>
</br>
About
</div>
<div class="col-xs-2">
<h3 id="FH"><a class="FQS">FQS</a></h3>
</br>
Contact us
</div>
<div class="col-xs-8 col-md-8" align="right">
<img src="images/Logo Name2.png" class="" width="350" height="125" alt=""/>
</div>
</div>
I believe this is the issue you are talking about. But it does not help since you provide no JSFiddle link for people to help you easily. I would recommend you attach JSFiddle link in future reference.
Try to remove div with form-group class as you have your col stacked.
Try this:
<div class="container">
<div class="row">
<h5 align="center" class="copyRightFooterH">BF2F</h5>
</div>
<div class="row">
<div class="col-xs-2">
<h3 id="FH"><a class="Features">Features</a></h3>
<br/>
About
</div>
<div class="col-xs-2">
<h3 id="FH"><a class="FQS">FQS</a></h3>
<br/>
Contact us
</div>
<div class="col-xs-8">
<img src="images/Logo Name2.png" class="" width="350" height="125" alt=""/>
</div>
</div>
<div class="row">
<h5 align="center" class="copyRightFooterH">Copy-Right © 2015-2017;</h5>
</div>
</div><!--End container-fluid-->
Regards.
Using LG WebOS Emulator, i try to view my webpage. But it seems Bootstrap cannot handle very large screen (as seen in screenshot, there're 2 white screen region in left and right side). The Resolution of Emulator is 1920x907
Screen Shot :
The HTML :
<div style="background-color:green" class="container">
<div class="row">
<div class="col-lg-1">1</div>
<div class="col-lg-1">2</div>
<div class="col-lg-1">3</div>
<div class="col-lg-1">4</div>
<div class="col-lg-1">5</div>
<div class="col-lg-1">6</div>
<div class="col-lg-1">7</div>
<div class="col-lg-1">8</div>
<div class="col-lg-1">9</div>
<div class="col-lg-1">10</div>
<div class="col-lg-1">11</div>
<div class="col-lg-1">12</div>
</div>
<div class="row"> <div align="center"><b>test</b></div> </div>
<div class="row"> <div align="center"><b>test</b></div> </div>
<div class="row"> <div align="center"><b>test</b></div> </div>
<div class="row"> <div align="center"><b>test</b></div> </div>
<div class="row"> <div align="center"><b>test</b></div> </div>
<div class="row"> <div align="center"><b>test</b></div> </div>
<div class="row"> <div align="center"><b>test</b></div> </div>
<div class="row"> <div align="center"><b>test</b></div> </div>
<div class="row"> <div align="center"><b>test</b></div> </div>
<div class="row"> <div align="center"><b>test</b></div> </div>
<div class="row"> <div align="center"><b>test</b></div> </div>
<div class="row">
<div class="col-lg-12"><div id="dimensions" align="center"></div></div>
</div>
</div>
is this Boostrap's GRID limitation ? if no, how to fix this ?
Thanks before...
Rather than using
<div ... class="container">
try
<div ... class="container-fluid">
I'm not sure which version of Bootstrap you're running with, but in 3.1 (I believe) you have accessibility to this class. As a more custom alternative you can create your own css class, like so,
.container-full {
margin: 0 auto;
width: 100%;
}
which would give you the same result.
Change your .container to .container-fluid
In bootstrap.css, there is a limit set for maximum width
#media (min-width: 1200px) {
.container {
width: 1170px;
}
}
Bootstrap for large display defaults to 1170px:
http://getbootstrap.com/css/#grid-options
However, you can make a customized build here to define your own default behavior:
http://getbootstrap.com/customize/#container-sizes
Bootstrap properties for large screens are limited to 1170 px and therefore you need to either manipulate the code yourself or either download Bootstrap XL grid classes in a CSS file here;
Bootstrap XL
Hi Apparently my toggle function does not work. I need to Hide a div "photography" when clicking the word "photography" that is located in another div. Please see my code below
HTML:
<div class="bar">
<div="container">
<div class="row">
<div class="col-lg-10 col-lg-offset-1 text-center">
Photography
Graphics
</div>
</div>
</div>
</div>
<section id="photograhpy" class="photograhpy">
<div class="container">
<div class="row">
<div class="col-lg-10 col-lg-offset-1 text-center">
<hr class="small">
<div class="row">
<div class="col-md-6">
<div class="photograhpy-item">
<a href="#">
<img class="img-photograhpy img-responsive" src="imgs/pics/car1.jpg">
</a>
</div>
</div>
JS:
$(document).ready(function(){
$("#hideshow").click(function(){
$("#photography").toggle(1000);
});
});
Looks like a spelling error:
<section id="photograhpy" class="photograhpy">
Should be:
<section id="photography" class="photography">
There is nothing else outstandingly wrong with your code.
Also, you may not reference elements with the same id exclusively via JavaScript. It is poor practice to give multiple elements the same id.
I created a grid with col-md-7 on the left and col-md-5 on the right.
And I put images to the col-md-5, which are responsive and in col-md-12 width - full width
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="row">
<div class="col-md-7">LEFT SIDE</div>
<div class="col-md-5">
<div class="row">
<div class="col-md-12">
<img class="img-responsive" src="http://patdollard.com/wp-content/uploads/2014/07/ap_holder_121003_wg.jpg" alt="" />
</div>
<div class="col-md-12">
<img class="img-responsive" src="http://patdollard.com/wp-content/uploads/2014/07/ap_holder_121003_wg.jpg" alt="" />
</div>
<div class="col-md-12">
<img class="img-responsive" src="http://patdollard.com/wp-content/uploads/2014/07/ap_holder_121003_wg.jpg" alt="" />
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Demo : http://jsfiddle.net/r8rFc/298/
It works great without any problems.
However, I use a menu called Zozo UI tabs.
When I put my code into Zozo UI container div, the images overlap rather than staying on top of each other.
Thus, it just show the last IMG
I would add the whole code to here but unfortunately it has a lot of dependencies.
Please check from here.
xxx
<!-- Overview -->
<div class="z-content z-active" style="position: relative; display: block; left: 0px; top: 0px;">
<div class="z-content-inner">
<div class="row">
<div class="col-md-7">
<div class="row">
<div class="col-md-12">
LEFT
</div>
</div>
</div>
<div class="col-md-5">
<div class="row">
<div class="col-md-12">
<img class="img-responsive" src="http://patdollard.com/wp-content/uploads/2014/07/ap_holder_121003_wg.jpg" alt=""/>
</div>
<div class="col-md-12">
<img class="img-responsive" src="http://patdollard.com/wp-content/uploads/2014/07/ap_holder_121003_wg.jpg" alt=""/>
</div>
<div class="col-md-12">
<img class="img-responsive" src="http://patdollard.com/wp-content/uploads/2014/07/ap_holder_121003_wg.jpg" alt=""/>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Need a way to get that images on the top of each other rather than overlapping.
You have
.productgroup img {
position: absolute;
}
it seems to be the reason of your problem.