I want to display image and text in one line like tripadvisor.in/
<div style="display:inline-block">
<div style="display:inline;float:left">
<a href="CollegeProfile.php" class="white">
<h4 style="margin-bottom:10px;display:inline">Nice college to study</h4></a>
<br />Read reviews of Indian institute of management,Ahmedabad
</div>
</div>
<div style="display:inline-block">
<img class="shakeImage" src="assets/img/author.jpg" style="border: 1px solid white;height:60px;display:inline" />
</div>
It shows image and text in separate line like:
If you need to stick using div elements, you can do this with the below:
Demo Fiddle
HTML
<div class='table'>
<div class='cell'>
<h4 >Nice college to study</h4>
Read reviews of Indian institute of management,Ahmedabad
</div>
<div class='cell'>
<img class="shakeImage" src="assets/img/author.jpg" style="border: 1px solid white;height:60px;display:inline" />
</div>
</div>
CSS
.table {
display:table;
}
.cell {
display:table-cell;
vertical-align:middle;
}
h4 {
margin:0;
}
Related
I have a Bootstrap 4 project where whenever I minimize the screen a little bit, the image goes underneath the text column. How can I have it where when I minimize the screen it just clips out the image and doesn't send it to the bottom until the screen reaches a certain width? Right now it sends the image to the bottom way too soon.
<div class="container-xs" style="border:2px solid #cecece;">
<div class="row" style="border:2px solid #1ecbe1;">
<div class="core mx-auto">
<div class="BannerPosition">
<!--Banner Description-->
<p class="BannerText">
<div data-highlightword="Anything">
Anything Anything in Anything
</div>
</p>
<!--Download Badges-->
<img class="appleBadge" src="AppleBadge.jpg">
<img class="googleBadge" src="GoogleBadge.jpg">
</div>
</div>
//PROBLEM IS HERE
<div class="col">
<div class="d-flex flex-nowrap">
<img src="VampireCrew.jpg" style="border:2px solid #cecece;">
</div>
</div>
</div>
You can control when the image goes underneath the text by column by using Bootstrap’s columns with breakpoints.
I’ve modified your code to have two 12 column wide columns at the start (small screen) and then the columns switch to a 4 and an 8 from medium size displays and up. You can then use Bootstrap’s sizing utilities to adjust the margins if you want, and I added some CSS to adjust the text size from smaller screens to larger screens using Bootstrap’s normal breakpoints.
To keep the image fitting, I applied Bootstrap’s img-fluid class.
.orange {
color: #FD9B42;
}
.banner {
font-size: 1.25rem;
}
.apple-badge, .google-badge {
margin-bottom: 1rem;
}
#media (min-width:768px){
.banner {
font-size: 1.5rem;
}
}
#media (min-width:992px) {
.banner {
font-size: 2rem;
}
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-xs" style="border:2px solid #cecece;">
<div class="row" style="border:2px solid #1ecbe1;">
<div class="col-12 col-md-4 mb-5 mb-md-0">
<div class="BannerPosition text-center">
<!--Banner Description-->
<p class="banner orange">Anything</p>
<p class="banner">Anything</p>
<p class="banner">Anything in Anything</p>
<!--Download Badges-->
<img class="apple-badge" alt="Apple badge" src="http://via.placeholder.com/150x50.png?text=Apple">
<img class="google-badge" alt="Google badge" src="http://via.placeholder.com/150x50.png?text=Google">
</div>
</div>
<div class="col-12 col-md-8">
<img class="img-fluid" src="http://via.placeholder.com/1280x720.png?text=vampire" alt="Vampires" style="border:2px solid #cecece;">
</div>
</div>
</div>
This is driving me nuts. I'm probably overlooking something super simple since I normally don't have issues with something like a psuedo-class.
I'm trying to remove the right border on a div element for the last-child. I can have it work with a class on the last element, but I don't need to do it that way (since the content will be in an ee loop).
Here is the code. Everything is wrapped in a section with an id of #small-featured. All the content that is nested in bootstrap columns is wrapped in a #featured-wrapper.
<section id="small-featured">
<div class="container">
<div class="row">
<div class="col-md-3">
<div class="featured-wrapper">
<img src="assets/img/36-6022.png" alt="">
<p>The Product Title</p>
</div>
</div>
<div class="col-md-3">
<div class="featured-wrapper">
<img src="assets/img/36-5100.jpg" alt="">
<p>The Product Title</p>
</div>
</div>
<div class="col-md-3">
<div class="featured-wrapper">
<img src="assets/img/46-455.jpg" alt="">
<p>The Product Title</p>
</div>
</div>
<div class="col-md-3">
<div class="featured-wrapper">
<img src="assets/img/unisaw.jpg" alt="">
<p>The Product Title</p>
</div>
</div>
</div>
</div>
</section>
Here is CSS
#small-featured {
text-align: center;
}
#small-featured img {
width: 250px;
padding: 0 15px;
}
.featured-wrapper {
border-right: 1px solid #eee;
}
#small-featured .featured-wrapper:last-child {
border-right: none;
}
All the borders disappear when I add my last bit of CSS. I've tried targeting just .featured-wrapper:last-child as well.
Any ideas?
#small-featured .col-md-3:last-child .featured-wrapper {
border-right: none;
}
(All .featured-wrapper are :last-child.) ¯\_(ツ)_/¯
This is probably much easier than I'm making it sound.
Basically I have 6 Images, each with a button underneath...
This is what it looks like:
I just place them like this:
<img src="Image.png" width="350" height="208" style="margin: 0px 16px">
<img src="Image.png.png" width="350" height="208" style="margin: 0px 16px">
<img src="Button.png" width="282" height="84" style="margin: 0px 16px">
<img src="Button.png" width="282" height="84" style="margin: 0px 16px">
It looks great on a typical browser window. But when I make the window narrower, it goes like this:
Which makes sense give how I list my images/buttons.
But I want them to look like this when the window is narrowed:
What can I add to my very basic HTML to keep this in a nice and format no matter how wide the window is?
Ideally I'd like to go from a 2 by x grid as max, down to a 1 by x grid as seen in the first and final images.
A push in the right direction would be amazing.
I did look HERE on Stackoverflow, but it's far more complex as only works with squares.
I look forward to your help :D
UPDATE
https://jsfiddle.net/du6Lu4ge/
looks like this:
when resized, looks like this:
:(
I would do something like this:
https://jsfiddle.net/du6Lu4ge/3/
Hope it helps you out!
What I did was to wrap the image and the button in a div .img-wrapper styled with display: inline-block
this example is working full responsive, you can simply edit the css and add viewports.
html:
<div class="imageContainer">
<div class="imageBlock">
<!--<img class="image" src="image.png">-->
<div class="image">
your image
</div>
</div>
<div class="buttonBlock">
<!--<img class="button" srck="button.png">-->
<div class="button">
your button
</div>
</div>
</div>
<div class="imageContainer">
<div class="imageBlock">
<!--<img class="image" src="image.png">-->
<div class="image">
your image
</div>
</div>
<div class="buttonBlock">
<!--<img class="button" srck="button.png">-->
<div class="button">
your button
</div>
</div>
</div>
<div class="imageContainer">
<div class="imageBlock">
<!--<img class="image" src="image.png">-->
<div class="image">
your image
</div>
</div>
<div class="buttonBlock">
<!--<img class="button" srck="button.png">-->
<div class="button">
your button
</div>
</div>
</div>
<div class="imageContainer">
<div class="imageBlock">
<!--<img class="image" src="image.png">-->
<div class="image">
your image
</div>
</div>
<div class="buttonBlock">
<!--<img class="button" srck="button.png">-->
<div class="button">
your button
</div>
</div>
</div>
css:
.imageContainer {
width: 400px;
display: inline-block;
}
.imageContainer .imageBlock {
display: inline-block;
}
.imageContainer .imageBlock .image {
display: inline-block;
width: 400px;
height: 300px;
background-color: darkred;
}
.imageContainer .buttonBlock {
display: inline-block;
text-align: center;
}
.imageContainer .buttonBlock .button {
display: inline-block;
width: 300px;
margin: 10px 50px; /* simple way to center it */
height: 100px;
background-color: cyan;
}
you can test it on https://jsfiddle.net/q10fbesm/
edit: if you need a 2 line grid, simply put a container arround this html, style it with max-widht: 801px;
I've created 3 div tags according to the grid rules
<div class="row">
<div class="col-md-3" style=" border:1px solid;"><uc1:ucretsizilan runat="server" ID="ucretsizilan" /></div>
<div class="col-md-9" style=" border:1px solid red;"><uc1:seriVitrin runat="server" ID="seriVitrin" /></div>
<div class="col-md-3" style=" border:1px solid blue;"><uc1:nobetciBox runat="server" ID="nobetciBox" /></div>
</div>
Div = Black
Div = Red
Div = Blue
Ranking musn't change and i would like to remove space between black and blue.
How can I remove it, So that black and blue divs should stand one under the other ?
<div class="left">
<div class="col-md-3" style=" border:1px solid;"><uc1:ucretsizilan runat="server" ID="ucretsizilan" /></div>
<div class="col-md-3" style=" border:1px solid blue;"><uc1:nobetciBox runat="server" ID="nobetciBox" /></div>
</div>
<div class = "right> <div class="col-md-9" style=" border:1px solid red;"><uc1:seriVitrin runat="server" ID="seriVitrin" /></div> </div>
Or you can do this, this will remove space in bootstrap grid.
Example
HTML
<div class="no-pad>
<div class="col-lg-12>
/*--Content--*/
</div>
</div>
CSS
.no-pad [class*="col-"] {
padding:0;
margin: 0;
}
You can acomplish this behavior with only 2 columns: left column (col-xs-3) and right column (col-xs-9).
Then you create 2 additional div elements in the left column, one for each element. Since the div is a block element, you will end up with one div bellow the other.
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="row">
<div class="col-xs-3">
<div style=" border:1px solid black;">
black
</div>
<div style="border:1px solid blue;">
blue
</div>
</div>
<div class="col-xs-9" style="border:1px solid red;">
red
</div>
</div>
Since you don't want to change the order of the elements, you could try something like the snippet bellow.
However i would recommend you reading more about the grid system. You're supposed to have a maximum of 12 columns in every row.
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="row">
<div class="col-xs-3" style="border: 1px solid #000">
black
</div>
<div class="col-xs-9 pull-right" style="border: 1px solid #f00">
<div>red</div>
<div>red</div>
<div>red</div>
<div>red</div>
<div>red</div>
<div>red</div>
<div>red</div>
<div>red</div>
</div>
<div class="col-xs-3" style="border: 1px solid #00f">
blue
</div>
</div>
According with the grid that provided bootstrap-grid you have to made some modifications like this:
<div class="row">
<div class="col-md-3" style=" border:1px solid;">
<uc1:ucretsizilan runat="server" ID="ucretsizilan" />
<div class="row">
<div class="col-md-12" style=" border:1px solid blue;"><uc1:nobetciBox runat="server" ID="nobetciBox" /></div>
</div>
</div>
<div class="col-md-9" style=" border:1px solid red;"><uc1:seriVitrin runat="server" ID="seriVitrin" /></div>
</div>
Hello I'm new to html & css and I have a question. I'm using the following code to set some images with text above and under it as you can see here:
http://jsfiddle.net/thespacebean/xGqDE/
But now i'm trying to re-use that code in another box but the text isn't where it needs to be. here a use another type of box:
css:
#content{
margin: 30px 0;
background: white;
padding: 20px;
clear: both;
box-shadow: 0px 1px 1px #999;
}
html:
<div id="content">
<h2>Kleding</h2>
<div id="navbanner">
<div id="nav2">
<ul>
<li>Baby</li>
<li>Peuter</li>
<li>Kleuter</li>
</ul>
</div>
</div>
<div id="img">
<img src="../images/winkelwagen.jpg">
</div>
<h3>Baby</h3>
<div class="section">
Pika deken
<img src="../images/baby1.jpg" />
€20
</div>
<div class="section">
School outfit
<img src="../images/boy1.jpg" />
€140
</div>
<div class="section">
Bussines girl
<img src="../images/girl2.jpg" />
€250
</div>
<div class="section">
Summer
<img src="../images/girl1.jpg" />
€99.99
</div>
</div>
And thats why everything is floating left. Can someone get my images and the text under and above centerd without moving the navbar and Baby title? Thanks in advance !
the fiddle example has
text-align: center;
in the CSS put you don't appear to have this in your CSS so the text will be on the left;