I have following, simple web page. Here I have used vh for image height. But when I resize it to small screen sizes, the size of the background section doesn't resize properly.
Are there any solutions for this problem without remvoing vh.
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<style>
section{
background-color: rgb(200,200,200);
padding: 10px 0px 30px 0px;
}
.edit_image img{
max-height: 80vh;
padding: 30px 30px 30px 30px;
}
</style>
</head>
<body>
<div class="container-full" style="padding: 20px;">
<section>
<div class="row">
<div class="col-md-12 col-sm-12 text-center">
<div class='edit_image' img_id=0><img src='http://cdn.wonderfulengineering.com/wp-content/uploads/2016/01/Desktop-Wallpaper-4.jpg'></div>
</div>
</div>
</section>
</div>
</body>
</html>
Wrong (Small screen):
Correct (Normal Web page):
Here is a working solution for you. Basically just added max-width to the css. Also created a fiddle https://jsfiddle.net/9p619qwq/
Please note that the fixed padding (for both the <section> and <img>) is going to cause issues when the page gets smaller as the width and the padding ratios are going to overlap.
section{
background-color: rgb(200,200,200);
padding: 10px 0px 30px 0px;
text-align: center;
}
.edit_image img{
max-height: 80vh;
max-width: 80vw;
padding: 30px;
}
<div class="container-full" style="padding: 20px;">
<section>
<div class="row">
<div class="col-md-12 col-sm-12 text-center">
<div class='edit_image' img_id=0>
<img src='http://cdn.wonderfulengineering.com/wp-content/uploads/2016/01/Desktop-Wallpaper-4.jpg'>
</div>
</div>
</div>
</section>
</div>
hey i notice you forgot to add the viewport meta:
<meta name="viewport" content="width=device-width" /> perhaps this will solve your problem
Related
I have been searching for a solution to this problem for almost two weeks now and I am still completely lost. I'm making a simple landing page and I don't want any scrolling. I need a header followed by a bootstrap row containing a paragraph and an image. Here is my ms paint example:
Simple enough right? Well I can not for the life of me figure out how to get that image to shrink to fit into that row. Here is what is happening to me now. Note: When you run the snippet on stackoverflow the window is to small. It is easier to see whats going on with the JSFiddle
body, html {
height: 100%;
width: 100%;
position: absolute;
margin: 0;
}
.content {
}
img {
height: 100%;
}
h1 {
background-color: white;
}
.banner {
height: 90%;
background-color: red;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<div class="banner">
<h1>
Header
</h1>
<div class="row content">
<p> Hello World </p>
<img src="https://upload.wikimedia.org/wikipedia/commons/8/89/Portrait_Placeholder.png">
</div>
</div>
Result
The part that throws me off is that the .row extends beyond it's parent container .banner. How do we force this to stay inside that red area?
I've messed with object-fit, flex-grow, flex-shrink, a flex-basis and none of these seem to create the desired behavior. I'm going insane trying to figure this problem out. Maybe flexbox is the wrong tool to use here? But I'm trying to take advantage of the bootstrap grid system's media queries. Thanks in advance for any help!
Note: The reason I have everything nested in the <div class=".banner"> is because I want the header to have a shadow onto the red background.
Edit
The root of my question is how do I get an image to fit inside of a row that only covers the red area?
You can update your code like below:
img {
/* this will make the image stretch and no overflow*/
height:0;
min-height:100%;
/**/
}
h1 {
background-color: white;
}
.banner {
height: 90vh;
background-color: red;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" >
<div class="banner d-flex flex-column"> <!-- flex container here -->
<h1>
Header
</h1>
<div class="d-flex content flex-grow-1 p-2"> <!-- flex-grow here to fill remaining space -->
<p> Hello World </p>
<img src="https://upload.wikimedia.org/wikipedia/commons/8/89/Portrait_Placeholder.png" class="ml-auto">
</div>
</div>
Try this:
<div class="banner">
<h1>Header</h1>
<div class="row content">
<div class="col-6">
<p> Hello World</p>
</div>
<div class="col-6">
<img src="https://upload.wikimedia.org/wikipedia/commons/8/89/Portrait_Placeholder.png">
</div>
</div>
</div>
Working example: Codepen.
PS.: In my example I tried to follow your ms paint example.
Use display:block to the img & this also helps in responsiveness you can check the fiddle if you want to explore.
OR
You can also look into vh for height and vw for width that will take care of all screen resolutions.
fiddle to playaround.
body,
html {
height: 100%;
width: 100%;
position: absolute;
margin: 0;
}
.content {
height: 80%;
background-color: red;
display: flex;
justify-content: space-around;
}
img {
max-width: 100%;
max-height: 100%;
display: block;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<div class="header">
<h1>Header</h1>
</div>
<div class="row content">
<p> Hello World </p>
<img src="https://upload.wikimedia.org/wikipedia/commons/8/89/Portrait_Placeholder.png">
</div>
I'm doing a site and I'm starting with the mobile stylesheet first.
But the container-fluid's width isn't the same as the window's width.
What I tried to do to fix this was:
.container-fluid{
width: 105%
}
The problem now is that when I make the window a little smaller, it's still not enough, but when I make the window a little bit bigger, it's TOO MUCH, when I do that a scroll bar appears at the bottom.
100% doesn't work since I already said that it's not the full width of the window.
Here's the entire body from the HTML file:
<body>
<!-- Introduction -->
<div id="introduction" class="container-fluid">
<div class="row">
<header>
<h1> Mosescu Bogdan Gabriel </h1>
<img id="profilepic" src="profilepic.png" />
<h2> Web Designer | Motion Graphics Artist </h2>
</header>
</div>
</div>
<!-- //Introduction// -->
<div id="about" class="container-fluid">
<div class="row">
<h1 id="about-title"> Who I am </h1>
</div>
</div>
</body>
and this is the CSS file:
/*Introduction CSS */
#introduction{
background-color: #542437;
color: white;
margin-top: -21px;
}
#introduction header{
text-align: center;
}
#introduction header h1{
font-family: montserrat;
font-weight: bold;
}
#introduction header h2{
font-family: montserrat;
font-weight: normal;
font-size: 1em;
}
#profilepic{
border-radius: 100%;
width: 150px;
height: 150px;
}
/* //Introduction CSS// */
/* About CSS */
#about{
background-color: #f2f2f2;
color: #1a1a1a;
text-align: center;
margin-top: -24px;
}
#about-title{
font-family: montserrat;
font-weight: bold;
font-size: 2.25em;
border-bottom: solid 1px black;
}
Bootstrap containers are padded.
.container-fluid {
padding-right:15px;
padding-left:15px;
margin-right:auto;
margin-left:auto
}
You need to remove the padding.
.container-fluid {
padding-right:0;
padding-left:0;
margin-right:auto;
margin-left:auto
}
Edit: This is a bare bones example. If you copy this and paste into a new .html document you'll see no padding on the container. If you then remove the container-fluid override you'll see padding.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
<!-- put your override styles here - AFTER you include Bootstrap -->
<link href="style-mobile.css" rel="stylesheet">
</head>
<style>
/* override Bootstrap's container */
.container-fluid {
padding-right:0;
padding-left:0;
margin-right:auto;
margin-left:auto
}
</style>
<body>
<div class="container-fluid">
This text hits the left side of the viewport.
</div>
</body>
</html>
Edited HTML example to include new css link
Edit: Bootstrap 4
#Dagrooms commented: "The best way to do this in Bootstrap 4 is to add px-0 to your container-fluid div."
This will remove the padding from the left and right of the container, so that it will touch the sides of the browser viewport.
<div class="container-fluid px-0">
This text hits the left side of the viewport.
</div>
Try this, wrap all the content inside container-fluid with a bootstrap row class. It should work, thanks.
<div id="introduction" class="container-fluid">
<div class="row">
<header>
<h1> Mosescu Bogdan Gabriel </h1>
<img id="profilepic" src="profilepic.png" />
<h2> Web Designer | Motion Graphics Artist </h2>
</header>
</div>
</div>
<div id="about" class="container-fluid">
<div class="row">
<h1 id="about-title"> Who I am </h1>
</div>
</div>
If you just change .container-fluid that won't work because the row and col inside the container all get their own corrections. Try adding full-width to your container-fluid and then adding this:
.full-width { padding-left: 0; padding-right: 0; }
.full-width .row { margin-right: 0; margin-left: 0; }
.full-width .col-md-12 { padding-left: 0; padding-right: 0; }
With Bootstrap 4:
<div class="container-fluid p-0">
<div class="row m-auto">
your content here
</div>
</div>
After a long time of searching and trying out what did it for me in the end was a "w-100" in the "col-xs-12" div tag.
<div class="container-fluid">
<div class="row">
<div class="col-xs-12 w-100">
My content that did not span 100% now with w-100 it does
</div>
</div>
</div>
<div className="container-fluid p-0 m-0 row justify-content-center" >
If you use bootstrap, you can use p-0 and m-0 and they will set the 15px padding from .container-fluid and -15px margin from .row to 0.
I guess there are many ways to do this. in Bootstrap 4, all you have to do is wrap the Container in a Div with Class=Row
<div class="Row">
<header class="container-fluid">
<nav class="navbar navbar-dark bg-secondary">
<h1 class="navbar-brand">Try this out</h1>
</nav>
<header>
</div>
This is the only thing I could get to work, after trying most of these answers.
css:
#mydiv {
margin: 0 -9999rem;
padding: 0.25rem 9999rem;
background-color:#2A2A52
}
html:
<div class="container-fluid px-0">
<div id="mydiv">
<div class="row">
<div class="col-md-12">
<p>YOUR CONTENT HERE</p>
</div>
</div>
</div>
</div>
note: I needed to specify px-0 on the container and wrap the row in a separate div in order for the text to line up horizontally with additional text on the page that was part of a typical container-fluid div.
If none of this works try:
*{margin:0;padding:0}
to remove the padding/margin that might be overlapping on your code. It worked for me, since adding a row wrapping the container-fluid created a horizontal scroll on my page.
I am trying to make a row which is displayed in image .Actually my circle is not on right side and my “P” is not getting background color.Here is my code
http://plnkr.co/edit/qIz2rFgW8n3J92evCRTd?p=preview
can we give row height in percentage ?
actually I need my row should look like as shown in image
![<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title>Ionic Swipe Down</title>
<link href="//code.ionicframework.com/nightly/css/ionic.css" rel="stylesheet">
<script src="//code.ionicframework.com/nightly/js/ionic.bundle.js"></script>
<script src="http://code.ionicframework.com/contrib/ionic-contrib-swipecards/ionic.swipecards.js?v=5"></script>
</head>
<style>
.brd {
border: 1px solid red;
}
</style>
<body ng-app="">
<div class="list card">
<div class="item item-avatar">
<div style="border: 1px solid red;float: left;background: gray;">P </div>
<h2>16000389</h2>
<p>RutherFord & Alfanso Company Lmt</p>
<div style="border: 1px solid black;float: left;background: green;border-radius: 100%;width: 50px;height: 50px">650</div>
</div>
</div>
</body>
</html>
Update Plunker here: http://plnkr.co/edit/Z8w97NgD15rwuKjnmr05?p=preview
Edit: In light of the responsive requirement I have changed the plunker to use viewport settings. This will take up 100% of the width AND set the height of the items inside it to remain in proportion. As for the text I'm not sure you can do that with pure css.
<div class="">
<div class="" style="height: 30vw; position:relative; width: 100%;">
<div style="float: left;background: gray; height:100%; width: 10%; text-align:center;">
<div style=" position:relative; top:40%;">P</div>
</div>
<h2>16000389</h2>
<p>RutherFord & Alfanso Company Lmt</p>
<div style="border: 1px solid black;float: right;background: green;border-radius: 100%;width: 20vw; height: 20vw;position:absolute; top:20%; text-align:center; right:10%">
<div style=" position:relative; top:30%;">650</div>
</div>
</div>
I assume you will be moving all this inline css to separate files though...
This question already has answers here:
Bootstrap Center Vertical and Horizontal Alignment
(17 answers)
Closed last year.
I have a problem with my CSS. I have a panel form in my index page and I want to move it in the middle of the page vertically and horizontally. But I don't know how to create a CSS for this.
Here's my sample code:
<div class="login_header"></div>
<div class="container" style="text-align: center;">
<div class="col-md-6 col-md-offset-3">
<div class="panel_form panel panel-default">
<div class="panel-content">
<h1>test</h1>
</div>
<div class="panel-footer">
<p>test</p>
</div>
</div>
</div>
</div>
<footer class="footer"></footer>
I have a CSS like this:
.login_header { min-height: 50px; background-color: #f5f5f5; }
.panel_form {
/* I don't have an idea with this */
}
.footer {
position: absolute;
bottom: 0;
width: 100%;
height: 50px;
background-color: #f5f5f5;
}
I am not good enough in CSS that's why I need your help. That's all thanks.. :)
Bootstrap 4:
<div class=" h-100 d-flex justify-content-center align-items-center">
<div>
Items are Centered horizontally and vertically
</div>
</div>
JsFiddle
Some of the other answers on this question use CSS hacks with tables and custom CSS classes. As the poster asked "How to center vertically and horizontally using Bootstrap", here is how to do that using only Bootstrap 4 utility classes:
<div class="d-flex justify-content-md-center align-items-center vh-100">
<p>Your Content</p>
</div>
Something of note is that due to the styling on the parent div, when adding additional elements in the same div, they will appear beside the first one, rather than below it. To fix this, just add an additional div inside the parent to reset the styling.
<div class="d-flex justify-content-md-center align-items-center vh-100">
<div>
<p>Content 1</p>
<p>Content 2</p>
</div>
</div>
This does work with Bootstrap flex, I've found that it works best when placed inside a flex component like this, rather than wrapping the entire row.
<div class="container">
<div class="row">
<div class="col-md-6">
<div class="d-flex justify-content-md-center align-items-center vh-100">
<p>Content 1</p>
</div>
</div>
<div class="col-md-6">
<div class="d-flex justify-content-md-center align-items-center vh-100">
<p>Content 2</p>
</div>
</div>
</div>
</div>
Here is a breakdown of each class:
d-flex: Effectively display: flex, allows the div to grow or shrink depending on the amount of content.
justify-content-md-center: Justifies content in the center of the page, can also be replaced with justify-content-sm-center or justify-content-lg-center to change the breakpoint.
align-items-center: Centers the alignments of all items in a div.
vh-100: Sets the height of the div to 100vh, or 100 "vertical height". This ensures that the div is the correct height to allow for vertical alignment.
I found some of the answers very difficult to implement. However, this question seems to be one of the most basic ones and so here's an answer that someone else like me might find useful.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container" style="display: flex; justify-content: center; align-items: center; height: 100vh">
hello world!
</div>
So, check this out; it's pretty cool
HERES A CODE PEN TO SEE IT IN ACTION
html, body 100% width and height;
container with relative or fixed positioning with 100% width and height, if you want to center in viewport. Size doesn't matter if you just want to ceter it within the element.
centered thing needs absolute positioning, a top and left of 50%, then use transform: translate(-50%, -50%);
regardless of its size, it's centered in viewport
CSS
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html,
body {
width: 100%;
height: 100%;
}
#outer {
position: relative;
width: 100%;
height: 100%;
background: #BADA55;
}
#outer #container {
background-color: #f3f3f3;
color: #663399;
padding: 15px 25px;
width: 100%;
max-width: 300px;
position: absolute;
transform: translate(-50%, -50%);
left: 50%;
top: 50%;
}
LESS version
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html, body {
width: 100%;
height: 100%;
}
#outer {
position: relative;
width: 100%;
height: 100%;
background: #BADA55;
#container {
background-color: #f3f3f3;
color: #663399;
padding: 15px 25px;
width: 100%;
max-width: 300px;
position: absolute;
transform: translate(-50%, -50%);
left: 50%;top: 50%;
}
}
What worked for me is this:
<div class="container h-100">
<div class="d-flex justify-content-md-center align-items-center vh-100">
<p>Your Content</p>
</div>
</div>
Asked and answered here: Twitter Bootstrap - how to center elements horizontally or vertically
But the short of it is:
<div class="center-block">...</div>
Link to the Bootstrap docs: http://getbootstrap.com/css/#helper-classes-center
Brothers check this one it's working...
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
</head>
<body>
**<div class="container" style="display: flex; justify-content: center; align-items: center; height: 100vh">
<div class="jumbotron">
hello world!
</div>**
</div
</body>
</html>
While I haven't found a solution to the general problem in pure Bootstrap 5, here is a solution that works with just a little additional CSS. Please test by changing the browser window size, or using the Responsive Mode of your browser, but not both at once, since they don't behave well together.
This example centers a 50% wide and high div, and centers the text inside it.
It works perfectly down to about a 200px by 200px window.
See Code Pen https://codepen.io/david263/pen/eYvOGOB and use Settings > Full screen mode.
<style type="text/css">
/* Required for proper centering */
html, body{
height:100vh;
width:100vw;
}
</style>
<!-- Outer container, full page width and height, red border -->
<div class="container-fluid d-flex justify-content-center align-items-center" style="height:100vh; overflow:hidden; border: 2px solid red">
<!-- Inner row, half the width and height, centered, blue border -->
<div class="row text-center d-flex align-items-center" style="overflow:hidden; width:50vw; height:50vh; border: 1px solid blue">
<!-- Innermost text, wraps automatically, automatically centered -->
<h2>Center This Text (Even if Wrapped) in all Viewport Sizes</h2>
</div> <!-- Inner row -->
</div> <!-- Outer container -->
Give the outer div
display: table;
and the inner div
display: table-cell
Then you can use
vertical-align: center
on the inner div
Read further: Twitter Bootstrap - how to center elements horizontally or vertically
Specifially, this code:
<html>
<body style="margin: 0px; padding: 0px">
<div style="width:100%; background-color:#FFDDDD">head</div>
<div style="height:100%; background-color:#DDFFDD">body</div>
</body>
</html>
Is rendered bigger than the window, creating a permanent scrollbar:
What is a proper way to fix this issue?
The problem is that you are making this div 100% height:
<div style="height:100%; background-color:#DDFFDD">body</div>
the height property in % will make the div take up that percentage of its container, which in this case is the HTML <body>, so changing the header div to be height: 10% and the body div to be height: 90% should fix the problem.
You can simply do it this way:
HTML
<div class="header"> Header</div>
<div class="main">Main content area</div>
CSS
body {
background: yellow;
}
.header {
height: 30px;
background: red;
}
Check it out: http://jsfiddle.net/EDWTM/
Move the background color to the body, and lose the height.
<html>
<body style="margin: 0px; padding: 0px; background-color:#DDFFDD">
<div style="width:100%; background-color:#FFDDDD">head</div>
<div>body</div>
</body>
</html>
http://jsfiddle.net/4XVrW/
Alternatively, you could use margins and absolute positioning to place the header above the body:
<html>
<body style="margin: 30px 0 0 0; padding: 0px">
<div style="height: 30px; width:100%; background-color:#FFDDDD; position: absolute; top:0; left: 0;">head</div>
<div style="height:100%; background-color:#DDFFDD;">body</div>
</body>
</html>