I have the following jumbotron:
Created via:
<div class="col-sm-2">
<div class="jumbotron jumbotron-fluid top-space">
<div class="container">
<h1 class="display-6">Initiatives</h1>
<p class="lead">The other good stuff.</p>
<ul>
<li>
Start an Initiative »</li>
<li>
More Information »</li>
</ul>
</div>
</div>
<div class="jumbotron jumbotron-fluid top-space">
<div class="container">
<h1 class="display-6">News</h1>
<p class="lead">Our Search Tool. <br> Love at first, second, third, fourth, fifth, and sixth sight.</p>
Try it out »
</div>
</div>
</div>
I want an icon on the red square. How can I add and align it to my h1, display-6?
.col-sm-2 > div:first-child .display-6::after{
content: "" ;
width: 40px;
height: 40px;
background-color: red;
display: block;
margin-left: 20px;
}
.col-sm-2 > div:first-child .display-6{
display: inline-flex;
}
<div class="col-sm-2">
<div class="jumbotron jumbotron-fluid top-space">
<div class="container">
<h1 class="display-6">Initiatives</h1>
<p class="lead">The other good stuff.</p>
<ul>
<li>
Start an Initiative »</li>
<li>
More Information »</li>
</ul>
</div>
</div>
<div class="jumbotron jumbotron-fluid top-space">
<div class="container">
<h1 class="display-6">News</h1>
<p class="lead">Our Search Tool. <br> Love at first, second, third, fourth, fifth, and sixth sight.</p>
Try it out »
</div>
</div>
</div>
Related
I have added two columns within the container but would like the .company and .copyright text at the bottom left of the footer in the column. The Follow Us heading should be on the right with the .justify-text underneath it followed by social media elements. Thanks!
.footer {
background-color: $pink;
padding-top: 20px;
text-align: left;
color: $white;
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
<div class="footer">
<div class="container">
<div class="row justify-content-between">
<div class="col-sm-7">
<h5>Programme</h5>
<p class="company">This is text.</p>
<p class="copyright">© 2023 Blah Blah Blah</p>
</div>
<div class="col-sm-4">
<h5>Follow Us</h5>
<p class="justify-text">Join our socials and stay tuned.</p>
</div>
</div>
</div>
</div>
Try the following. The description wasn't clear to me, so let me know if you want anything changed.
.footer {
background-color: $pink;
padding-top: 20px;
text-align: left;
color: $white;
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
<div class="footer">
<div class="container">
<div class="row justify-content-between">
<div class="col-sm-7">
<h5>Programme</h5>
<p class="company pt-5">This is text.</p>
<p class="copyright">© 2023 Blah Blah Blah</p>
</div>
<div class="col-sm-4 text-center">
<h5>Follow Us</h5>
<p class="justify-text pt-5">Join our socials and stay tuned.</p>
<ul class="list-unstyled p-0 d-flex justify-content-around">
<li>Icon 1</li>
<li>Icon 2</li>
<li>Icon 3</li>
<li>Icon 4</li>
</ul>
</div>
</div>
</div>
</div>
I have a nested list and each list item works like a table row (using flex). The nested items i.e. rows are indented from the left so the width is different at different levels. It currently has tree levels but this may change at some point.
I want to:
Align all "columns" other than first one, on a single verticle line, and
Apply % widths on the columns excepts first one.
So far, I have only been able to achieve the alignment part using fixed pixel widths. But I really need to set the column .second and .third width based on % of top-most ul, otherwise the columns would not align perfectly. Fixed pixel widths aren't good for responsiveness.
I have two options in my mind:
Removing the left margin on list items and adding left-margin on .first. But this would mean manually adding borders on each "cell" and also some other code duplication.
Maybe there is a way to use CSS calc() somehow. With recursively rendered list, this seems quite complicated though. I am using this markup in a React.js component and I need to pass the level as prop and then use calc() in inline style. Doesn't look clean.
ul {
list-style-type: none;
padding: 0;
margin-left: 2rem;
}
.row {
display: flex;
border: 1px solid gray;
}
.first {
flex-grow: 1;
}
.second,
.third {
width: 200px;
}
<ul>
<li>
<div class="row">
<div class="first">
Title
</div>
<div class="second">
Description
</div>
<div class="third">
Date
</div>
</div>
<ul>
<li>
<div class="row">
<div class="first">
Title
</div>
<div class="second">
Description
</div>
<div class="third">
Date
</div>
</div>
</li>
<li>
<div class="row">
<div class="first">
Title
</div>
<div class="second">
Description
</div>
<div class="third">
Date
</div>
</div>
<ul>
<li>
<div class="row">
<div class="first">
Title
</div>
<div class="second">
Description
</div>
<div class="third">
Date
</div>
</div>
</li>
<li>
<div class="row">
<div class="first">
Title
</div>
<div class="second">
Description
</div>
<div class="third">
Date
</div>
</div>
</li>
</ul>
</li>
<li>
<div class="row">
<div class="first">
Title
</div>
<div class="second">
Description
</div>
<div class="third">
Date
</div>
</div>
</li>
</ul>
</li>
<li>
<div class="row">
<div class="first">
Title
</div>
<div class="second">
Description
</div>
<div class="third">
Date
</div>
</div>
</li>
<li>
<div class="row">
<div class="first">
Title
</div>
<div class="second">
Description
</div>
<div class="third">
Date
</div>
</div>
</li>
</ul>
I found a simple workaround. For my use case, simply setting the width of the columns to percentage of viewport does the job. i.e. width: 25vw
Now looks nice on both narrow and wider screens. Also quite happy with the browser support: https://caniuse.com/viewport-units
Please compare with above snippet on "Full page" view to see column widths are responsive on this one and are not responsive in the question snippet.
ul {
list-style-type: none;
padding: 0;
margin-left: 2rem;
}
.row {
display: flex;
border: 1px solid gray;
}
.first {
flex-grow: 1;
}
.second,
.third {
width: 25vw;
}
<ul>
<li>
<div class="row">
<div class="first">
Title
</div>
<div class="second">
Description
</div>
<div class="third">
Date
</div>
</div>
<ul>
<li>
<div class="row">
<div class="first">
Title
</div>
<div class="second">
Description
</div>
<div class="third">
Date
</div>
</div>
</li>
<li>
<div class="row">
<div class="first">
Title
</div>
<div class="second">
Description
</div>
<div class="third">
Date
</div>
</div>
<ul>
<li>
<div class="row">
<div class="first">
Title
</div>
<div class="second">
Description
</div>
<div class="third">
Date
</div>
</div>
</li>
<li>
<div class="row">
<div class="first">
Title
</div>
<div class="second">
Description
</div>
<div class="third">
Date
</div>
</div>
</li>
</ul>
</li>
<li>
<div class="row">
<div class="first">
Title
</div>
<div class="second">
Description
</div>
<div class="third">
Date
</div>
</div>
</li>
</ul>
</li>
<li>
<div class="row">
<div class="first">
Title
</div>
<div class="second">
Description
</div>
<div class="third">
Date
</div>
</div>
</li>
<li>
<div class="row">
<div class="first">
Title
</div>
<div class="second">
Description
</div>
<div class="third">
Date
</div>
</div>
</li>
</ul>
I have 3 div with height : 100vh
But with the responsive my imgs overflow. You can check that on the image.
Sorry for my poor english !
This is the html :
<section id="services" class="container content-section text-center">
<div class="col-lg-8 col-lg-offset-2">
<div class="row">
<div class="col-lg-6">
<h2>Services </h2>
<ul>
<li>Covoiturages </li>
<li>Food </li>
<li>Hébergement </li>
</ul>
</div>
<div class="col-lg-6">
<img src="img/mockup-iphone.png" alt="mockup iphone" class="img-responsive"/>
</div>
</div>
</section> <!-- close about -->
<section id="communities" class="container content-section text-center">
<div class="row">
<div class="col-lg-6">
<img src="img/mockup-iphone.png" alt="mockup iphone" class="img-responsive"/>
</div>
<div class="col-lg-6">
<h2>Communities </h2>
<ul>
<li>Texte </li>
<li>Texte </li>
<li>Texte </li>
</ul>
</div>
</div>
</section>
And the css :
#services{
width: 100%;
height:100vh;
background-color: #62b030;
}
#services img{
height:90%;
}
Try to smaller the img to height: 80vh, or calc image max-height: calc(100vh-100px); overflow:hidden for #services might work, too. YOu can also add width, adn height to your img-responsive or your img class.
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'm making a menu but my "Read More"s are not aligned on the same line
https://i.gyazo.com/3a9dd4d8e497b3772110edd4ac35fa76.png
Here's the HTML code for it
<div class="home-menu parallax" data-stellar-background-ratio="0.5">
<div class="container no-padding">
<div class="hm-info">
<div class="row">
<div class="col-md-4">
<h3><span>Today Deals</span>Breakfast</h3>
<h4>Pancakes with Seasonal Fruit</h4>
<div class="menu-wrapper">
<p>Maple Syrup & Icecream</p>
<span class="price">$13.95</span>
<div class="dotted-bg"></div>
</div>
<h4>Pancakes with Maple Syrup</h4>
<div class="menu-wrapper">
<p>And Bacon</p>
<span class="price">$15.95</span>
<div class="dotted-bg"></div>
</div>
<h4>Smoked Salmon Omelette</h4>
<div class="menu-wrapper">
<p>with Onion, Capers and Toast</p>
<span class="price">$16.95</span>
<div class="dotted-bg"></div>
</div>
<h4>French Toast</h4>
<div class="menu-wrapper">
<p>with Maple Syrup</p>
<span class="price">$15.95</span>
<div class="dotted-bg"></div>
</div>
<div class="menureadmore">
Read More
</div>
</div>
<div class="col-md-4">
<h3><span>Today Deals</span>Coffee</h3>
<div class="menu-wrapper">
<span class="price">$12.00</span>
<h4>Cappucino</h4>
</div>
<div class="menu-wrapper">
<span class="price">$3.95</span>
<h4>Flat White</h4>
</div>
<div class="menu-wrapper">
<span class="price">$4.20</span>
<h4>Latte</h4>
</div>
<div class="menu-wrapper">
<span class="price">$4.80</span>
<h4>Chai Latte</h4>
</div>
<div class="menu-wrapper">
<span class="price">$4.40</span>
<h4>Hot Chocolate</h4>
</div>
<div class="menu-wrapper">
<span class="price">$4.55</span>
<h4>Hot Mocha</h4>
</div>
<div class="menureadmore" >
Read More
</div>
</div>
<div class="col-md-4">
<h3><span>Today Deals</span>Lunch</h3>
<h4>Beef Lasagne</h4>
<div class="menu-wrapper">
<p>With Salad</p>
<span class="price">$16.95</span>
<div class="dotted-bg"></div>
</div>
<h4>Fabulous Thai Chicken Patties</h4>
<div class="menu-wrapper">
<p>with Salad (Gluten Free)</p>
<span class="price">$15.95</span>
<div class="dotted-bg"></div>
</div>
<h4>Sensational Fillet Steak</h4>
<div class="menu-wrapper">
<p>Salad & Chips.</p>
<span class="price">$21.95</span>
<div class="dotted-bg"></div>
</div>
<h4>Roasted Vegetable Rosti Stack</h4>
<div class="menu-wrapper">
<p>(Gluten Free) with Salad</p>
<span class="price">$16.95</span>
<div class="dotted-bg"></div>
</div>
<div class="menureadmore">
Read More
</div>
</div>
</div>
</div>
</div>
</div>
And CSS
.menu-wrapper .price
{
float: right;
padding-left: 10px;
line-height: 19.8px;
margin: 5px 0px;
background: #f7f3e8;
font-weight: 700;
font-size: 15px;
color: #d80702;
font-family: Lato;
position: relative;
z-index: 11;
}
.menureadmore{
text-align:center;
font-weight:700;
font-size: 16px;
}
How do i align those "Read More"s so they are all aligned vertically?
Thanks
Bootstrap grid system is for row layouts and so the row that contains read more , that row should be enclosed in a div with class of row and then you can give them cols and they will align perfectly
give position fix with bottom 0 or whatever you want (can also try with potion absolute)