I´m trying to make the image below to fit the whole div, meaning that the background image should take the whole space and I shouldn't see the green color. Unfortunately I can´t find a way to do it.
#imagecontainer {
background: url("http://3.bp.blogspot.com/_EqZzf-l7OCg/TNmdtcyGBZI/AAAAAAAAAD8/KD5Y23c24go/s1600/homer-simpson-1280x1024.jpg") no-repeat;
border: 1px solid;
background-size: cover;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container no-padding" id="maincontent" tabindex="-1">
<div id="imagecontainer" class="row">
<div class="col-lg-12">
<img class="img-responsive" src="img/profile.png" alt="">
<div class="intro-text">
<h1 class="name">Start Bootstrap</h1>
<h1 class="name">Start Bootstrap</h1>
<h1 class="name">Start Bootstrap</h1>
<hr class="star-light">
<span class="skills">Web Developer - Graphic Artist - User Experience Designer</span>
</div>
</div>
</div>
</div>
Many thanks!
Your using container, use container-fluid to make it full width. Here is a demo
The #maincontent div has a padding, a positive margin and a width set in pixels; and the #imagecontainer has a negative margin.
This is because that's the way Bootstrap deals to accomodate items in its grid.
You could considerate using a fluid Jumbotron instead to use the full width and take the necessary vertical space for your content.
This could be of help: https://v4-alpha.getbootstrap.com/components/jumbotron/
Related
I am trying to execute some simple container code to center an image, I cannot find it why my Container has a height of 0.
#test {
background-image: url('https://via.placeholder.com/150');
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center;
}
<div class="container">
<div class="row">
<div class="col">
<div id="test">
</div>
</div>
</div>
</div>
Why does the container have a height of 0, and hence my image not appearing?
By default, block elements get their heights from their content. Content meaning what goes between the opening and closing tag of the element in the HTML. A background image would not be content, but can be thought of more like decoration.
You can set the height manually with css to whatever you like. Keep in mind though that an empty element is unsemantic code.
Adding a height property could fix this as mentioned by you in comments.
Another alternative that would solve the problem with varying image sizes could be to use an img tag inside #test element.
<div id="test" style="background-image: url(/my-image.jpg);">
<img src="/my-image.jpg" style="visibility: hidden;" />
</div>
This way the div takes up the height based on the image size.
<div class="text-center d-flex" style="height: 100vh">
<div class="container m-auto">
<div class="row">
<div class="col-8 mx-auto">
<h1> YOU CAN DO IT </h1>
</div>
<div class="col-8 mx-auto">
<h1> I should be centered </h1>
</div>
</div>
</div>
</div>
Using margin:auto to vertically-align a div
As the second answer from the linked stackoverflow question over, it was because my parent was not of type flex.
I want my background image to be responsive so changed the size to 100% and auto but now the texts that I have inside my section is overflowing out of the image. This wouldn't happen if my image size was cover. How do prevent the text to overflow from the image.
.section1{
height: 600px;
background: url("img/Rectangle 1.jpg") no-repeat center;
background-size: cover;
}
html
<section class="section1">
<div class="container info">
<div class="row">
<div class="col-lg-12 " align="center">
Make Future Visible <span>™</span>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-lg-12 info2" align="center">
Real-time predictive analytics for refining equipment eliminate accidents<br>
and fires, increases refinery uptime, decreases downtime and drastically<br>
reduces maintenance costs.
</div>
</div>
</div>
</section>
If you set the background position css to top center it will make the rectangle image start from the top of <section> element.
If you want the image 100% width, centred, and responsive, then a rectangle image will not work on a mobile.
See demo here https://jsfiddle.net/joshmoto/tfesu0cx/1/
I'm having trouble with aligning a container-fluid within bootstrap. I've attached a screenshot of what I'm trying to achieve. The list items on the bottom left should align with the text at the top (which is contained in a container). The newsletter section on the bottom right (red background) should span the entire width from the center to the edge of the screen. The content within the newsletter section should also be aligned with the text at the top.
Here's what I currently have for the code at the bottom:
<div class="container-fluid">
<div class="col-md-12">
<div id="footer" class="col-md-6">
<ul>
<li>About Us</li>
<li>Consumers</li>
<li>Sites</li>
<li>Operators</li>
<li>Contact Us</li>
</ul>
</div>
<div id="newsletter" class="col-md-6">
<h4>Subscribe to our newsletter to receive the latest news about Poqeta </h4>
</div>
</div>
Thanks for any suggestions!
bootstrap-grid
You can wrap your footer in a div that you give a background that is half of the screen width, either using CSS gradients (if your only concern is modern browsers) or with absolutely positioning elements or images. See this answer for more information. Then within this "footer wrapper" you place a container, and within this container you define your columns. For each column you set the background color again. This will "overlay" the background color of the footer within the container.
<div class="footer">
<div class="container">
<div class="col-sm-8 left">
left section, list items
</div>
<div class="col-sm-4 newsletter">
newsletter section
</div>
</div>
</div>
.footer {
background: linear-gradient(90deg, #ffffff 50%, #ff0000 50%);
}
.left {
background: #ffffff;
}
.newsletter {
background: #ff0000;
}
See this fiddle for an example, you may want write some CSS for mobile (depending on what breakpoint you use for column wrapping, -sm, -md or -lg)
Change
<div class="container-fluid">
to
<div class="container">
To make background full page, try this:
<div class="container-fluid">
<div class="container">
...
</div>
</div>
You can make "padding: 0" on "container-fluid" or "container" to make it straight
I am building a WordPress site and using Bootstrap. I am trying to add padding to my sections but it is not working. In the inspector, it has the yellow triangle exclamation beside it and I cannot figure out why. Here is my CSS:
#stats {
padding: 36px auto !important;
}
And my HTML:
<section id="stats">
<div class="container">
<div class="row">
<div class="col-sm-8">
<h4>This is an infographic</h4>
</div>
<div class="col-sm-4">
<p>This is some supporting text</p>
</div>
</div>
</div>
</section>
Is there something in Bootstrap that is keeping this from happening? Here is a screen shot of the inspector:
auto is not a valid value for the padding property. If you want to use auto, use margin, or stick to px values for padding.
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