I am attempting to build a site that - my initial thought- requires 2 overlapping jumbotron - using bootstrap 3.
1 jumbotron - stretching 100% of the width - traditional grey colouring.
1 overlapping - additional jumbotron that is reduced to the 'container' size - but this will have an image background.
1st attempt - with overlapping jumbotron - this allowed responsive imaging however the sizing of the full width jumbotron then did not match the size of the overlapping image.
<div class = "jumbotron">
<div class ="jumbotron container>//image
<p>Sample text</p>
</div>
</div>
2nd way - with 1 jumbotron - however this then prevents my image being responsive:
<div class="jumbotron">
<div class="row">
<div class="col-md-8">
<div class="jumbpic">
<img src="style/images/car2.png"></div></div>
<div class="col-md-4">
<p>Sample text</p>
Is there a simple alternative to allow the full width jumbotron but allow a central image that can be responsive to screen size too?
I'm probably not completely understanding your question, but what about wrapping the jumbotron in a .well?
This gives you a responsive image inside the jumbotron, and gives you the gray enclosing background you're looking for. Just add the .img-responsive class to your image to make it responsive, and make sure it's a big enough image to fill the screen. I added the .center-block class to center the image.
Edited to remove jumbotron padding per OP in comments
<style>
.jumbotron {
padding-top: 0;
}
</style>
<div class="well">
<div class="jumbotron">
<img src="http://placehold.it/1920x800" class="img-responsive center-block">
<p>Sample text</p>
</div>
</div>
Fiddle...
Edit: This will give you a jumbotron with a background image. Again, make sure you're using a large image...
<style>
.jumbotron {
background: url('http://p1.pichost.me/i/59/1828782.jpg');
color: white;
}
</style>
<div class="well">
<div class="jumbotron">
<div class="container">
<h1>Hello, world!</h1>
<p>Sample text</p>
<p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a></p>
</div>
</div>
</div>
Fiddle...
You don't need two jumbotrons if I got you correctly. You just need to specify your image to be responsive.
<div class = "jumbotron">
<div class ="container>
<img src="your-image-source" class="img-responsive">
</div>
</div>
Read about responsive images here: http://getbootstrap.com/css/#images
Related
I am kind of new in web design and I am having issues to properly resize images with the class img-fluid in a certain view where they act as some kind of thumbnails inside a portfolio-item. I am going to upload a couple of images to explain what I am trying to achieve. The first image is what I am trying to do, around 3-4 items per row with the same size , the problem is that when I show one image that is vertically bigger than horizontally it also gets bigger resolution than the other images , messing my row entirely and adding some empty spaces
This second image ilustrates the problem, 2 is the image that is bigger in height and it messes the other elements depending on the position that image gets placed.
Here is the HTML code :
<div class="container-fluid">
<div class="row">
<div class="col-lg-4 col-sm-6 mb-2">
<!-- Portfolio item -->
<div class="portfolio-item">
<a class="portfolio-link" href="someurl">
<div class="portfolio-hover">
<div class="portfolio-hover-content"><i class="fas fa-plus fa-3x"></i></div>
</div>
<img class="img-fluid" src="sourceofimage" alt="default" height=auto/>
</a>
<div class="portfolio-caption">
<div class="portfolio-caption-heading">some text</div>
<div class="portfolio-caption-subheading text-muted">some text</div>
</div>
</div>
</div>
</div>
</div>
And CSS of img-fluid
.img-fluid {
max-width: 100%;
height: auto;
}
Can anyone help me with this ?
Use both height and width. Set the width to how ever many pixels or any other increment you would like, and the same for the height.
The code: https://codepen.io/flvffywvffy/pen/OJjoeKP (ignore the javascript)
How can I ajdust container to make it full width?
This is the space that's container taking right now, but I want it to have full width (like website).
I have created it like this
<div class="container-fluid container-va">
<div class="row row-dk">
<div class="col-md-12">
<p>SOME TEXT</p>
</div>
</div>
</div>
I have tried adjusting css like:
.container-va {
width: 100%;
}
but it doesn't work... Help please!
I'm just dabbling into CSS and HTML. At the moment I have an a <article> inside that column should have two items, a picture on the left, and article information on the right(header, and paragraph). It appears okay when the screen is enlarge but if the screen shrinks the image and the text shrinks. Instead of shrinking I'm looking for the image to retain it's size and the text to drop below the image.
http://codepen.io/anon/pen/Yygdjv
<div class="container-fluid">
<div class="row">
<aside class="col-sm-1">
</aside>
<section class="col-sm-7">
<article>
<div class="row">
<aside class="col-xs-6">
<img src="http://i0.wp.com/www.sooziq.com/wp-content/uploads/2015/11/32.jpg?resize=270%2C200"/>
</aside>
<aside class="col-xs-6">
<div id="DIV___5">
<span id="SPAN___6"> Basketball</span>
<h2 id="H2___8">
What really Matters
</h2>
<span id="SPAN___10">November 12, 2015</span>
<p id="P___11">
Make sure you load up on the fluids and snacks and use the washroom because these are the top 3 things to watch for in basketball! Read More
</p>
</div>
</aside>
</div>
</article>
</section>
</div>
</div>
This is a twitter bootstrap 3 question. You can achieve this be changing your col-xs-6 to col-sm-6 or col-md-6 for both columns. After the sm or md breakpoint (whichever you go with), it will make the two columns full width and the image will naturally be on top. You can be more explicit with class="col-xs-12 col-sm-6" for both columns, but it's not really necessary.
Fork of your demo: http://codepen.io/anon/pen/GpezRL
You Can Also Use #media rule(optional) like-
#media (max-width:580px)
{
.col-xs-6 {
width: 50%;
clear: both;
}
}
I'm using the twitter bootstrap grid system for a responsive website. Most of my markup works just fine, but I've one nasty problem, which makes me mad. I've prepared a JSFiddle to let you see what happens: http://jsfiddle.net/gqb5hbza/
Here is my markup
<section>
<div class="content">
<div class="row">
<div class="col-xs-6 col-sm-4">
<div class="item">
<a href="#">
<img class="adaptive-img" src="http://placehold.it/400x330" />
</a>
<div class="item-content">
<h4 class="h4 black">Title Title Title Title Title Title Title Title Title Title Title Title </h4>
</div>
</div>
</div>
..........
</div>
</div>
</section>
I've multiple div boxes which contains an image and a headline. These boxes are rearranged when changing the browser window. But if one of these boxes has a different height (i.e. too long headline which needs two lines), the system breaks and doesn't rearrange correctly - as you can see in the fiddle. The fourth box should be under the first box and not beneath.
Hope that somebody can help me with this problem.
As mentioned, if you want to keep your layout as-is (e.g. not explicitly defining each row), the best solution is to keep each col div the same height. You could use Bootstrap's thumbnail/caption classes to make things look a little more tidy, and then adjust the min-height values for the caption using media queries to keep the extra white space to a minimum.
<section>
<div class="content">
<div class="row">
<div class="col-xs-6 col-sm-4">
<div class="thumbnail">
<a href="#">
<img class="adaptive-img" src="http://placehold.it/400x330" />
</a>
<div class="caption">
<h4 class="h4 black">Title Title Title Title Title Title Title Title Title Title Title Title </h4>
</div>
</div>
</div>
...
</div>
</div>
</section>
Then add something similar to this css:
.caption { min-height: 275px;}
#media(min-width: 400px) {
.caption { min-height: 100px;}
}
Here's an updated fiddle with this code. Hope this helps you out.
I have a problem with Bootstrap css. I have a panels with header, body and footer. The body contains an image. Each of the images have been resized to the same 700px width and 450px height. Yet the panels end up different sizes with the footer not being aligned to each other.
How can this be fixed?
.cshtm code:
<div class="col-md-4 col-sm-6">
<div class="panel">
<div class="panel-heading">
Visual Similarity Duplicate Image Finder
</div>
<div class="panel-body">
<a href="portfolio-item.html">
<img class="img-responsive img-blog img-hover" src="#ViewBag.AccreditationImage2" alt="">
</a>
</div>
<div class="panel-footer">
<p>Accreditation test Progress: 10%</p>
<p>Version: 5.5.0.1</p>
<p>Vendor: MindGems, Inc.</p>
</div>
</div>
</div>
and the ubiquitous image:
UPDATE
It turns out the natural height of the images are indeed different even though they were all resized the same. Anyway, how can I force the images in the panel to all be the same size?
Can't tell what is happening in your case specifically without seeing the css but you should just be able to set the height attribute on the image or container:
<style>
.panel-body {
height : 450px
}
</style>
or:
<style>
.panel-body img {
height : 450px
}
</style>