I am using Bootstrap & want to get the logo on the left & title in the center. I have used the following code but not able to get the desired result.
Please Guide.
<div class="panel-heading"><a href="#">
<img src="Logo.png" width="10%" height="10%" alt="">
</a>
<h1 align="center">Title</h1></div>
<h1 class="text-center">
<a class="pull-left" href="#">
<img src="path/logo.png" width="10%" height="10%" alt="">
</a><span style="margin-left: -20%;">Title</span></h1>
try this code.. anything in heading tag would be in one line
Demo
Add container-fluid div along with pull-left for <a>
<div class="panel-heading">
<div class="container-fluid">
<a href="#" class="pull-left">
<img src="Logo.png" width="10%" height="10%" alt="">IMG
</a>
<h1 align="center">Title</h1></div>
</div>
<div class="panel-heading">
<div class="container-fluid">
<div class="pull-left" style="background-color:lavender;">
<img src="logo.png" width="50px" height="50px" alt="">
</div>
<h1 align="center">Title</h1></div>
</div>
Give pixel size according to your requirement of image.
Related
I have an html page that contains "links" to many sections of the page. I'm using a single page layout where if a link is clicked, you are not actually taken to a new page. Instead you are taken to the section of the page that you clicked on in the nav bar. I have a section for 6 images, each with a caption. I need the images to be in 2 rows with 3 images per row without using a table.(each image with its caption underneath) But I also need them to be responsive, so if the size of the browser is minimized then the images stack up on each other (caption still there). I tried using padding and margins but I wasn't able to get it to work so I don't have any CSS to post but I do have my HTML code. Can someone please help me out? Here is my code:
<div class="allimagesgallery">
<a href="images/image1.jpg">
<img id="galleryimages" src="images/image1.jpg">
</a>
<div class="caption">CAPTION.</div>
<a href="images/image2.jpeg">
<img id="galleryimages" src="images/image2.jpeg">
</a>
<div class="caption"> CAPTION </div>
<a href="images/image3.jpg">
<img id="galleryimages" src="images/image3.jpg">
</a>
<div class="caption"> CAPTION </div>
<a href="images/image4.jpg">
<img id="galleryimages" src="images/image4.jpg">
</a>
<div class="caption">CAPTION</div>
<a href="images/image5.jpeg">
<img id="galleryimages" src="images/image5.jpeg">
</a>
<div class="caption"> CAPTION </div>
<a href="images/image6.jpeg">
<img id="galleryimages" src="images/image6.jpeg">
</a>
<div class="caption"> CAPTION </div>
</div>
</div>
it would help us if we knew what your css in "allimagesgallery" looked like.
A little reformatting like the code below might help:
/*-----css---------*/
.imagesgalleryrow img{
display: inline-block;
}
<!-- /// HTML \\\ -->
<div class="allimagesgallery">
<div class="imagesgalleryrow">
<a href="images/image1.jpg">
<img id="galleryimages" src="images/image1.jpg">
</a>
<div class="caption"> CAPTION </div>
<a href="images/image2.jpeg">
<img id="galleryimages" src="images/image2.jpeg">
</a>
<div class="caption"> CAPTION </div>
<a href="images/image3.jpg">
<img id="galleryimages" src="images/image3.jpg">
</a>
<div class="caption"> CAPTION </div>
</div>
<div class="imagesgalleryrow">
<a href="images/image1.jpg">
<img id="galleryimages" src="images/image1.jpg">
</a>
<div class="caption"> CAPTION </div>
<a href="images/image2.jpeg">
<img id="galleryimages" src="images/image2.jpeg">
</a>
<div class="caption"> CAPTION </div>
<a href="images/image3.jpg">
<img id="galleryimages" src="images/image3.jpg">
</a>
<div class="caption"> CAPTION </div>
</div>
<div class="imagesgalleryrow">
<a href="images/image1.jpg">
<img id="galleryimages" src="images/image1.jpg">
</a>
<div class="caption"> CAPTION </div>
<a href="images/image2.jpeg">
<img id="galleryimages" src="images/image2.jpeg">
</a>
<div class="caption"> CAPTION </div>
<a href="images/image3.jpg">
<img id="galleryimages" src="images/image3.jpg">
</a>
<div class="caption"> CAPTION </div>
</div>
</div>
I want to use the media bottom bootstrap component but the text is top aligned despite adding the media-bottom class. Is this component broken or something. Any clean workaround?
Thanks
fiddle: https://jsfiddle.net/2yrrf6zx/2/
HTML code:
<div class="media">
<div class="media-left media-bottom">
<a href="#">
<img class="media-object pull-left" src="https://upload.wikimedia.org/wikipedia/commons/1/16/HDRI_Sample_Scene_Balls_%28JPEG-HDR%29.jpg">
</a>
</div>
<div class="media-body">
<p>Title</p>
<h4 class="media-heading">text</h4>
</div>
</div>
You are putting the media-bottom on the image and not on the text. If you use the following HTML, it should work as expected:
<div class="media">
<div class="media-left">
<a href="#">
<img class="media-object pull-left" src="https://upload.wikimedia.org/wikipedia/commons/1/16/HDRI_Sample_Scene_Balls_%28JPEG-HDR%29.jpg">
</a>
</div>
<div class="media-body media-bottom">
<p>Title</p>
<h4 class="media-heading">text</h4>
</div>
</div>
Fiddle
Instead of setting up one after another, by reducing the screen images stretch unnatural (and stay in 4 columns).
I paste a piece of code with only 2 pictures, because otherwise stackoverflow blocking publication of the post.
Thanks in advance
<div class="container">
<div class="row">
<div class="col-xs-3">
<div class="viewport">
<a href="#">
<span class="dark-background" style="display: none;">Northern Saw-whet Owl <em>Photo by Matt Bango</em></span>
<img src="images/portfolio/image1.jpg" alt="Northern Saw-Whet Owl" class="img-portfolio-item" />
</a>
</div>
</div>
<div class="col-xs-3">
<div class="viewport">
<a href="#">
<span class="dark-background" style="display: none;">Northern Saw-whet Owl <em>Photo by Matt Bango</em></span>
<img src="images/portfolio/image2.jpg" alt="Northern Saw-Whet Owl" class="img-portfolio-item" />
</a>
</div>
</div>
</div>
</div>
As per your comment, if you use
<img src="images/portfolio/image3.jpg" alt="Northern Saw-Whet Owl" class="img-portfolio-item" class="img-responsive" />
it will ignore the second image tag. Instead use:
<img src="images/portfolio/image3.jpg" alt="Northern Saw-Whet Owl" class="img-portfolio-item img-responsive" />
Also, you've made the column col-xs-3 which means that it will be 4 columns from 0px. To make the image 100% width up until the first (small) breakpoint, use col-sm-3instead.
So:
...
<div class="col-sm-3">
<div class="viewport">
<a href="#">
<span class="dark-background" style="display: none;">Northern Saw-whet Owl <em>Photo by Matt Bango</em></span>
<img src="images/portfolio/image1.jpg" alt="Northern Saw-Whet Owl" class="img-portfolio-item" />
</a>
</div>
</div>
...
Use class="img-responsive" on img tags. See doc for more info
I have created three images in a column and I set column-count: 3; plus border-width for those three images. Now I need to know about the hover state.
HTML:
<div class="wrap">
<h1 class="content-title"><span>Popular</span></h1>
<div class="col-3">
<div class="popular">
<a href="#">
<img src="http://s7.postimg.org/bq6aahcpn/Book_ll_4.jpg"/>
</a>
</div>
<div class="caption">
<a href="olymbic.html">
<h2>Saina nehwal first match</h2>
<p>fasdfjaksdksdfh skdfk</p>
</a>
</div>
<div class="popular">
<a href="#">
<img src="http://s7.postimg.org/bq6aahcpn/Book_ll_4.jpg"/>
</a>
</div>
<div class="caption">
<a href="#">
<h2>Saina nehwal first match</h2>
<p>fasdfjaksdksdfh skdfk</p>
</a>
</div>
<div class="popular">
<a href="#">
<img src="http://s7.postimg.org/bq6aahcpn/Book_ll_4.jpg"/>
</a>
</div>
<div class="caption">
<a href="#">
<h2>Saina nehwal first match</h2>
<p>fasdfjaksdksdfh skdfk</p>
</a>
</div>
</div>
</div>
When I hover an image, it needs to look like this:
.
And here is my jsfiddle: http://jsfiddle.net/6g7v899q/
May I know, how to do this?
Thanks in advance.
something like this then ?
img{margin:40px;border:25px solid white;}
img:hover{border-left:25px inset gray;border-right:25px outset gray;border-top:25px outset white;border-bottom:25px inset white;}
<img src="http://lorempixel.com/200/200" width="200" height="200" />
I am using Twitter bootstrap and I have a one page website with a top section and a bottom section. I would like to place different background images in each section; however, I cannot seem to get it to work- are there any suggestions?
Here is my HTML:
<section class="container-fluid">
<div class="row-fluid">
<div class="span4 offset4">
<br />
<img src="images/logo.png" width="400" height="400" image alt="image" />
</div>
</div>
<div class="row12">
<h3><p class="text-center"></p></h3>
<h4><p class="text-center"></p></h4>
<h4><p class="text-center"></p></h4>
<br />
<br />
</div>
<div class="row-fluid">
<ul class="thumbnails">
<li class="span1 offset4">
<a href="#" class="thumbnail">
<img src="images/MAIL_icon.png" width="50" height="50" image alt="image" />
</a>
</li>
<li class="span1">
<a href="#" class="thumbnail">
<img src="images/DRIBBBLE_icon.png" width="50" height="50" image alt="image" />
</a>
</li>
<li class="span1">
<a href="#" class="thumbnail">
<img src="images/TWITTER_icon.png" width="50" height="50" image alt="image" />
</a>
</li>
<li class="span1">
<a href="#" class="thumbnail">
<img src="images/INSTAGRAM_icon.png" width="50" height="50" image alt="image" />
</a>
</li>
</ul>
</div>
</section>
and my CSS:
#top_section {background-image: url(images/urban_lights.png);
}
Assign different background to your different section.
#topSection {
background-image: url("url/to/image.jpg");
}
#bottomSection {
background-image: url("url/to/image.jpg");
}
If your CSS and images are in separate folders found in the root directory try:
#top_section {background-image: url(../images/urban_lights.png);