I have two cards One holding an image an another holding some text. The issue is when I resize the window to test for responsiveness, There is a lot of card space under the image. Is there a way to set card{
height : img height + 10px
}
using CSS?
<div class="container">
<div class="row">
<div class="col-6 card">
<div class="card-body">
<img src="../assets/" class="card-img-top" alt="...">
</div>
</div>
<div class="col-1">
</div>
<div class="col-5 card">
<div class="card-body">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ultricies sem sit amet ex cursus, a dignissim dolor faucibus. Donec venenatis ut sem vel ultricies. Vestibulum vitae leo sed dolor convallis tincidunt. Integer non eleifend purus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nullam non nulla maximus, congue leo ut, eleifend lacus. Cras a.
</p>
</div>
</div>
</div>
</div>
Instead of placing card on the col class, nest the card inside the column like this:
<div class="container">
<div class="row">
<div class="col-6">
<div class="card">
<div class="card-body">
<img src="../assets/" class="card-img-top" alt="...">
</div>
</div>
</div>
<div class="col-1">
</div>
<div class="col-5">
<div class="card">
<div class="card-body">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ultricies sem sit amet ex cursus, a dignissim dolor faucibus. Donec venenatis ut sem vel ultricies. Vestibulum vitae leo sed dolor convallis tincidunt. Integer non eleifend purus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nullam non nulla maximus, congue leo ut, eleifend lacus. Cras a.
</p>
</div>
</div>
</div>
</div>
</div>
Related
I'm new to bootstrap still. From what I can tell in terms of layout, you can go with two main options: flex or grid. I'm currently attempting to go with the flexbox method, however I've encountered a problem with width.
My goal is to create three rows (the code I've attached only has 1 row for simplicity) that each have two equal width boxes per row. One box will have a picture and the other box will have text. I also want these boxes to be responsive, so that when the screen is small the boxes stack on top of each other (1 by 1). My only guess for the responsive part is that I use d-md-flex. Here's what I have so far:
<!--Row 1-->
<div class="d-flex flex-column mb-3 text-white">
<div class="d-flex flex-row justify-content-between align-items-center">
<div class="text-center"><img src="Photos/2019 SB Photos/Whole_Stadium.JPG" class="img-fluid w-100" alt="Responsive image"></div>
<div class="text-center"><p class="m-0">INTRODUCTION: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac rhoncus sem. Vestibulum consectetur
arcu est, at malesuada dolor posuere in. Cras tincidunt est eget ullamcorper mattis. Sed interdum ultricies venenatis. Nam
nunc neque, imperdiet vitae auctor sed, rhoncus quis enim. Maecenas sit amet purus aliquet, gravida purus sit amet, maximus
ligula. Praesent ut enim arcu. Nunc sit amet orci velit. Sed blandit consectetur suscipit. Vestibulum interdum pharetra
elit, nec pharetra arcu pretium quis. In vel sapien felis.</p></div>
</div>
My problem is that the image turns out really small and to the left, while the text takes up most of the space on the row. I've attempted playing around with flex-grow/shrink and flex-fill however nothing was changed. Any suggestions (on that and the responsiveness if its not too much to ask)?
.parent {
display : flex;
border : solid 1px;
}
.child {
flex : 1;
}
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<div>Using Flex</div>
<div class="parent">
<div class="child bg-info"><img src="Photos/2019 SB Photos/Whole_Stadium.JPG" alt="Responsive image"></div>
<div class="child bg-warning"><p class="m-0">INTRODUCTION: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac rhoncus sem. Vestibulum consectetur
arcu est, at malesuada dolor posuere in. Cras tincidunt est eget ullamcorper mattis. Sed interdum ultricies venenatis. Nam
nunc neque, imperdiet vitae auctor sed, rhoncus quis enim. Maecenas sit amet purus aliquet, gravida purus sit amet, maximus
ligula. Praesent ut enim arcu. Nunc sit amet orci velit. Sed blandit consectetur suscipit. Vestibulum interdum pharetra
elit, nec pharetra arcu pretium quis. In vel sapien felis.</p>
</div>
</div>
<div class="parent">
<div class="child bg-info"><img src="Photos/2019 SB Photos/Whole_Stadium.JPG" alt="Responsive image"></div>
<div class="child bg-warning"><p class="m-0">Row 2</p>
</div>
</div>
<div class="parent">
<div class="child bg-info"><img src="Photos/2019 SB Photos/Whole_Stadium.JPG" alt="Responsive image"></div>
<div class="child bg-warning"><p class="m-0">Row 3</p>
</div>
</div>
<div>Using Grid</div>
<div class="row border border-dark">
<div class="col-6 col-sm-6 col-md-6 col-lg-6 col-xl-6 bg-info"><img src="Photos/2019 SB Photos/Whole_Stadium.JPG" alt="Responsive image"></div>
<div class="col-6 col-sm-6 col-md-6 col-lg-6 col-xl-6 bg-warning"><p class="m-0">INTRODUCTION: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac rhoncus sem. Vestibulum consectetur
arcu est, at malesuada dolor posuere in. Cras tincidunt est eget ullamcorper mattis. Sed interdum ultricies venenatis. Nam
nunc neque, imperdiet vitae auctor sed, rhoncus quis enim. Maecenas sit amet purus aliquet, gravida purus sit amet, maximus
ligula. Praesent ut enim arcu. Nunc sit amet orci velit. Sed blandit consectetur suscipit. Vestibulum interdum pharetra
elit, nec pharetra arcu pretium quis. In vel sapien felis.</p>
</div>
</div>
<div class="row border border-dark">
<div class="col-6 col-sm-6 col-md-6 col-lg-6 col-xl-6 bg-info"><img src="Photos/2019 SB Photos/Whole_Stadium.JPG" alt="Responsive image"></div>
<div class="col-6 col-sm-6 col-md-6 col-lg-6 col-xl-6 bg-warning"><p class="m-0">Row 2</p>
</div>
</div>
<div class="row border border-dark">
<div class="col-6 col-sm-6 col-md-6 col-lg-6 col-xl-6 bg-info"><img src="Photos/2019 SB Photos/Whole_Stadium.JPG" alt="Responsive image"></div>
<div class="col-6 col-sm-6 col-md-6 col-lg-6 col-xl-6 bg-warning"><p class="m-0">Row 3</p>
</div>
</div>
You can do this.
If you want three rows, you need to use display: flex; as well as flex-direction: column; if you use 3 items they will stand up and the first will be on top, the second after, the third on bottom. if you want to make it any more complex, instead of stacking 3 elements, you can stack 3 more flex boxes, then organize the info from there.
check this out
https://www.steveaolsen.com/docs/FlexboxCheatsheet.pdf
let me know if that helps!
i used this sheet every time i'm working in CSS and its a life saver
I'm printing a loop dynamically in a col-3. Each column contains 4 HTML elements.
An Image
A Title
Some text content
A button
Is it possible to make each elements top, line up with each other regardless of how many lines the element on top is?
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-3">
<h2 class="pb-4">Title1</h2>
<p>Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci. Aenean dignissim pellentesque felis.</p>
</div>
<div class="col-3">
<h2 class="pb-4">Title2</h2>
<p>Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci. Aenean dignissim pellentesque felis.</p>
</div>
<div class="col-3">
<h2 class="pb-4">Title3</h2>
<p>Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci. Aenean dignissim pellentesque felis.</p>
</div>
<div class="col-3">
<h2 class="pb-4">Title <br> 4</h2>
<p>Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci. Aenean dignissim pellentesque felis.</p>
</div>
</div>
</div>
Personally, I would split the content into various rows, and put the columns inside those rows:
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
<div class="container pt-5">
<div class="row">
<div class="col-12">
<div class="row" id="titles_row">
<div class="col-3">
<h2 class="pb-4">Title1</h2>
</div>
<div class="col-3">
<h2 class="pb-4">Title2</h2>
</div>
<div class="col-3">
<h2 class="pb-4">Title3</h2>
</div>
<div class="col-3">
<h2 class="pb-4">Title <br> 4</h2>
</div>
</div>
<div class="row" id="texts_row">
<div class="col-3">
<p>Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci. Aenean dignissim pellentesque felis.</p>
</div>
<div class="col-3">
<p>Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci. Aenean dignissim pellentesque felis.</p>
</div>
<div class="col-3">
<p>Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci. Aenean dignissim pellentesque felis.</p>
</div>
<div class="col-3">
<p>Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci. Aenean dignissim pellentesque felis.</p>
</div>
</div>
</div>
</div>
</div>
One option is to separate your <h3> and <p> into separate rows. That allows them to all be aligned horizontally.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row">
<div class="col-3">
<h2 class="pb-4">Title1</h2>
</div>
<div class="col-3">
<h2 class="pb-4">Title2</h2>
</div>
<div class="col-3">
<h2 class="pb-4">Title3</h2>
</div>
<div class="col-3">
<h2 class="pb-4">Title <br> 4</h2>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-3">
<p>Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci. Aenean dignissim pellentesque felis.</p>
</div>
<div class="col-3">
<p>Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci. Aenean dignissim pellentesque felis.</p>
</div>
<div class="col-3">
<p>Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci. Aenean dignissim pellentesque felis.</p>
</div>
<div class="col-3">
<p>Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci. Aenean dignissim pellentesque felis.</p>
</div>
</div>
</div>
</div>
I have a big problem with my page and I can't find a solution anywhere. Could anyone help me?
When I try to add a well with elements inside my page sometimes need scrolling.
There is my code. Thank you.
<div class="container-fluid">
<div class="container">
<div class="row">
<div class="col-xs-12 text-center">
<h1> Some text</h1>
<div class="well">
<div class="container">
<div class="col-md-3 col-sm-4 col-xs-12">
<img class="img-responsive" src="image" style="width:100%">
</div>
<div class="col-md-8 col-sm-8 col-xs-12">
<p class="tittle">Tittle</p>
<p class="font"> Nullam consectetur nunc massa. Praesent arcu libero, porttitor ut lacus nec, elementum sagittis est. Donec finibus ex eget nibh blandit, a gravida justo tincidunt. Integer efficitur risus et blandit molestie. Sed hendrerit accumsan faucibus.
Quisque urna ligula, ultrices et scelerisque sed, blandit sed ligula. Etiam odio sem, semper non ex sit amet, euismod pharetra dolor. Donec tristique quis neque vel tincidunt. Sed tincidunt, metus sed varius blandit </p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Okay guys so I have this green container:
And I need the text - Would you like to chat ? - to be at the bottom of it's parent (the green background)
I tried adding a style to the text like this:
<div class="row" style="position: relative;">
<div style="position: absolute; bottom:0; right:0;"> Would you like to chat ? </div>
</div>
But that did not work, the text is just over another text, not bottom.
I do not want to use margin-top, because it won't be good at mobile screens.
Here is the code:
<!-- About page -->
<div class="container">
<div class="row">
<div class="col-lg-12">
<div class="col-lg-6 bg-success">
<div class="col-lg-6">
<img src="images/girlprofile.jpg" class="img-responsive" alt="pic1notworking" height="220" width="220" style="padding-bottom: 25px; padding-top: 15px;">
</div>
<div class="col-lg-6" style="padding-bottom: 25px; padding-top: 15px;">
<center>
<div class="usernamestyle"> Username <br> </div>
<div class="onlinestyle">
is currently online <br>
Would you like to chat ? <br>
</div>
</center>
</div>
</div>
<div class="col-lg-6">
<p style="font-size: 140%">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In condimentum, felis ac tristique tempor, tortor justo fringilla erat, id porta dui nisl quis leo. Proin non quam vitae erat placerat tincidunt. Mauris aliquam tempor finibus. Nulla a purus vehicula, tempus augue placerat, tincidunt odio. Mauris aliquet placerat urna vitae fermentum. Duis posuere risus ac elit mattis gravida. Pellentesque a quam eu massa efficitur aliquam. <br> <br>
Suspendisse tincidunt convallis nulla in pharetra. Ut ac erat convallis, dictum velit nec, sagittis ipsum. Quisque venenatis, nisi id consectetur imperdiet, nibh velit scelerisque arcu, ac placerat neque elit sit amet nisl. Aliquam nec dolor quam. Pellentesque maximus dui id justo ullamcorper auctor. Ut placerat purus vitae ipsum sodales, vel molestie magna finibus.
</p>
</div>
</div>
</div>
</div>
CSS:
.usernamestyle{
font-size: 200%;
}
.onlinestyle{
font-size: 160%;
}
<div class="col-lg-6" style="position: relative;height:100%; padding-bottom: 25px; padding-top: 15px;">
<center>
<div class="usernamestyle"> Username <br> </div>
<div class="onlinestyle">
is currently online
</div>
</center>
<div style="position: absolute; bottom:0; right: 0;">
Would you like to chat ?
</div>
</div>
This is a two part question. I am trying to emulate this mockup.
I am not quite sure how to do the slight left align of the text as well as adding a circular image in the gray circle area. Currently, my code in this area looks like this:
<div class="index-banner color2">
<div class="section">
<div class="row">
<div class="col s12 center">
<h5 class="header col s12 light">A modern responsive front-end framework based on Material Design</h5>
<p class="left-align light">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam scelerisque id nunc nec volutpat. Etiam pellentesque tristique arcu, non consequat magna fermentum ac. Cras ut ultricies eros. Maecenas eros justo, ullamcorper a sapien id, viverra ultrices eros. Morbi sem neque, posuere et pretium eget, bibendum sollicitudin lacus. Aliquam eleifend sollicitudin diam, eu mattis nisl maximus sed. Nulla imperdiet semper molestie. Morbi massa odio, condimentum sed ipsum ac, gravida ultrices erat. Nullam eget dignissim mauris, non tristique erat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;</p>
</div>
<div class="row center">
<a href="HackPrep.html" class="btn-large waves-effect waves-light green lighten-1" >HackPrep</a>
<span class="divider2"/>
Hackathons
</div>
</div>
</div>
</div>
It looks like this:
How do I make it look remotely close to the mockup? (ignoring the font color and size)
Run below snippet in full page mode.
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.0/css/materialize.min.css" rel="stylesheet"/>
<div class="index-banner color2">
<div class="section">
<div class="row">
<div class="col l8 s12 center">
<h5 class="header col s12 light">A modern responsive front-end framework based on Material Design</h5>
<p class="left-align light ">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam scelerisque id nunc nec volutpat. Etiam pellentesque tristique arcu, non consequat magna fermentum ac. Cras ut ultricies eros. Maecenas eros justo, ullamcorper a s;</p>
<div class="row center">
<a href="HackPrep.html" class="btn-large waves-effect waves-light green lighten-1" >HackPrep</a>
<span class="divider2"/>
Hackathons
</div>
</div>
<div class="col l4 s12 center"><img src="https://dummyimage.com/200x200/000/fff" class="circle">
</div>
</div>
</div>
</div>