I want to show the image in right side of the top using bootstrap4, but don't know how to resize the image height to meet the same height (keep ratio) as left part
code (want to remove 200px)
<div class="container">
<div class="row">
<div class="col-sm">
<div class="alert alert-success">
why cannot I still use table for this kind of tasks? why cannot I still use table for this kind of tasks?
</div>
<div class="alert alert-info">
It is end of 2021
</div>
<div class="alert alert-info">
Now I'd updated to div, this contents can have more text
</div>
</div>
<div class="col-sm">
<img width="200px" src="https://www.codeply.com/images/partner_creativetim.png" />
</div>
</div>
</div>
see https://www.codeply.com/p/flP5E5EpWk
I approached it a different way although this may require you to edit the height and width of your image a little.
First I removed the image from that Div and added a class bg-smile
<div class="col-sm bg-smile">
<!-- stays empty -->
</div>
I've also added mb-0 to remove the bottom margin from the 3rd text box so the image exactly lines up at the bottom.
Then added a few CSS instructions for the new class and to make the smile image a background of the Div and center it.
.bg-smile{
background: url(https://www.codeply.com/images/partner_creativetim.png) 50% 50% no-repeat;
}
Related
I've read the different posts here asking for footer help; but unfortunately I do not see anything here that have worked in assisting me.
I am building a web app where I am trying to fix the footer to the bottom of the page without overlapping my nav bar (Orange bar) on the left hand side.
Currently my page and code are:
fixed bottom, overlapping nav
<div class="container-fluid">
<div class="HeaderBar row">
<div class="col-md-12">
<img src="images/systemslogo.png" />
</div>
</div>
<div class="FeatureBar row">
<div class="col-md-12">
<p>Welcome</p>
</div>
</div>
<div class="row min-vh-100">
<div class="navbar col-md-1" style="background-color: #f78a00;">
</div>
<div class="col-md-11">
<div class="row">
<div class="col-md-12">
<AlertSuccess/>
#Body
</div>
</div>
<div class="row fixed-bottom" style="background-color: #CCCCCC;">
<div class="col-md-12">
<p>Footer</p>
</div>
</div>
</div>
</div>
</div>
If I remove the "fixd-bottom"; the footers width fixes; but then the footer floats to the top of the page like so:
Floating footer proper width
I have also attached my end goal image; I have blocked out the personal content.
End Goal
I have tried:
Position relative with Bottom 0
margin left (although moves footer over; it screws up when looking at mobile view where there should be no margin. (wasn't sure if I should do a media query and use this option)
Position Absolute with mb-0
Other ideas, but cannot recall
what I have tried.
I am building this app in Blazor with Bootstrap 4.5.2
Thanks everyone for the assistance. I've been googling and trying for past 2 hours with on success.
You're looking for position: fixed;
An element with position: fixed; is positioned relative to the
viewport, which means it always stays in the same place even if the
page is scrolled. The top, right, bottom, and left properties are used
to position the element.
A fixed element does not leave a gap in the page where it would
normally have been located.
Source # https://www.w3schools.com/css/css_positioning.asp
I'm looking for a way to maximize a map inside a Bootstrap row. In the following syntax, the left col-md-9 div is the map, and the right side is a fixed 240px wide image.
<div class="row">
<div class="col-md-9">
<div id="mapid" style="width: 100%; height: 400px;"></div>
</div>
<div class="col-md-3">
<p id="delta">
<%= #myimage %>
<br>
</p>
</div>
</div>
With a fluid layout, it can get ugly quickly. Is there a way to maximize the map in a fluid layout? I want the map to increase with the fluidity and the image retaining 240px with a small margin.
You can just do it with flexbox, and there are utilities from Bootstrap you can use: https://getbootstrap.com/docs/4.3/utilities/flex/
<div class="d-md-flex flex-md-row flex-md-nowrap align-items-md-start">
<!-- map -->
<iframe />
<!-- image -->
<img />
</div>
Since the map/iframe is setup as 100% width, normally this will push the other item off the row. But with flexbox, by default, the flexbox children have flex-shrink: 1; turn on. That means it will shrink for you. That's how you can get the width maximization for the map.
demo: https://jsfiddle.net/davidliang2008/x56ao2pz/8/
I am working on a mini project to recreate a website using bootstrap 4. I am on a part where I need to have three images in a grid format two on the top and one on the bottom. The top two should be even by height (not width the image on the right is larger) like the image below:
Notice how on the bottom (they are even at the top) they are perfectly even.
Now here is how mine looks:
See how the image on the left looks it is slightly higher then the one on the right.
Here is my code for that portion:
<div class="row justify-content-center">
<div class="col-md-4">
<img src="assets/home_seasonal_1.jpg" class="img-fluid" alt="Responsive image" >
</div>
<div class="col-md-6">
<img src="assets/home_seasonal_2.jpg" class="img-fluid" alt="Responsive image">
</div>
</div>
<br>
<div class="row justify-content-center">
<div class="col-md-10">
<img src="assets/home_seasonal_3.jpg" class="img-fluid" alt="Responsive image">
</div>
</div>
I have tried different variations of the columns and nothing has worked so far. The goal is to do this without modifying the css and only using bootstrap.
Here is the bootstrap version I am using:
https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css
I just need some guidance on how I can make this happen.
Here are the images:
If you look at .img-fluid, it sets the max width to 100% and the height auto. That means, if the box that contains the image is narrow, the image might be scaled down and so is the height.
Also I realize, from your expected image, the top 2 pictures are shown from the bottom up while the last 1 is shown from top down.
Those points make me want to use those images as the background of those columns instead.
Structure
<div class="container">
<div class="row justify-content-center">
<!-- assets/home_seasonal_1.jpg -->
<div class="col-md-4" style="background: url('https://i.stack.imgur.com/A5PIq.jpg') center bottom /cover no-repeat"></div>
<!-- assets/home_seasonal_2.jpg -->
<div class="col-md-6" style="background: url('https://i.stack.imgur.com/zVUvf.jpg') center bottom/cover no-repeat"></div>
</div>
<div class="row justify-content-center">
<!-- assets/home_seasonal_3.jpg -->
<div class="col-md-10" style="background: url('https://i.stack.imgur.com/xhMX6.jpg') center top/cover no-repeat"></div>
</div>
</div>
Style
I am being lazy here to style them this way, but you can do inline css to set different styles for those columns. And I used white borders here to do the trick.
.row {
height: 12rem;
}
[class*="col-md"] {
border: 2px solid #fff;
}
Result
LOL it almost looks the same as your expected outcome!
fiddle: http://jsfiddle.net/aq9Laaew/144953/
I have bootstrap container (div class="container") and there are two rows (div class="row").
But between those rows I need one full width horizontal line. Full width - I mean that it should be full width - outside container. This line is just for design issues, it would have background color and that is it. I do not know how to create it.
Divide your content into 2:
<div class="container">
<div class="row">
stuff here
</div>
</div>
<div class="line"></div>
<div class="container">
<div class="row">
stuff here
</div>
</div>
I'm trying to set some divs to width: 100% on Twitter Bootstrap 3 (including no paddings or margins).
JSfiddle: http://jsfiddle.net/rq9ycjcx/
HTML:
<div class="container">
<header>
<div class="row">
<div class="col-md-2">
<img src="http://placehold.it/150x50">
</div>
<div class="col-md-10">Menu</div>
</div>
<div class="row gray">
<div class="col-md-6">
<h1>Page Title</h1>
</div>
<div class="col-md-6">
<div class="breadcrumbs">Main page > page </div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<img src="http://placehold.it/350x150" />
</div>
</div>
</header>
<footer>
<div class="row">
<div class="col-md-12">Content</div>
</div>
<div class="row dark">
<div class="col-md-3">Footer 1</div>
<div class="col-md-3">Footer 2</div>
<div class="col-md-3">Footer 3</div>
<div class="col-md-3">Footer 4</div>
</div>
</footer>
</div>
What is the right way to get image http://placehold.it/350x150 width: 100%, including no paddings or margins?
Page title and breadcrumbs height is 80px.
If I resize window to smaller screen (e.g. mobile), text Main page > page disappears (it's somewhere but not on own row).
How to fix it?
Use <div class="container-fluid">. As per Bootstrap Docs: Use .container-fluid for a full width container, spanning the entire width of your viewport.
There is 0 padding on container-fluid.
In your code you have what appears to be body content in your header and you also have a div class="container" outside of your header and footer. This is not correct, you should have your container/container-fluid inside of your body. Also for your header you should use <nav="nav navbar-nav">.
Updated Fiddle
As suggested above, you can create a helper class
.padding-0 {
padding: 0;
}
and apply it to any HTML elements for which you need a padding reset. So in your case, it would look like this:
<div class="row">
<div class="col-md-12 padding-0">
<img src="http://placehold.it/350x150" />
</div>
</div>
For the second problem, set height of .gray class to auto :
#media () {
.gray {
height: auto;
}
}
Note: You could also remove line-height: 80px, it's optional :)
http://jsfiddle.net/rq9ycjcx/8/
There is no "right" way to do that in Bootstrap 3. It means you have to reset padding for the exact column.
You can create a class such as this one:
.col-md-12.resetPadding { padding:0px }
About Main page > page disappearing, I don't see this problem on my browsers (tested on Chrome and FF), but you have line-height: 80px there and as you said your breadcrumbs div has height: 80px;, so try to reduce line-height property and see how it works.
A simple way would be to remove the <div class="col-md-12">...</div> and add your content directly inside the row tag. The row tag removes the left & right gutters, whereas the cold-md-12 essentially adds the gutters back in.
The Bootstrap 3 documentation says that for single full width items you don't need any markup, eg just wrap it in <p> tags. However this will show the 15px gutters due to the page markup. So by simply adding in the row tag and placing your content directly inside this you will get 100% width content and be compliant with the BS3 documentation.