Hi i was trying to create a website with the help of bootstrap 3.3
However I am stuck up with an issue that the image I am using is not responsive ie after a certain period it breaks.
This is the HTML code snippet:-
<div class="img-responsive" id="intro"> <!-- This is the container to display image-->
<div class="row">
<div class="col-sm-6 col-md-6 col-md-offset-3 ">
<div class="box" style="margin-top:62px;">
<h1>Welcome to my world</h1>
<p>Welcome to web development program</p>
<button type="button" class="btn btn-default" id="continue">Continue</button>
</div>
</div>
</div>
The below is my css code snippet:-
#intro{
background: url('images/prog.jpg') fixed;
background-size: cover;
height:650px;
/*position: fixed;*/
}
#continue{
margin-left: 218px;
margin-top: 27px;
color: blue;
}
Please help me with this.I am not sure why the class img-responsive is not working.
img-responsive class for img tag only not for div.
as this is background image, it will not resize but yes, you can use different size image on specific break point
Thanks
Related
I am making a small eastern project. The website is here: My Website.
I need to make some boxes that contain a png picture on top of the background-picture like this:
I set the picture on the col, but I guess I need to make it as a background in CSS, since I cannot build something on top of an img tag:
<div class="container-fluid">
<div class="row">
<div class="col-md-12">
<center><img src="https://mimsi.dk/images/logo.jpg" class="img-fluid" alt="Eastern"></center>
</div>
</div>
<div class="row">
<div class="col-md-12">
<img src="https://mimsi.dk/images/eeg.jpg" alt="Eastern game" class="background">
</div>
</div class="row">
<div class="col-md-12" style="border: 1px solid red;">
<h1 style="text-align: center;">FOOTER</h1>
</div>
</div>
</div>
Instead of using the img src tag, I set this in my HTML and CSS:
<div class="col-md-12 bg">
.bg {
background-image: url("https://mimsi.dk/images/eeg.jpg");
height: 100%;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
But nothing has worked out yet. How can I set the background-image, so it is not going to the header logo or footer, so I can build my 8 boxes on top?
First there is a mistake in your HTML in this line </div class="row"> i think you got that you can't put class in closing div
Solution
I created a fiddle
I have a problem with button text. when I resize, its text remains no more in center on some screen sizes as in these images.
In iPad, it is good
In iPhone, it is ugly, not centered position
Html
<div class="row">
<div class="col-lg-12 col-md-12 col-sm-12">
<div #fade class="img-wrapper">
<img [src]="imgPath" class="img-fluid">
<div class="img-overlay">
<button routerLink="/test"
class="btn btn-success fill-container testButton">
TEST
</button>
</div>
</div>
</div>
</div>
CSS
.img-wrapper {
position: relative;
}
.img-overlay {
position: absolute;
bottom: 31%;
left: 13.5%;
width: 34%;
height: 4%;
background-color: red;
}
.testButton {
font-size: 3vw;
line-height: 20px;
}
.fill-container {
width: 100%;
height: 100%;
}
Please let me know what should I make right to do it right.
Regards
The solution is simple: If you don't try to prevent the native Bootstrap 4 classes from working by applying custom css that breaks them, then adding the text-center class is all you need.
Here's a code snippet that shows this class perfectly doing its job:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="container">
<div class="row">
<div class="col-lg-12 col-md-12 col-sm-12">
<div #fade class="img-wrapper">
<img [src]="imgPath" class="img-fluid">
<div class="img-overlay text-center">
<button routerLink="/test"
class="btn btn-success fill-container testButton">
TEST
</button>
</div>
</div>
</div>
</div>
</div>
However, if you start adding css hacks that break Bootstrap, then, of course, you'll need even more css hacks to fix the problems caused by the original css hacks.
In this case, I recommend going back to square one, removing all of your custom css and using native Bootstrap 4 classes to accomplish what you need because native Bootstrap 4 classes can do almost everything you'll ever need in terms of layout. No need for any css hacks.
Kind of difficult to explain so I will post a live link to my site where the code is hosted: link
Basically the issue is in the about section if the window is scaled smaller the section won't compensate for the jumbotron thats overflowing like it does for the other sections that don't make use of bootstrap divs. Hopefully that makes sense?
Here's the relevant code:
<section id="about" class="about-section" style="background-repeat:no-repeat; background-size:contain; background-position:center; background-color: #630000;">
<div class="col-xs-10 col-xs-offset-1 col-md-8 col-md-offset-2">
<br>
<div class="jumbotron" style="background-color: #4c0000; padding-top: 10px; padding-bottom: 10px;">
<div class="container text-center" style="color: white;">
<h1>A Little About Me</h1>
<p style="font-size: 16px;">wordsgohere</p>
<p><h3><b>TLDR:</b></h3></p>
<p style="font-size: 16px">wordsgohere</p>
<img src="imgs/ryanyup.png" class="img-responsive" style="align-content: left">
</div>
</div>
</div>
</section>
And CSS:
.about-section {
min-height: 100%;
text-align: center;
background: #000080;
}
The entire code is also available on my git: here
Thank you.
Add <div class="clearfix"></div> right before closing the section. The reason you need this is because the div inside the section floats and thus is not a real block.
your content is just overflowing. add overflow: auto; to your section.
<section id="about" class="about-section" style="background-repeat:no-repeat; background-size:contain; background-position:center; background-color: #630000;overflow: auto;">
I'm new to coding and figured best way to learn is to get a gig, which I did. I've got some basic (like very basic) HTML & CSS knowledge, but bootstraps layout seemed to fit for what I'm trying to accomplish. Please keep in mind this is my very first project ever(!) when it comes to coding.
So here's the design I'm trying to replicate:
montere.it
I'm interested just in the main page, the actual tiles below the main image to be exact. I can't seem to find the best solution to position 2 tiles with background image, side by side(no gaps), with some h1 text and a small <p> above the background image in the tile, positioned centrally. There will be two more tiles below the initial two.
I SPENT A WEEK looking for similar solutions, but I'm exhausted and confused over all information digested. Can some one just point me in the right direction as to which features to use?
It seems even if I get to position both images, there are always gaps (right or left), there's no way to position the text exactly above the image centrally so it stays in one place when the display is resized and I don't want to cry about the rest.
I have a feeling it's a dumb question to ask, since none of the info I've found provide an exact solution to this question, so probably must be really easy to do and I just can't seem to grasp it.
I do apologize for taking up your time, but I just have no one else to ask.
Cheers!
Please check this out:
<div class="row">
<div class="col-sm-6 col-xs 12 col-img" style="background-color: red">
<h1>Image 1</h1>
</div>
<div class="col-sm-6 col-xs 12 col-img" style="background-color: orange">
<h1>Image 2</h1>
</div>
<div class="col-sm-6 col-xs 12 col-img" style="background-color: green">
<h1>Image 3</h1>
</div>
<div class="col-sm-6 col-xs 12 col-img" style="background-color: yellow">
<h1>Image 4</h1>
</div>
</div>
And add this to your CSS file:
.col-img h1 {
margin-bottom: 0;
margin-top: 0;
text-align: center;
}
In case any one else runs into this problem, here's the fully working solution. I'm just not sure if it will disappear under gjfonte's link, so I want to be safe here:
Here's what was provided by #gjfonte:
<div class="row">
<div class="col-sm-6 col-xs 12 col-img">
<div class="bg-img img-1">
<div class="content">
<h1>Image 1</h1>
</div>
</div>
</div>
<div class="col-sm-6 col-xs 12 col-img">
<div class="bg-img img-2">
<div class="content">
<h1>Image 1</h1>
</div>
</div>
</div>
<div class="col-sm-6 col-xs 12 col-img">
<div class="bg-img img-3">
<div class="content">
<h1>Image 1</h1>
</div>
</div>
</div>
<div class="col-sm-6 col-xs 12 col-img">
<div class="bg-img img-4">
<div class="content">
<h1>Image 1</h1>
</div>
</div>
</div>
</div>
.content {
padding-top: 90px;
color: #fff
}
.content h1 {
margin-bottom: 0;
margin-top: 0;
text-align: center;
}
.col-img .bg-img {
text-align: center;
margin: 0 -15px;
background-position: center center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
height: 250px;
}
.bg-img.img-1 {
background-image: url("http://www.montere.it/assets/img/bg-qualitycycle-wrapper.jpg");
}
.bg-img.img-2 {
background-image: url("http://www.montere.it/assets/img/bg-qualitymap-wrapper.jpg");
}
.bg-img.img-3 {
background-image: url("http://www.montere.it/assets/img/bg-recipes-wrapper.jpg");
}
.bg-img.img-4 {
background-image: url("http://www.montere.it/assets/img/bg-journal-wrapper.jpg");
}
I'm building a website using Bootstrap and I'm now trying to make something like this:
===========================================================
| #################### |
| #################### Big Title |
| ##THIS IS AN IMAGE## |
| #################### |
| #################### Read more |
===========================================================
The problem is that I can't align the ReadMore button to the bottom. I tried using the tips in this SO answer, but to no avail. I created a fiddle of my code here and I'll paste my code below.
Does anybody know what I'm doing wrong here? All tips are welcome!
My HTML looks like this:
<div class="container">
<div class="row">
<div class="col-sm-8">
<a href="/thelink">
<article class="row property-ad">
<div class="col-sm-5">
<img class="img-responsive" src="image.png">
</div>
<div class="col-sm-7">
<div class="title">Big Title</div>
<button id="read-more" class="btn btn-default pull-right">Read more</button>
</div>
</article>
</a>
</div>
<div class="col-sm-4"><div class="row"></div></div>
</div>
</div>
and my css:
#media (min-width: 768px ) {
.row {
position: relative;
}
#read-more {
position: absolute;
bottom: 0;
right: 0;
}
}
Try this:
#import url('http://getbootstrap.com/dist/css/bootstrap.css');
#media (min-width: 768px) {
.row {
position: relative;
}
#read-more {
position: absolute;
bottom: 0;
right: 0;
}
.col-sm-7 {
position: absolute;
width: 100%;
height: 100%;
}
}
<div class="container">
<div class="row">
<div class="col-sm-12"> <a href="/thelink">
<article class="row property-ad">
<div class="col-sm-5">
<img src="//placehold.it/600x300" class="img-responsive"/>
</div>
<div class="col-sm-7">
<div class="title">Big Title</div>
<button id="read-more" class="btn btn-default pull-right">Read more</button>
</div>
</article>
</a>
</div>
</div>
</div>
Here's a fiddle
Is it what you were looking for?
Sometimes you have to work against bootstrap's floats to get what you're looking for, basically by not using them (pulls, etc). I've updated your fiddle, and I believe it's close to what you were asking. Another issue was your #media was throwing things off due to the size of the result window.
Updated Fiddle
#import url('http://getbootstrap.com/dist/css/bootstrap.css');
.rel {
position: relative;
height:300px;
width: 600px;
}
.read-more {
position: absolute;
bottom: 0;
right: 0;
}
.background {
background-image: url("http://placehold.it/600x300");
height: 300px;
width: 600px;
}
}
<div class="container rel"> <a href="/thelink">
<article class="property-ad">
<div class="background img-responsive">
<div class="title">Big Title</div>
</div>
</article>
<button class="btn btn-default read-more">Read more</button>
</a>
</div>
This is due to the right panel only being the height of the content, in this case the title and the button.
To counter this, you need to set a height.
I added the class box-height to the html and, as the image seems to max at 141px [At least for me, W7 PC], I set the container height to that height (141px)
You can see a working example here; http://jsfiddle.net/8pLjfq5u/18/
Without the height being given, the button will just fix itself to the height of the container, which in this case is set by the title height etc.
Edit
I would advise against setting css changes in bootstrap classes in this instance.
At some point, that change to the core CSS will bite you in the behind, when you need it to work as intended in the original build.
Second Edit
It would appear that if you simply move the button into a col-sm-12 div, that you can get the desired result.
This also scales into mobile view too, without the need to add additional classes or css attributes.
http://jsfiddle.net/8pLjfq5u/20/
There are two possible problems here - depending on what exaclty you want to achieve!
(I guess it's the second one you are looking for!)
First:
if you want to position your read more at the bottom right corner of the whole page:
You have position:relative in your CSS for .row.
This means all elements inside an element with class row will be positioned relative to this element - so your read more can only be positioned inside it with your CSS (with negative values for right and bottom it can be outside, but still relative to this element).
Second:
If you want to position your read more at the the bottom right corner of the article
The parent element to your #read-more has only height of 20px, because the text Big Title in the div above is only of that height.
As your #read-more element is positioned absolute, it doesn't contribute to the height.
I tried setting height: 100%; on the parent element of #read-more, but it doesn't work.
So, it seems, you will have to put your #read-more elemnt outside of its parent div, directly into the article, like this:
<div class="container">
<div class="row">
<div class="col-sm-12">
<a href="/thelink">
<article class="row property-ad">
<div class="col-sm-5">
<img src="//placehold.it/600x300" class="img-responsive"/>
</div>
<div class="col-sm-7">
<div class="title">Big Title</div>
</div>
<button id="read-more" class="btn btn-default pull-right">Read more</button>
</article>
</a>
</div>
</div>
I added "col-xs" classes to your markup and it generated the desired display based on what you showed in your question
<div class="col-sm-5 col-xs-5">
<img src="//placehold.it/600x300" class="img-responsive"/>
</div>
<div class="col-sm-7 col-xs-7">
<div class="title">Big Title</div>
If you plug that into your fiddle it displays the way you want with your media query. When you really shrink it down though it get's pretty illegible at that point.
Maybe you want to adjust the media query to display differently for "sm" and "xs".
Try this:
<div class="d-flex justify-content-end">
<button class="btn" type="submit">Connect</button>
</div>