I have an issue with text I need to separate text and money part and also have to align text in such a way that whenever I view in smaller text the money part to to next line
.adventure-card {
display:flex;
flex-wrap: wrap;
width: 100%;
height:auto;
justify-content:center;
align-items: center;
border-radius: 10px 10px 10px 10px;
position:relative;
line-height: 1.7;
}
.adventure-card img {
/* TODO: MODULE_ADVENTURES_GRID */
/* 1. Fill in the required properties. */
width: 100%;
height: 25vh;
border-radius: 10px 10px 0px 0px;
}
<div class="container">
<div class="content">
<!-- TODO: MODULE_ADVENTURES_GRID -->
<!-- 1. Create the grid of adventures by adding child elements as required. -->
<div class = "row">
<div class="col-6 col-sm-6 col-lg-3 mb-4 d-flex align-items-stretch px-md-4">
<a href = "resort/index.html">
<div class = "adventure-card border bg-light">
<div class = "adventure-card img-responsive">
<img src ="/assets/adventures/resort.jpg" alt = "tower.jpg">
</div>
<p>Resort</p>
<p>₹1,200 </p>
</div>
</a>
</div>
</div>
<div class="col-6 col-sm-6 col-lg-3 mb-4 d-flex align-items-stretch px-md-4">
<div class = "adventure-card border bg-light">
<div class = "adventure-card img-responsive">
<img src ="/assets/adventures/mount.jpg" alt = "Skiing.jpg">
</div>
<p> Skiing</p>
<p>₹1,900 </p>
</div>
</div>
</div>
<div class = "row">
<div class="col-6 col-sm-6 col-lg-3 mb-4 d-flex align-items-stretch px-md-4">
<div class = "adventure-card border bg-light">
<div class = "adventure-card img-responsive">
<img src ="/assets/adventures/canopy.jpg" alt = "tower.jpg">
</div>
<p>Canopy</p>
<p>₹1,800 </p>
</div>
</div>
<div class="col-6 col-sm-6 col-lg-3 mb-4 d-flex align-items-stretch px-md-4">
<div class = "adventure-card border bg-light">
<div class = "adventure-card img-responsive">
<img src ="/assets/adventures/beachside.jpg" alt = "canopy.jpg">
</div>
<p mb-0>Beach Getaway</p>
<p>₹2,200 </p>
</div>
</div>
</div>
</div>
</div>
Could anyone help me out? The text and money part is centered which is as expected but unable to separate text and money part
Please refer to my code which is added below, is there any doubt the please let me know.
<div class="adventure-card border bg-light">
<div class="adventure-card img-responsive">
<img src="/assets/adventures/resort.jpg" alt="tower.jpg" />
</div>
<div class="text-center">
<h5 mb-0>resort</h5>
<span>₹1,200</span>
</div>
</div>
Use this:
<p style="padding-left:20px">₹1,200 </p>
add inline CSS with you currency P tag.
Add "flex-direction: column;" to your CSS:
.adventure-card {
display:flex;
flex-wrap: wrap;
width: 100%;
height:auto;
justify-content:center;
align-items: center;
border-radius: 10px 10px 10px 10px;
position:relative;
line-height: 1.7;
flex-direction: column;
}
Related
<div class="container-fluid" >
<section id="current-weather">
<div class="card text-center text-white bg-dark mb-3 " style="width: 60%;">
<div class="card-header">
weather
</div>
<div class="card-body">
<h2>{{location}}</h2>
<hr style="width: 30%;height: 2px; margin: 20px auto 20px auto;color: black;">
<h5 class="card-title"><i class="wi wi-owm-{{weather_current['weather'][0]['id']}}" style="font-size: 2.2em;"></i>{{weather_current['temp']}}°C</h5>
</div>
</div>
</section>
</div>
I have a problem with alignment text and icon. Look at screenshot
I've already tried to use vertical-align: middle and baseline. Maybe somebody can resolve my problem.
Here I have aligned it vertically and horizontally.
.container-fluid{
margin: 0;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
width: 60%;
}
<div class="container-fluid" >
<section id="current-weather">
<div class="card text-center text-white bg-dark mb-3">
<div class="card-header">
weather
</div>
<div class="card-body">
<h2>{{location}}</h2>
<hr style="width: 30%;height: 2px; margin: 20px auto 20px auto;color: black;">
<h5 class="card-title"><i class="wi wi-owm-{{weather_current['weather'][0]['id']}}" style="font-size: 2.2em;"></i>{{weather_current['temp']}}°C</h5>
</div>
</div>
</section>
</div>
Thanks and best regards!
I really appreciate your work, but I was asking to align icon and text in one line not the whole container on web page.
Check this image
Finally I coped with that. Here is my solution:
.align-inline {
display: flex;
align-items: center;
justify-content: center;
}
<div class="container-fluid" >
<section id="current-weather">
<div class="card text-center text-white bg-dark mb-3">
<div class="card-header">
weather
</div>
<div class="card-body">
<h2>{{location}}</h2>
<hr style="width: 30%;height: 2px; margin: 20px auto 20px auto;color: black;">
<h5 class="card-title align-inline"><i class="wi wi-owm-{{weather_current['weather'][0]['id']}}" style="font-size: 2.2em;"></i>{{weather_current['temp']}}°C</h5>
</div>
</div>
</section>
</div>
This is how result looks like
I'm trying to create three vertical dots and align the bottom left of my container with css and bootstrap 5. exactly like the pic below:
my HTML and CSS:
.dot {
border-radius: 50%;
height: 12px;
width: 12px;
background: linear-gradient(90deg, #76b3fe, #8680e4);
}
.selected-dot {
height: 20px;
width: 20px;
background: #97cdfe;
}
<section class="slider-bg-1 d-flex align-items-end">
<div class="container">
<div class="row justify-content-center">
<div class="col-lg-5 d-flex flex-column justify-content-center pt-4 pt-lg-0 order-2 order-lg-1">
<h1 class="head-font-size">Choose a powerful design for your Start-up</h1>
<h6 claas="caption-text-color">Get your freebie template now</h6>
<div class="d-lg-flex">
<div class="mt-5"><button class="my-btn" type="submit">Discover</button></div>
</div>
</div>
<div class="col-lg-5 col-md-12 col-sm-12 order-1 order-lg-2 d-flex justify-content-center">
<img src="Assets/home-slider/slider-m-1.png" class="img-fluid img-slider" alt="">
</div>
</div>
</div>
<span class="dot selected-dot"></span>
<span class="dot"></span>
<span class="dot"></span>
</section>
this is my output
how can i align the vertically and move them to bottom left of container? because when i use div for wrapping they disappear
1st: wrap the dots in a container. I used a section with the class: .dot-wrapper.
2nd: give the wrapper a width: min-content;. With that, it will only be as wide as the seclected dot.
3rd: to cenetr the dots, give them a margin left and right of auto;
.dot {
border-radius: 50%;
height: 12px;
width: 12px;
background: linear-gradient(90deg, #76b3fe, #8680e4);
margin: 5px auto;
}
.selected-dot {
height: 20px;
width: 20px;
background: #97cdfe;
}
.dot-wrapper {
width: min-content;
}
<section class="slider-bg-1 d-flex align-items-end">
<div class="container">
<div class="row justify-content-center">
<div class="col-lg-5 d-flex flex-column justify-content-center pt-4 pt-lg-0 order-2 order-lg-1">
<h1 class="head-font-size">Choose a powerful design for your Start-up</h1>
<h6 claas="caption-text-color">Get your freebie template now</h6>
<div class="d-lg-flex">
<div class="mt-5"><button class="my-btn" type="submit">Discover</button></div>
</div>
</div>
<div class="col-lg-5 col-md-12 col-sm-12 order-1 order-lg-2 d-flex justify-content-center">
<img src="Assets/home-slider/slider-m-1.png" class="img-fluid img-slider" alt="">
</div>
</div>
</div>
<section class="dot-wrapper">
<div class="dot selected-dot"></div>
<div class="dot"></div>
<div class="dot"></div>
</section>
</section>
it's quite easy, you can wrap the dots with a div container like this
<!--Column Dots -->
<div class="dot-container">
<span class="dot selected-dot"></span>
<span class="dot"></span>
<span class="dot"></span>
</div>
and style the container as below
.dot-container{
width: 15px;
display: flex;
flex-direction:column;
align-items:center;
}
and for better styling. give dot class some amrgin like margin: 3px 0;
here is a codpen : https://codepen.io/shammlo/pen/QWKggNX?editors=1100
I am doing a simple page with a bootstrap grid and I am having some problems with placing the middle row occupying the full height in the middle.
These are the 3 rows: page
I want to place the row with the logo in the middle, but I am having problems with it. I placed height: 100%;, height: auto;. I even placed the container height to 100% and auto and nothing works!
I think there is a concept about bootstrap heigh that I am missing, because its the heigh that I have problems
html:
<div class="container-fluid">
<div class="row">
<div class="col-md-1 col-2">
<img id="menuIcon" (click)="toggleRightSidenav()" onmouseover="this.src='../../../assets/Images/generic/menuIcon_hover.png'" src="/assets/Images/generic/menuIcon.png" onmouseout="this.src='/assets/Images/generic/menuIcon.png'">
</div>
<div class="col-md-10 col-8">
</div>
<div class="col-md-1 col-2">
<img id="helpIcon" routerLink="/guide" onmouseover="this.src='../../../assets/Images/home/helpIconHover.png'" src="/assets/Images/home/helpIcon.png" onmouseout="this.src='/assets/Images/home/helpIcon.png'">
</div>
</div>
<div class="row row align-items-center mh-100" >
<div class= "col-md-12">
<img id="logo" src="/assets/Images/home/Logo.png">
</div>
</div>
<div class="row align-items-center justify-content-around fixed-bottom">
<div class="col-md-2 col-sm-2">
<img id="addButton" routerLink="/addPlayer" onmouseover="this.src='../../../assets/Images/generic/addIcon_hover.png'" src="../../../assets/Images/generic/addIcon.png" onmouseout="this.src='/assets/Images/generic/addIcon.png'" />
</div>
<div class="col-md-2 col-sm-2">
<p>Players Waiting: {{playerWaiting}} </p>
</div>
<div class="col-md-2 col-sm-2">
<p>Listed Players: {{playersListed}}</p>
</div>
<div class="col-md-2 col-sm-2">
<img id="searchButton" routerLink="/search" onmouseover="this.src='../../../assets/Images/generic/searchIcon_hover.png'" src="../../../assets/Images/generic/searchIcon.png" onmouseout="this.src='/assets/Images/generic/searchIcon.png'" />
</div>
</div>
</div>
css:
div{
border: yellow 1px solid;
}
#menuIcon{
width: 100%;
height: auto;
}
#helpIcon{
width: 100%;
height: auto;
}
#addButton{
width: 100%;
height: auto;
max-width: 127px;
}
#searchButton{
width: 100%;
height: auto;
max-width: 127px;
}
https://www.codeply.com/p/Xd0xi5hFNc
Couple of things.
To be able to fill several rows, you'd need a height for the container div.
Current HTML
<div class="container-fluid">
Update as
<div class="container-fluid d-flex vh-100 flex-column">
Now you can easily make your middle div fill the remaining gap by adding a fill-height class.
Current HTML
<div class="row row align-items-center mh-100" >
Update as
<div class="row row align-items-center fill-height">
Add this to your css
.fill-height {
flex: 1;
}
.fixed-bottom {
position: sticky;
}
jsFiddle
I know this may be easy for most of you but I'm stuck with this issue.
I need to implement this design:
Layout Design
... and for now I've got this Current layout.The general structure is a row with col-3 and col-9, this col-9 has two rows, one for name and job title, and the other one for statistics in the page (col-3 for each of them). I need them to fill the height of his parent, but height property doesn't work. Which could be a clean solution? Thanks a lot.
Here is the structure, it's pretty simple tho.
<div class="row profile-header">
<div class="col-md-3 user-image text-center">
<img ...>
<span>..</span>
</div>
<div class="col-md-9">
<div class="row">
<div class="col-md-12">
<h2 class="text-white">...</h2>
<h4 class="text-muted">...</h4>
</div>
</div>
<div class="row text-center">
<div class="col-md-3 stat">
<h3>...</h3>
<small>...</small>
</div>
...
</div>
</div>
Use position: relative on the parent and then position:absolute; bottom: 0; on the children.
Nice explanation there.
Flexbox would be my recommendation although CSS tables might be an option too.
Codepen Demo
Snippet Demo (view Fullscreen)
.user-image {
background: pink;
}
.user-image img {
display: block;
margin: auto;
}
.profile-header {
display: flex;
}
.right {
background: #c0ffee;
display: flex;
flex-direction: column;
}
.stats {
margin-top: auto;
}
.stat {
background: lightgrey;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="row profile-header">
<div class="col-md-3 user-image text-center">
<img src="http://www.fillmurray.com/300/200" alt="" />
<span>User Ranking</span>
</div>
<div class="col-md-9 right">
<div class="row">
<div class="col-md-12">
<h2 class="text-white">User Name</h2>
<h4 class="text-muted">reference</h4>
</div>
</div>
<div class="row text-center stats">
<div class="col-md-3 stat">
<h3>Some Stat</h3>
<small>Some Stat</small>
</div>
<div class="col-md-3 stat">
<h3>Some Stat</h3>
<small>Some Stat</small>
</div>
<div class="col-md-3 stat">
<h3>Some Stat</h3>
<small>Some Stat</small>
</div>
<div class="col-md-3 stat">
<h3>Some Stat</h3>
<small>Some Stat</small>
</div>
</div>
</div>
I want to align a image (logo)to the center (both horizontal and vertical)of the page ?
<ion-view hide-nav-bar="true">
<ion-content class="backgound-red ">
<section class = "home-container">
<div class="row icon-row">
<div class="col">
<h1 class="text-white text-center">My Application </h1>
<h4 class ="text-white text-center ">version 1.0.0</h4>
</div>
</div>
<div class="row row-center" >
<div class="col text-center" >
<img alt="Logo" height="100" src="img/logo.png" >
</div>
</div>
<div class="row icon-row">
<div class="col ">
<a class="text-white text-center" href="#" onclick="window.open('http://members.000webhost.com/login.php?'); return false;">
<h5 class ="text-white text-center ">access server</h5></a>
</div>
</div>
</section>
</ion-content>
the layout that I want, The Image should be align center automatically to the mobile screen.(tab, phone)
Try adding this CSS code, it will center the img both horizontally and vertically.
.home-container .row-center img {
position:absolute;
left: 0;
right: 0;
margin:0 auto;
top:50%;
transform:translateY(-50%);
}