I have two bootstrap columns with col-xs-8 and col-xs-4. Both contain image of same height. When I try to reduce the width of browser the second image is becoming shorter compare to first. I want both in same height. Code is shown below. Thanks in advance.
.offer-row .col-xs-8{padding-right: 8px;}
.offer-row .col-xs-4{padding-left:7px;}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="row offer-row">
<div class="col-xs-8">
<img src="http://via.placeholder.com/825x500" class="img img-responsive">
</div>
<div class="col-xs-4">
<img src="http://via.placeholder.com/410x500" class="img img-responsive">
</div>
</div>
The size will reduce, as the screen size reduces, for preventing that you have to write media-query and make your web page responsive.For example in how to write media query, go through given link.
How to write media query for maiking reponsive websites
This will make height fixed.
.img-fix{
max-width:100%;
height:100%;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<body>
<div class="row offer-row">
<div class="col-xs-8">
<img src="http://via.placeholder.com/825x500" class="img img-fix">
</div>
<div class="col-xs-4">
<img src="http://via.placeholder.com/410x500" class="img img-fix">
</div>
</div>
</body>
I solve the problem by adding the following css
.row-eq-height {display: -webkit-box;display: -webkit-flex;display: -ms-flexbox;display: flex;}.offer-row .col-sm-4{padding-left:7px;overflow-y: hidden;}
.offer-row .col-sm-4 img{min-height:100%; }
.offer-row .col-xs-8{padding-right: 8px;}
.offer-row .col-xs-4{padding-left:7px;}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<body>
<div class="row offer-row row-eq-height">
<div class="col-xs-8">
<img src="http://via.placeholder.com/825x500" class="img img-fix">
</div>
<div class="col-xs-4">
<img src="http://via.placeholder.com/410x500" class="img img-fix">
</div>
</div>
</body>
Related
Seems like I can't get that image to be aligned with the Text.
I am trying to get that logo aligned with those two sentences.
Also, There was no style setting. Just the default Bootstrap.css file.
<div class="box-padding-md grey-bg">
<div class="jumbotron jumbotron-fluid">
<div class="container">
<img src="../img/bg.png" style="float:left;width:150px;height:150px;margin-left:20px;margin-right:20px;margin-bottom:20px;">
<h3 class="display-5">"Espher Information Assocation"</h3>
<p class="lead">제16세대 프로젝트</p>
</div>
</div>
</div>
You can do that with bootstrap media object, no need to use any css for that.
Check that link you can have a better idea
https://getbootstrap.com/docs/4.0/layout/media-object/
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Bootstrap Media</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
</head>
<body>
<div class="box-padding-md grey-bg">
<div class="jumbotron jumbotron-fluid">
<div class="container">
<div class="media p-3">
<img src="https://i.imgur.com/v9f1nS2.jpg" alt="John Doe" class="mr-3 mt-3 rounded-circle" style="width:60px;">
<div class="media-body">
<h3 class="display-5">"Espher Information Assocation"</h3>
<p class="lead">제16세대 프로젝트</p>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
You can use something like this
<style>
.align{
width:150px;
height:150px;
margin-left:20px;
margin-right:20px;
margin-bottom:20px;
}
<style>
In HTML use this
<a class="align"><img src="../img/bg.png" alt=""></a>
Use the grid system: https://jsfiddle.net/wwWaldi/3xy4woq7/13/
<div class="box-padding-md grey-bg">
<div class="jumbotron jumbotron-fluid">
<div class="row">
<div class="col-1"></div>
<div class="col-4 text-right">
<img src="../img/bg.png" id="myImg" >
</div>
<div class="col-6">
<h3 class="display-5">"Espher Information Assocation"</h3>
<p class="lead">제16세대 프로젝트</p>
</div>
<div class="col-1"></div>
</div>
</div>
</div>
I am new to the bootstrap. I have following bootstrap code:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div style="padding-top: 25px; ">
<div class="col-md-10 col-md-offset-1" style="background-color: #F0F8FF;">
<div class="col-md-3">
<img src="{{URL::asset('/images/car.png')}}" alt="profile Pic" height="50" width="50">Car
</div>
</div>
</div>
Now, I need the first image and then under the image 'car' word in the center to the div and under word some discription about the car. like image of this. how can I do this?
See image here:
Based on the code you've provided I assume you are using Bootstrap 3.x and so the below code reflects that. The two main classes you might rely on here (because there are multiple methods to achieve your desired outcome) would be .text-center and .center-block. The first simply applies text-align: center to the element while the latter alters the display and left/right margin to force centering.
.your-custom-background {
background: #F0F8FF;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="container-fluid">
<div class="row">
<div class="col-md-10 col-md-offset-1">
<div class="your-custom-background text-center">
<img src="https://placehold.it/50/50/" alt="profile Pic" height="50" width="50" class="center-block">
<p>Car</p>
<p>Some additional description goes here.</p>
</div>
</div>
</div>
</div>
A couple of additional notes as you mention you are new to Bootstrap:
(1) Because Bootstrap's Grid applies padding to the column wrapper, you should avoid applying backgrounds directly to this element unless your desire is to re-color both the content area AND the gutter.
(2) It's not clear why you're using .col-md-3 inside your .col-md-10 but columns must always be wrapped within a .row, even when nested.
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet" />
<div class="row">
<div class="col-md-3 text-center">
<img class="d-block m-auto" src="https://placehold.it/50x50"/>
<div>Car</div>
<div>62.3333</div>
<div>text text text texttext texttext texttext text</div>
</div>
<div class="col-md-3">
</div>
<div class="col-md-3">
</div>
<div class="col-md-3">
</div>
</div>
I am currently trying to use Bootstrap to get two columns: One width 1/3 size and one with 2/3 size.
What I have is a container, and in it a row:
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" type="text/css" rel="stylesheet" />
<div class="container">
<div class="row">
<div class="col-md-4">
asfas asijnafninasifn<br/>afasfn<br/>afasfn<br/>afasfn<br/>afasfn<br/>afasfn<br/>afasfn<br/>afasfn<br/>afasfn
</div>
<div class="col-md-8">
<img id="Image-Maps-Com-image-maps-2017-08-25-161100-img" src="image.png" alt="" usemap="#image-maps-2017-08-25-161100" width="6460" height="3455" border="0" class="map" />
<map id="ImageMapsCom-image-maps-2017-08-25-161100" name="image-maps-2017-08-25-161100"></map>
</div>
</div>
</div>
So the expected result for me (in my understanding) would be 1/3 of the page with the text and linebreaks and 2/3 (on the right side) would be the image with the image-map on it.
But: the result is both underneath, so in one line there is this thex text (within col-md-4) and on the next line there is the image (within col-md-8). Where is the problem?
Info: My viewport is big enough and even changing is to xs doesn't change the result.
As written in your comments, this DOES work:
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" type="text/css" rel="stylesheet" />
<div class="container">
<div class="row">
<div class="col-md-4">
asfas asijnafninasifn<br/>afasfn<br/>afasfn<br/>afasfn<br/>afasfn<br/>afasfn<br/>afasfn<br/>afasfn<br/>afasfn
</div>
<div class="col-md-8">
<img id="Image-Maps-Com-image-maps-2017-08-25-161100-img" src="https://upload.wikimedia.org/wikipedia/commons/3/33/Su%C3%ADno_alta.jpg" alt="" usemap="#image-maps-2017-08-25-161100" width="6460" height="3455" border="0" class="map" style="max-width: 100%; height: auto !important" />
<map id="ImageMapsCom-image-maps-2017-08-25-161100" name="image-maps-2017-08-25-161100"></map>
</div>
</div>
</div>
For small screen use col-sm-4 and col-xs-4 because col-md-4 taking 992px and up screen. One important thing for image, give img-reponsive class.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" type="text/css" rel="stylesheet" />
<div class="container">
<div class="row">
<div class="col-md-4 col-sm-4 col-xs-4">
asfas asijnafninasifn<br/>afasfn<br/>afasfn<br/>afasfn<br/>afasfn<br/>afasfn<br/>afasfn<br/>afasfn<br/>afasfn
</div>
<div class="col-md-8 col-sm-8 col-xs-8">
<img id="Image-Maps-Com-image-maps-2017-08-25-161100-img" src="https://dummyimage.com/600x200/000/fff&text=sample+image" alt="" usemap="#image-maps-2017-08-25-161100" border="0" class="map img-responsive" />
<map id="ImageMapsCom-image-maps-2017-08-25-161100" name="image-maps-2017-08-25-161100"></map>
</div>
</div>
</div>
I'm working with Angular (v4.3.1) and Bootstrap (v4.0.0-alpha.6). A template contains two subcomponents like so:
<div class="card-deck">
<comp1></comp1>
<comp2></comp2>
</div>
Both subcomponent's templates have as root element's class the .card Bootstrap class.
<div class="card">
...
</div>
This, once compiled results in the following HTML
<div class="card-deck">
<comp1 _nghost-c3="">
<div _ngcontent-c3="" class="card">
...
</div>
</comp1>
<comp2 _nghost-c4="">
<div _ngcontent-c4="" class="card">
...
</div>
</comp2>
</div>
The problem is that the .card-deck styling doesn't get applyed properly if there is an element wrapping the .card elements.
A Bootstrap only example, the problem is strictly related to Bootstrap css and not Angular obviously.
<!DOCTYPE html>
<html>
<head>
<link data-require="bootstrap#4.0.5" data-semver="4.0.5" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" />
<script data-require="bootstrap#4.0.5" data-semver="4.0.5" src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body>
<!-- Displayed properly -->
<div id="deck-without-wrapper" class="card-deck">
<div class="card">
<div class="card-block">
<p>Card1</p>
</div>
</div>
<div class="card">
<div class="card-block">
<p>Card2</p>
</div>
</div>
</div>
<br>
<!-- NOT displayed properly -->
<div id="deck-with-wrapper" class="card-deck">
<div id="wrapper1">
<div class="card">
<div class="card-block">
<p>Card1</p>
</div>
</div>
</div>
<div id="wrapper2">
<div class="card">
<div class="card-block">
<p>Card2</p>
</div>
</div>
</div>
</div>
</body>
</html>
Anyone knows a way to get both the components structure and the styling working?
The wrappers are causing trouble because a div doesn't have any flex css properties, While the .card classes are using flex:1 0 0;
Option 1 (preferred): Apply the .card class to the angular host element wrapper, instead of the first child element.
I've not used angular, going by these docs you could set a class on the host element. Using #Component.host.
Or define some rules using angulars custom renderer.
I can't advice you on the best approach, I lack the knowledge on angular.
In the end you would want to end up with <comp1 _nghost-c3="" class="card">
Option 2 (not very sane): Pretend that the wrappers are cards,
and style them like a card would be styled.
I would advice against this.
It can cause troubles in the long run. IE newer bootstrap versions could change the css styling, and you might forget to update these custom rules.
.card-deck > div {
display: flex;
flex: 1 0 0;
flex-direction:column;
}
.card-deck > div:not(:last-child){
margin-right:15px;
}
.card-deck > div:not(:first-child)
{
margin-left:15px;
}
<!DOCTYPE html>
<html>
<head>
<link data-require="bootstrap#4.0.5" data-semver="4.0.5" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" />
<script data-require="bootstrap#4.0.5" data-semver="4.0.5" src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body>
<!-- Displayed properly -->
<div id="deck-without-wrapper" class="card-deck">
<div class="card">
<div class="card-block">
<p>Card1</p>
</div>
</div>
<div class="card">
<div class="card-block">
<p>Card2</p>
</div>
</div>
</div>
<br>
<!-- NOT displayed properly -->
<div id="deck-with-wrapper" class="card-deck">
<div id="wrapper1">
<div class="card">
<div class="card-block">
<p>Card1</p>
</div>
</div>
</div>
<div id="wrapper2">
<div class="card">
<div class="card-block">
<p>Card2</p>
</div>
</div>
</div>
</div>
</body>
</html>
Problem
So, I am trying to fit 3 images in a row. Every Image has a different dimension.
So, I tried adding the thumbnail class hoping that it would make all images the same size but it only added the border but never changed the image size.
What I want
I want all images the same size.
Code
(The code is for one image since all images have the same code)
<div class="col-lg-4">
<div class="thumbnail">
<img src="https://images.unsplash.com/photo1423034816855245e5820ff8cdpr=1&auto=format&fit=crop&w=1500&h=2000&q=80&cs=tinysrgb&crop="alt="Something in france!">
</div>
</div>
you could do it something like this, apply width: 100%; and height: auto; to img
see fiddle for working demo
img{
max-width: 100%;
border: 1px solid red;
width: 100%;
height: 200px; // adjust it based on your need
}
<div class="row">
<div class="col-md-4 col-sm-4">
<img src="http://placehold.it/500x150" />
</div>
<div class="col-md-4 col-sm-4">
<img src="http://placehold.it/100x50" />
</div>
<div class="col-md-4 col-sm-4">
<img src="http://placehold.it/200x150" />
</div>
</div>
Some images are affected differently with the thumbnail tag. That is because some images have a larger width than the height (ex: 480 x 670).
Example
<html lang="en">
<head>
<title>Image Gallery</title>
<link href="bootstrap.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" type="text/css" href="Image Gallery.css">
</head>
<body>
<div class="row">
<div class="col-lg-4">
<div class="thumbnail">
<img src="https://images.unsplash.com/photo-1423034816855-245e5820ff8c?dpr=1&auto=format&fit=crop&w=1500&h=2000&q=80&cs=tinysrgb&crop=" alt="Something in france!">
</div>
</div>
<div class="col-lg-4">
<div class="thumbnail">
<img src="https://images.unsplash.com/photo-1441790844170-ec5dc89c7eae?dpr=1&auto=format&fit=crop&w=1500&h=1000&q=80&cs=tinysrgb&crop=" alt="A sad monkey">
</div>
</div>
<div class="col-lg-4">
<div class="thumbnail">
<img src="https://images.unsplash.com/photo-1464039397811-476f652a343b?dpr=1&auto=format&fit=crop&w=1500&h=1003&q=80&cs=tinysrgb&crop=" alt="A forest!">
</div>
</div>
</div>
</div>
<script src="bootstrap.js"></script>
<script src="https://code.jquery.com/jquery-3.1.1.js"></script>
</body>