I am trying to set image on the right of the div. But somehow the image is not fitting in the div.
HTML:
<div class="container" >
<div class= "row list-container">
<div class="col-md-10">
<h3>This contains some description</h3>
</div>
<div class="col-md-2" >
<img src = "img/Websitebackground.jpg" class = "img-responsive">
</div>
</div>
</div> <!-- /.container -->
CSS:
#list-section{
background:white;
margin-top:100px;
}
.list-container{
margin:20px;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
Demo: https://jsfiddle.net/sakib_rahman_cse11/czLvkr7z/
What I want is something like this: http://imgur.com/a/x8lXs
If I truly understand you...
Images have default property display: inline-block; And this cause a 5px white space under the image. If you want to remove this 5px space, set this:
.img-responsive { display: block;}
Does this look like something you tried to achieve?
You can play around with width and height (absolute or relative), but the main Idea is that you use background-image instead of <img> tag, and use background-size:100% auto; to make it responsive as described
here .
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<style>
html, body, .container {
width: 100%;
height: 100%;
}
.desc-bg-div {
height: 20%;
background-image: url("http://i.imgur.com/TpVSw4X.jpg");
background-repeat: no-repeat;
background-position: right;
padding: 0;
position: relative;
}
.opaque-div {
background: rgb(0, 0, 0); /* Fallback for older browsers without RGBA-support */
background: rgba(0, 0, 0, 0.5);
color: #ffffff;
width: 100%;
position: absolute;
bottom: 0;
text-align: center;
}
</style>
</head>
<body>
<div class="container" >
<div class="row outer">
<div class="col-md-10">
<p>your content goes here</p>
</div>
<div class="col-md-2 desc-bg-div">
<div class="opaque-div">
<h3 class="description">This contains some description</h3>
</div>
</div>
</div>
</div>
</body>
</html>
Using Responsive Tags
I have used col-xs-* instead of col-md-* and it all works
<div class="container" >
<div class= "row list-container">
<div class="col-xs-10">
<h3>This contains some description</h3>
</div>
<div class="col-xs-2" style="padding:0 !important; margin: 0 !important">
<img src = "http://i.imgur.com/TpVSw4X.jpg" >
</div>
</div>
</div> <!-- /.container -->
https://jsfiddle.net/sakib_rahman_cse11/czLvkr7z/
Related
I have been trying very hard to make a split screen using Bootstrap. Here's what it looks like when I managed to do it with CSS:
But I need to make it responsive to mobile users so I'm remaking it with Bootstrap. However the image and textbox don't resize for some reason.
By responsive I mean that it should become single row with 2 columns and vice versa depending wether you're on a desktop or mobile.
Edit: Sorry for this sudden change, but I'm now using Bootstap ver5.
#promotion-textbox {
top: 115px;
display: inline-block;
margin-right: 5vw;
left: 55%;
background-color: white;
object-fit: fill;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
}
#promotion-title {
padding: 10px;
position: static;
color: #23272a;
font-size: 3vw;
overflow: hidden;
display: inline-block;
}
#promotion-button {
width: 40vw;
opacity: 0.8;
left: 75%;
transform: translate(-50%, -75%);
margin-left: auto;
margin-right: auto;
top: 620px;
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<div class="row">
<!-- First Half -->
<div class="col-md-6">
<img class="img" src="https://via.placeholder.com/100">
</div>
<!-- Second Half -->
<div class="col-md-6">
<div id="promotion-textbox">
<div id="promotion-title">
Duck Zone is the best game of all time, I mean just look at these awesome reviews:<br /><br /> TheP0mp21 Says:<br />- Game is pretty good but it needs a your mum duck that is extremely fat and spawns other ducks.
</div>
</div>
</div>
</div>
A few things, if you are using a library then take advantage of it, use its utility classes, and learn its grid system:
Add vh-100 utility class to your row
Add w-100 h-100 in img tag HTML and in CSS add object-fit: cover
Because you've updated your question from bootstrap-4 to ootstrap-5, to remove the spacing in order to hide the horizontal scrollbar you need to replace no-gutters to g-0
Note: You have a lot of styles that doesn't make sense, such left/top without position
I also I've improved your code
#promotion-textbox {
background-color: white;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
margin-bottom: 20px;
}
#promotion-title {
padding: 10px;
color: #23272a;
font-size: 3vw;
}
#promotion-button {
opacity: 0.8;
border: 2px solid #fff;
color: #fff;
padding: 10px 20px;
background: transparent;
}
img {
object-fit: cover
}
.col-6:last-child {
background: darkgray
}
.promotion-column {
display: flex;
flex-direction: column;
padding: 20px;
align-items: center;
justify-content: center;
height: 100%;
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" />
<div class="row g-0 vh-100">
<!-- First Half -->
<div class="col-md-6">
<img class="img w-100 h-100" src="https://picsum.photos/300/200">
</div>
<!-- Second Half -->
<div class="col-md-6">
<div class="promotion-column">
<div id="promotion-textbox">
<div id="promotion-title">
Duck Zone is the best game of all time, I mean just look at these awesome reviews:<br /><br /> TheP0mp21 Says:<br />- Game is pretty good but it needs a your mum duck that is extremely fat and spawns other ducks.
</div>
</div>
<button type="button" id="promotion-button">All Projects</button>
</div>
</div>
</div>
You must use responsive image if you want it to be responsive. I also removed gutters from the row.
EDIT: made some improvment, height:100vh is really helpful. Takes exactly the height of the window.
.half {
border: 1px solid red;
height: 100vh;
position: relative;
}
.my-image {
width: 100%;
height: 100%;
}
#promotion-textbox {
top: 115px;
display: inline-block;
background-color: white;
object-fit: fill;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
}
#promotion-title {
padding: 10px;
position: static;
color: #23272a;
font-size: 3vw;
overflow: hidden;
display: inline-block;
}
#promotion-button {
width: 40vw;
opacity: 0.8;
left: 75%;
transform: translate(-50%, -75%);
margin-left: auto;
margin-right: auto;
top: 620px;
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.1/dist/css/bootstrap.min.css" integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous">
<div class="row no-gutters">
<!-- First Half -->
<div class="half col-sm-6">
<img class="img my-image" src="https://picsum.photos/536/354">
</div>
<!-- Second Half -->
<div class="half col-sm-6">
<div id="promotion-textbox">
<div id="promotion-title">
Duck Zone is the best game of all time, I mean just look at these awesome reviews:<br /><br /> TheP0mp21 Says:<br />- Game is pretty good but it needs a your mum duck that is extremely fat and spawns other ducks.
</div>
</div>
</div>
</div>
<p>content </p>
<p>content </p>
<p>content </p>
<p>content </p>
<p>content </p>
<p>content </p>
<p>content </p>
<p>content </p>
<p>content </p>
<p>content </p>
To make a split screen (two columns) use .row as parent and .col-md-6 for children. "md" part means that columns will expand to full screen width on medium and smaller screens( you can choose: xxl, xl, lg, md, sm, xs). TO make it fit the screen vertically add min-height: 100vh; for both columns and media query for the break point with min-height: 50vh;
source: https://getbootstrap.com/docs/4.6/layout/grid/
Bootstrap 4 example (works in bootstrap 5 and 4):
CSS:
.img-col{
background: url(https://via.placeholder.com/100) center center no-repeat;
background-size: cover;
}
.min-h-50{
min-height:100vh;
}
#media only screen and (max-width: 767px) {
.min-h-50{
min-height:50vh;
}
}
HTML:
<div class="row">
<div class="col-md-6 img-col min-h-50">
</div>
<div class="col-md-6 bg-dark min-h-50">
<div class="row justify-content-center h-100">
<div class="col-10 align-self-center">
<div class="bg-white p-3">rff</div>
<div class="mt-3 text-center"><button class="btn btn-primary">xxx</button></div>
</div>
</div>
</div>
</div>
I've looked around and tried many different solutions, yet none of them worked for me. Basically I am just trying to have my <center> tag aligned vertically, so the margin on the top is always equal to the bottom when resizing. What kind of CSS can I apply to do this?
.modalText {
font-weight: 100;
font-size: 2.5em;
}
.paypalCenterModal {
margin: auto 0;
}
.modalText {
margin: auto 0;
}
.img-responsiveModal {
margin: 30px 0px 30px 0px;
display: block;
width: 100%;
height: auto;
box-shadow: 10px 10px 8px #888888;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="container-fluid">
<div class="row">
<div class="col-sm-6 modal3ImgPrev">
<img class="img-responsiveModal" id="myImg3" src='/CMS_Static/Uploads/313864614C6F6F/DJI_0019-Recovered.jpg' />
</div>
<center class="paypalCenterModal">
<h3 class="modalText">Select Options</h3>
<form class="paypalForm" <p>Form Content In Here</p>
</form>
</center>
</div>
</div>
You can easily get this by using Flexbox.
If you are thinking to upgrade your bootstrap to version4 you will get this easily.
And as I see you are not using bootstrap grid col-* and row classes according to doc.
Read Bootstrap3 Grid
Stack Snippet
.v-align-section .row {
display: flex;
align-items: center;
}
.modalText {
margin-top: 0;
}
#media (max-width:767px) {
.v-align-section .row {
flex-direction: column;
}
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="v-align-section">
<div class="container-fluid">
<div class="row">
<div class="col-sm-6 modal3ImgPrev">
<img class="img-responsiveModal img-responsive" id="myImg3" src='http://via.placeholder.com/250x350' />
</div>
<div class="col-sm-6">
<form class="paypalForm">
<h3 class="modalText">Select Options</h3>
<p>Form Content In Here</p>
</form>
</div>
</div>
</div>
</div>
You can adjust the bottom values in the class it self. Try the following snippet. Further more you can adjust values with using rem rather than pixel to improve the responsiveness.
.divThatNeedsToBeCenteredVertically {
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0px;
margin: auto;
width: 100px;
height: 100px;
}
<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-fluid">
<div class="row">
<div class="col-sm-6 modal3ImgPrev">
<img class="img-responsiveModal" id="myImg3" src='/CMS_Static/Uploads/313864614C6F6F/DJI_0019-Recovered.jpg' />
</div>
<center class="divThatNeedsToBeCenteredVertically">
<h3 class="modalText">Select Options</h3>
<form class="col-sm-6 paypalForm">
<p>Form Content In Here</p>
</form>
</center>
</div>
</div>
Why did you use "centre" tag? It has been obsoleted. (https://developer.mozilla.org/en-US/docs/Web/HTML/Element/center)
Below is the solution, make sure that the position of the parent div, with class name "row", is not "static" (by default, the position of div is static, you can change it to "relative" or whatever).
.row {
position: relative;
height: 100vh;
}
.divThatNeedsToBeCenteredVertically {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: gray;
}
For more details look at the URL: https://jsfiddle.net/sanqian/y9ftobma/
Here is another example, I recommend you to having a look at it.
https://jsfiddle.net/sanqian/La9m2u8L/
Try adding this CSS Snippet
form{
position : absolute;
transform: translate(-50%,-50%);
top : 50%;
left : 50%;
margin: auto;
}
We are setting the top and left to middle of the form screen
Try this..!
.modalText {
font-weight: 100;
font-size: 2.5em;
margin: auto 0;
}
.img-responsiveModal {
max-width: 100%;
height: auto;
box-shadow: 10px 10px 8px #888888;
}
.row{
display:-ms-flexbox;
-ms-flex-pack:center;
-ms-flex-align:center;
/* Firefox */
display:-moz-box;
-moz-box-pack:center;
-moz-box-align:center;
/* Safari, Opera, and Chrome */
display:-webkit-box;
-webkit-box-pack:center;
-webkit-box-align:center;
/* W3C */
display:box;
box-pack:center;
box-align:center;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="container-fluid">
<div class="row">
<div class="col-xs-6 modal3ImgPrev">
<img class="img-responsiveModal" id="myImg3" src="https://images-na.ssl-images-amazon.com/images/M/MV5BMjM2ODEzMDUzMF5BMl5BanBnXkFtZTcwNDQ2NzU3OQ##._V1_UY317_CR20,0,214,317_AL__QL50.jpg"/>
</div>
<div class="col-xs-6 paypalCenterModal">
<h3 class="modalText">Select Options</h3>
<form class="paypalForm"><p>Form Content In Here</p></form>
</div>
</div>
</div>
</div>
I want to set two images beyond the another one image. Please find the below image i am trying to fix. But i couldn't to reach the solution.
.main {
border: 1px solid black;
background-color: white;
padding: 10px 10px 10px 10px;
width: 1100px;
height: 100%;
margin: auto;
}
.container-fluid {
background-image: url("bluescreen1.png");
background-size: 100% 15%;
background-repeat: no-repeat;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<body class="main">
<div class="container-fluid">
<div class="row" style="z-index: 1;">
<div class="col-sm-12">
<img src="http://u.realgeeks.media/legacyplusrealty/email.jpg">
</div>
</div>
<div class="row">
<div class="col-sm-4">
Some Text
</div>
<div class="col-sm-4">
<img src="http://u.realgeeks.media/legacyplusrealty/email.jpg" alt="Paris" style="width: 100%; height:320px; ">
</div>
<div class="col-sm-4">
<img src="http://u.realgeeks.media/legacyplusrealty/email.jpg" alt="Paris" style="width: 100%; height:320px; z-index: -100;">
</div>
</div>
</div>
</body>
I want to the above format of design. The blue color image shows beyond the two images. but i couldn't to do it. Please review and guide me...
add position:relative; to every img as z-index only works with positioned elements
i have this fiddle: http://jsfiddle.net/z715whdj/1/ don't know what you need from css so please take a look at the fiddle.
<div class="container">
<div class="head">
<!-- Slogen and meta-links -->
</div>
<div class="carousel">
<!-- Maybe some headpics or a slider -->
</div>
<div class="logo">
<!-- Main Logo -->
</div>
<div class="navi">
<div class="logos">
<ul>
<li></li>
<li></li>
<!-- Placeholder for some logos -->
</ul>
<div class="clr"></div>
</div>
<div class="nav">
<!-- Navi UL -->
</div>
</div>
<div class="content">
<!-- Content comes here -->
</div>
<div class="footer">
<!-- Footer -->
</div>
</div>
the left blue bar should be the navi and it should be as high as the content+footer is (overlapping over footer). How can i get that?
I got the min-height aspect but it seems to be struggling because i get a scrollbar. i read through some of the questions here but i wasn't able to get some aspects of them.
is there a possibility to stretch the height of the navi in function of the content+footer or do i have to write a workaround and if i have to, how to write this workaround?
Try to set position:relative to container and position:absolute for navi. Set top property to compensate header height, and bottom to 0 to let navi fullfill container height.
CSS:
.container {
width: 970px;
padding-right: 3px;
padding-left: 3px;
background-color: #fff;
margin: auto;
box-shadow: 0 0 16px 0 rgba(0, 0, 0, 0.65);
z-index: 1;
font-family: Verdana, sans-serif;
font-size: 14px;
color: #575756;
min-height: 100%;
height: 100%;
position:relative;
}
.container .navi {
float: left;
margin-left: 30px;
z-index: 3;
background-color: #233872;
padding: 20px 10px 20px 10px;
border: 3px solid #fff;
border-bottom: 0;
position: relative;
width: 220px;
position:absolute;
top:50px;
bottom:0px;
}
jsFiddle
EDIT:
As requested, I've created a new (simpler) layout to let container fullfill 100% height without vertical scrollbar: jsFiddle
New to using bootstrap, and am having trouble with a div rectangle that I would like to stretch full-width across the top of the page (much like the SO grey bar at the top). I have tried sizing to 100% and resetting margins, but nothing is working. I also tried taking the rectangle out of the container div, but then it disappears :(. I then tried making the rectangle a well instead, but that doesn't seem to want to let me set its height to 20px.
I've tried most of the rearranging-of-divs or using the !important as suggested on SO, but, for whatever reason, the divs aren't cooperating. I just want a blue bar to stretch across the top of the page, as per my bosses request :P
I'm a bit frustrated, and wonder if anyone can help me?
<body>
<div class="container">
<div class="rectangle span12"></div>
<div class="container">
<div class="row-fluid">
<span class="span12">
<img src="images/one-pager-blogcta-08.png" class="pull-right image">
</span>
</div>
</div>
and the CSS
body {
padding-left: 0;
padding-right: 0;
}
/* Set floating dom-heading margins to 0 */
[class*="dom-heading"] {
margin: 0;
}
.container .rectangle {
background: #1f2f5f;
-moz-box-shadow: none;
-webkit-box-shadow: none;
-o-box-shadow: none;
box-shadow: none;
border-radius: 0px;
margin-left: 0px !important;
border: none;
height: 20px;
width:100%;
}
Site: intervalmed.com
Html:
<body>
<div class="navbar rectangle">
<div class="container-fluid">
<!--menu items-->
</div>
</div> <!-- .navbar -->
<div class="container">
<div class="container">
<div class="row-fluid">
<span class="span12">
<img src="images/one-pager-blogcta-08.png" class="pull-right image">
</span>
</div>
</div>
CSS:
.rectangle {
background: #1f2f5f;
-moz-box-shadow: none;
-webkit-box-shadow: none;
-o-box-shadow: none;
box-shadow: none;
border-radius: 0px;
margin-left: 0px !important;
border: none;
height: 20px;
width:100%;
}
If you just want the bar on top, you can just set a border to <body>
body {
border-top: solid 20px #1f2f5f;
}
If you want an actual <div> with 100% of the document's width, then it should be outside the container, since the container is the one that wraps things with max-width
So just move your div outside container and set the height explicitly in your CSS (<div> elements will always fill it's parents width)
HTML
<body>
<div class="rectangle"></div>
<!-- THE REST OF YOUR PAGE -->
</body>
CSS
.rectangle {
background: #1f2f5f;
height: 20px;
}