How to fit image into bootstrap panel-body?
I am using img tag. I tried to do max-height:100% and max-width: 100% but no luck.
Is there any way to fit image to panel-body without specifying actual height and width.
following is my code:
<div class="jumbotron">
<div class="container" id="project_info">
<div class="row">
<div class="col-sm-4">
<div class="panel panel-default">
<div class="panel-heading">Medical Data Visualization</div>
<div class="panel-body">
<img src="resource/Medical_visualization.jpg" class="img-rounded" id="Panel_Image">
</div>
</div>
</div>
</div>
</div>
</div>
Thanks.........
You can use the img-responsive class of bootstrap
<div class="panel-body">
<img class="img-responsive" src="resource/Medical_visualization.jpg" class="img-rounded" id="Panel_Image">
</div>
Try,
.panel-body{
height: 100px;
background-image: url(your-image.jpg);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
also remove img tag. change the height as per req.
i recommend using image as inline background. I have created a snippet. please check
.panel-body {position: relative}
.panel-body .image-holder {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
background-size: cover;
background-position: 50% 50%;
background-repeat: no-repeat;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="jumbotron">
<div class="container" id="project_info">
<div class="row">
<div class="col-sm-4">
<div class="panel panel-default">
<div class="panel-heading">Medical Data Visualization</div>
<div class="panel-body">
<div class="image-holder" style="background: url(http://weknowyourdreams.com/images/nature/nature-02.jpg)"></div>
</div>
</div>
</div>
</div>
</div>
</div>
Related
I'm making a website with angular, bootstrap and i need the first view to be background entirely and then user can scroll down to next div but i am having trouble aligning the divs properly all day
Tried to use an img element with block size but it didn't work, tried to use padding but that completely breaks site on mobile and other size screens
Home component:
<div>
<div id="home-bg-img"></div>
<div id="home-main">
<div class="col-md-12 landing text-center my-auto">
<h2 class="h2 text-light"><span class="purple">ProjectName</span></h2>
<h3 class="h3 cosmic-purple">An Intuitive, Secure and Reliable Project.</h3>
<a class="btn btn-primary btn-lg" href="#" role="button">Explore The Project</a>
</div>
</div>
<div class="container col-md-12" id="home-body">
<div class="row">
<div class="col-md-12 text-center">
<h3 class="h3">
Just some text which should be beneath the image div wberjk vbetba jvntenb jtjrbsb teb jte hjkbtejknb jkbtseb gsdhjjds fhjvbjhebr hjvbdhj sbvhjds
</h3>
</div>
</div>
</div>
</div>
CSS:
#home-main {
height: 100% !important;
width: 100% !important;
margin: 0;
padding: 0;
border: 0;
z-index: auto;
}
#home-bg-img{
position: absolute;
min-height: 100%;
min-width: 100%;
background-image: url("./assets/laura-skinner-348001-unsplash.jpg");
background-size: cover;
background-position-x: center;
background-repeat: no-repeat;
}
I get the image aligned properly in the bg but the two DIVs are at the top of the page one after another
What i want to do is to have the text of first DIV in the center of page (horizontally and vertically) and the second div's text after the bg image after a scroll down
You need to put the content which should be in front of the image in the same <div> where the background image is applied. Also, lose the position: absolute property and I have added display: flex to center the text vertically and horizontally.
html,
body {
height: 100%;
}
#parent-container {
height: 100%;
}
#home-main {
height: 100%;
width: 100%;
}
#home-bg-img {
display: flex;
min-height: 100%;
min-width: 100%;
background-image: url("https://placeholdit.imgix.net/~text?txtsize=63&bg=FF6347&txtclr=ffffff&txt=Image-1&w=350&h=250");
background-size: cover;
background-repeat: no-repeat;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet" />
<div id="parent-container">
<div id="home-bg-img">
<div class="col-md-12 landing text-center my-auto">
<h2 class="h2 text-light"><span class="purple">ProjectName</span></h2>
<h3 class="h3 cosmic-purple">An Intuitive, Secure and Reliable Project.</h3>
<a class="btn btn-primary btn-lg" href="#" role="button">Explore The Project</a>
</div>
</div>
</div>
<div id="home-main">
<div class="container col-md-12" id="home-body">
<div class="row">
<div class="col-md-12 text-center">
<h3 class="h3">
Just some text which should be beneath the image div wberjk vbetba jvntenb jtjrbsb teb jte hjkbtejknb jkbtseb gsdhjjds fhjvbjhebr hjvbdhj sbvhjds
</h3>
</div>
</div>
</div>
</div>
This question already has an answer here:
How do I make my panel to fill the screen down to the footer?
(1 answer)
Closed 4 years ago.
I am doing a mobile version of my result pageso it has to be responsive for every mobile devices, but i don't know how to make my panel(who is scrollable) fill the screen down to the footer no matter on what mobile is the user it should look the same.
if i try to fix the height of the panel with px or vh it's not the same for all device so it's not responsive and if i try to set a % value i can't make my panel scrollable anymore, any idea ?
Here's the code:
CSS
list_mobile {
.result {
height: border-box;
}
.footer {
position: fixed;
width: 100%;
bottom: 0;
height: 5vh;
background: skyblue;
color: black;
}
}
.res_mobile {
height: 57vh;
overflow: scroll;
overflow-x: hidden;
}
HTML
<div class="container-fluid">
<div class="row">
<div class="col-12">
<div class="panel panel-info">
<div class="panel-heading">
<h4 class="panel-title">
<span>Results</span>
</h4>
</div>
<div class="panel-collapse collapse in">
<!-- content -->
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row list_mobile">
<footer class="footer">
<p>number of results : 55 </p>
</footer>
</div>
Change .footer class Style
.res_mobile {
height: 57vh;
overflow: scroll;
overflow-x: hidden;
}
.footer {
position: fixed;
left: 0;
bottom: 0;
width: 100%;
background-color: red;
color: white;
text-align: center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
<div class="row">
<div class="col-12">
<div class="panel panel-info">
<div class="panel-heading">
<h4 class="panel-title">
<span>Results</span>
</h4>
</div>
<div class="panel-collapse collapse in">
<!-- content -->
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row list_mobile">
<footer class="footer">
<p>number of results : 55 </p>
</footer>
</div>
I am trying to create bootstrap grid page with two main sections. one is the app content and the other one is side nav bar.
the nav bar is much shorter the the app content itself. what i am trying to accomplish is that whenever i scroll the page, the app side nav bat will always stick to the top of the page (top, not bottom of it)
my code:
<div class="row">
<div class="col-sm-10 col-md-10">
<div class="col-sm-8 col-md-8">
<app-content></app-content>
</div>
<div class="col-sm-4 col-md-4">
<app-side-navbar></app-side-navbar>
</div>
</div>
</div>
whenever i scroll the page, i want to always see on the top right corner the app navbar.
thanks!
this is what solved the issue for me:
<div class="row">
<div class="app-wrapper">
<div class="col-sm-10 col-md-10">
<div class="col-sm-8 col-md-8">
<app-content></app-content>
</div>
<div class="sticky">
<div class="col-sm-4 col-md-4">
<app-side-navbar></app-side-navbar>
</div>
</div>
</div>
</div>
</div>
and the css:
.sticky {
position: sticky;
top:0;
z-index: 999;
}
You can try using the overflow: auto for content wrapper only
<div class="row">
<div class="col-sm-10 col-md-10">
<div class="col-sm-8 col-md-8 content">
<div class='col-md-12 wrapper'>
Content
</div>
</div>
<div class="col-sm-4 col-md-4">
Sidebar
</div>
</div>
</div>
.content {
max-height: 100vh;
overflow: auto;
}
.wrapper {
height: 800px;
}
Let me know for more details
Try use fixed
<div class="row">
<div class="col-sm-10 col-md-10">
<div class="col-sm-8 col-md-8">
<app-content></app-content>
</div>
<div class="nav-sticky">
<div class="col-sm-4 col-md-4">
<app-side-navbar></app-side-navbar>
</div>
</div>
</div>
And in css:
.nav-sticky{
position: fixed;
top: 0;
height: 100%;
overflow:hidden;
}
Add this property to your app container
min-height:100vh;
max-height:100vh;
overflow:scroll;
Give position:fixed to your row.
Added header to my sample as well.
.app {
min-height: 100vh;
max-height: 100vh;
overflow: auto;
background: red;
color: white;
}
.row {
position: fixed;
width: 100%;
}
.header {
height: 50px;
background: blue;
color: white;
}
.navigator {}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid">
<div class="row">
<div class="col-sm-12 header">HEADER</div>
<div class="col-sm-10">
<div class="col-sm-8 app">
APP CONTENT
<br/> APP CONTENT
<br/> APP CONTENT
<br/> APP CONTENT
<br/> APP CONTENT
<br/> APP CONTENT
<br/> APP CONTENT
<br/> APP CONTENT
<br/> APP CONTENT
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>APP CONTENT
</div>
<div class="col-sm-4 navigator">
NAVBAR
</div>
</div>
</div>
</div>
I'm building a sidebar using the grid system in Bootstrap 4, and the Flexbox utility. For the most part, I have it working, except that I would like to have the sidebar be "static," that is, it should not move when the user scrolls on the page next to it.
I attempted to do this by adding position:fixed to it, but when I did that, the column the sidebar was in was reduced in size to the length of the longest string that was there.
How do I make the sidebar stay fixed in place, while maintaining column width?
Here's my code: (It's a React app, so "class" is replaced with "className")
Parent component:
{ this.state.isLoggedIn ?
<div className="row h-100">
<div className="col-2 no-padding-right">
<Sidebar />
</div>
<div className="col-10 no-padding-left">
<Main />
</div>
</div> :
<Main />
}
The sidebar itself:
<div className="d-flex h-100 align-items-start sidebar-left flex-column sidebar-background sidebar-text">
<div className="p-2">
Week 11
</div>
<div className="mb-auto align-self-stretch h-100 p-2">Leagues/Teams</div>
<div className="p-2">Current Features</div>
<div className="p-2">Feature Request</div>
<div className="p-2">Settings</div>
<div className="p-2">Billing</div>
<div className="p-2">Log Out</div>
</div>
And the relevant piece of CSS:
.sidebar-left {
padding-top: 83px;
position: fixed;
}
Thanks!
Apply the max-width to the sidebar-left is equal to how much your col have.
.sidebar-left {
max-width: 16.666667%;
}
Stack Snippet
body {
margin: 0;
}
.sidebar-left {
font: 13px Verdana;
padding-top: 83px;
position: fixed;
background: red;
max-width: 16.666667%;
left: 0;
top: 0;
overflow: auto;
}
.p-2 {
word-break: break-word;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Zug+QiDoJOrZ5t4lssLdxGhVrurbmBWopoEl+M6BdEfwnCJZtKxi1KgxUyJq13dy" crossorigin="anonymous">
<div class="row h-100">
<div class="col-2 no-padding-right">
<div class="d-flex h-100 align-items-start sidebar-left flex-column sidebar-background sidebar-text">
<div class="p-2">
Week 11
</div>
<div class="mb-auto align-self-stretch h-100 p-2">Leagues/Teams</div>
<div class="p-2">Current Features</div>
<div class="p-2">Feature Request</div>
<div class="p-2">Settings</div>
<div class="p-2">Billing</div>
<div class="p-2">Log Out</div>
</div>
</div>
<div class="col-10 no-padding-left">
<div class="main"></div>
</div>
</div>
I currently have two containers. One of the containers has two divs stacking ontop of each other (a img and text). That is fine. But it seems the bottom container is stacking ontop of the 1st container.
<div class="container">
<div id='map'>
<div id='image'>
<img src="/static/usa.png">
</div>
<div id='states'>
<div class="col-md-12">
<center>
<h2>Select Your State</h2>
Select your state from the list below to find information specific to your area.
</center>
</div>
<div class="col-md-2">
state
</div>
<div class="col-md-2">
state
</div>
<div class="col-md-2">
state
</div>
<div class="col-md-2">
state
</div>
<div class="col-md-2">
state
</div>
<div class="col-md-2">
state
</div>
</div>
</div>
</div>
<div class="container">
<center>
<h1>Information on ...</h1>
This site is a beta framework
</center>
</div>
and my css file is
img {
width:100%;
opacity: 0.4;
}
#map { position: relative; }
#image {position: absolute;}
#states {
position: absolute;
}
span {
display: inline-block;
vertical-align: middle;}
a {
color: black;
}
try adding clear:both; to the bottom container
I answered it by instead of trying to stack the images just setting it to a background image static.
body {
background-image: url("/static/usa.png");
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center;
}