my webpage
In the link above I have a list where I specify cities of service, and right now the list seems to be condensed. I tried to stretch it out using the font-stretch function using in-line CSS but it doesn't seem to be working. Are there any other ideas anyone has?
<style>
h2 {
padding-top: 50px;
padding-bottom: 50px;
text-align: center;
margin-bottom: 30px;
font-size:50px;
}
h3{
font-size:45px;
}
li{
margin-bottom: 40px;
font-stretch: 100%;
}
</style>
<h1 style='text-align:center' class='tjs-h2'></h1>
<div class="maps container-fluid" style="align-items: center; background: #F3F3F3">
<div class="row">
<div class="col">
<h2 class="font-2">Serving the Greater Twin Cities Area </h2>
</div>
</div>
<div class="row">
<div class="col-md-6 col-12 d-flex justify-content-center pb-4">
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d90327.44687139073!2d-93.2367809086671!3d44.96942454616932!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x87f629fd5bb7538f%3A0xd070c186a8aea420!2sTwin%20Cities%2C%20MN!5e0!3m2!1sen!2sus!4v1639701112792!5m2!1sen!2sus" width="600" height="600" style="border:0;" allowfullscreen="" loading="lazy">
</iframe>
</div>
<div class="col-md-2 col-sm-4 col-
</div>
<div class="col-md-2 col-sm-4 col-12 d-flex justify-content-center">
<h3>
<ul class="cities">
<li >Minneapolis and suburbs 10 minutes in any direction</li>
<li >St. Paul and suburbs 10 minutes in any direction</li>
</ul>
</h3>
</div>
<div class="col-md-2 col-sm-4 col-
</div>
You could widen the div instead. I tried out the code on my computer. The website displayed a bit differently, but this seemed to help.
div#navigation {width: XXXpx; }
<div class="col-md-2 col-sm-4 col-12 d-flex justify-content-center" id="navigation">
Related
I'm working with bootstrap 4 and following codes,
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/css/bootstrap.css">
<div class="card-header rounded-0 border border-dark">
<div class="row">
<div class="col-12 col-md-4 ">
<img src="{{asset('images/usa.jpg')}}" alt="..." class="rounded-circle">
</div>
<div class="col-12 col-md-8 ">
<p>This is not a game fgfhg dfghdh dhdhdf dfgdhfhg dfdfhfh dfhdfhdf dfhdfh</p>
</div>
</div>
</div>
I need display above two div elements in the same row on large screen and need separate two rows (image is above and paragraph is under the image) when it is displaying mobile device. I use following col-12 col-sm-8 col-md-6 col-lg-4 col-xl-3 item codes in side to the div but not success.
how could I manage this problem?
View in Full Page , You will get it
body {
padding-top: 40px;
}
.col-sm-6 {
background: #ccc;
}
.other {
background: #a4a4a4;
}
.p {
text-align: center;
padding-top: 120px;
}
.p a {
text-decoration: underline;
color: blue;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row">
<div class="col-sm-6">
<h1>Bootstrap Grid Demo</h1>
</div>
<div class="col-sm-6 other">
<h1>2 Columns</h1>
</div>
</div>
</div>
<p class="p">Demo by Jabir Sayed. See article.</p>
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 have a below HTML code in which the images are purely responsive.
<div class="flexslider js-fullheight">
<ul class="slides">
<li style="background-image: url(images/slide_1.jpg); width:100%;" border="0" alt="Null">
<div class="overlay-gradient"></div>
<div class="container">
<div class="col-md-10 col-md-offset-1 text-center js-fullheight slider-text">
<div class="slider-text-inner">
<h2>Start Your Startup With This Template</h2>
<p>Get started</p>
</div>
</div>
</div>
</li>
<li style="background-image: url(images/slide_3.jpg);">
<div class="container">
<div class="col-md-10 col-md-offset-1 text-center js-fullheight slider-text">
<div class="slider-text-inner">
<h2>Take Your Business To The Next Level</h2>
<p>Get started</p>
</div>
</div>
</div>
</li>
<li style="background-image: url(images/slide_2.jpg);">
<div class="container">
<div class="col-md-10 col-md-offset-1 text-center js-fullheight slider-text">
<div class="slider-text-inner">
<h2>We Think Different That Others Can't</h2>
<p>Get started</p>
</div>
</div>
</div>
</li>
</ul>
</div>
In this, the slide_1.jpg image is responsive. What I want is, I want to replace this image with my actual Image.
I tried changing the image by giving width:100% but the Image was still getting stretched. Any idea, how to make that image responsive.
Update
and the css is below
#fh5co-hero .flexslider .slider-text > .slider-text-inner {
display: table-cell;
vertical-align: middle;
min-height: 700px;
}
#fh5co-hero .flexslider .slider-text > .slider-text-inner h2 {
font-size: 70px;
font-weight: 400;
color: #fff;
}
#media screen and (max-width: 768px) {
#fh5co-hero .flexslider .slider-text > .slider-text-inner h2 {
font-size: 40px;
}
}
#fh5co-hero .flexslider .slider-text > .slider-text-inner .fh5co-lead {
font-size: 20px;
color: #fff;
}
<div class="flexslider js-fullheight">
<ul class="slides">
<li style="background-image: url(/images/slide_1.jpg);">
<div class="overlay-gradient"></div>
<div class="container">
<div class="col-md-10 col-md-offset-1 text-center js-fullheight slider-text">
<div class="slider-text-inner">
<h2>Start Your Startup With This Template</h2>
<!--<p>Get started</p>-->
</div>
</div>
</div>
</li>
<li style="background-image: url(images/slide_3.jpg);">
<div class="container">
<div class="col-md-10 col-md-offset-1 text-center js-fullheight slider-text">
<div class="slider-text-inner">
<h2>Take Your Business To The Next Level</h2>
<!--<p>Get started</p>-->
</div>
</div>
</div>
</li>
<li style="background-image: url(images/slide_2.jpg);">
<div class="container">
<div class="col-md-10 col-md-offset-1 text-center js-fullheight slider-text">
<div class="slider-text-inner">
<h2>We Think Different That Others Can't</h2>
<!--<p>Get started</p>-->
</div>
</div>
</div>
</li>
</ul>
</div>
If you change only the width to 100% it will stretch the image inside of it. Try adding height:auto; to the inline CSS in order for the image to scale correctly.
If that doesn't work, try replacing your background-image property with:
background: url(images/slide_1.jpg) no-repeat center center;
background-size: cover;
I want to align different size images to the bottom of a div but the images are also in their own divs so the other answers don't work.
I have the following HTML:
<div class="row footer-links">
<section>
<div class="col-md-4">
<p>
Proudly presented and sponsored by
</p>
</div>
<div class="col-md-8 col-xs-12 logo-links">
<div class="row logo-bottom">
<div class="col-md-2 col-xs-12 logo-border col-md-offset-1">
<img id="rasv" class="center-block" src="img/rasv.png" alt="RASV logo">
</div>
<div class="col-md-2 col-xs-12 logo-border">
<img class="center-block" src="img/victoria-farmers.png" alt="Victoria Farmers logo">
</div>
<div class="col-md-2 col-xs-12 logo-border">
<img class="center-block" src="img/anz.png" alt="ANZ logo">
</div>
<div class="col-md-2 col-xs-12 logo-border">
<img class="center-block" src="img/pwc.png" alt="PWC logo">
</div>
<div class="col-md-2 col-xs-12 logo-border">
<img class="center-block" src="img/vac.png" alt="VAC logo">
</div>
</div>
</div>
</section>
</div>
I used the following CSS:
.logo-border {
border-right: 1px solid #d1d3d4;
height: 54px;
vertical-align: bottom;
display: table-cell;
}
Here is a Code Pen for more information.
You were really close.
The reason it wasn't working was because the columns are floated. Due to this, the elements weren't behaving like a table-cell, therefore rendering vertical-align: bottom useless.
You could simply add float: none and it will work as desired.
Updated Example
.logo-bottom .logo-border {
border-right: 1px solid #d1d3d4;
height: 54px;
vertical-align: bottom;
display: table-cell;
float: none;
}
As a side note, I increased the specificity of the selector .logo-border to .logo-bottom .logo-border so that float: left was overridden.