I have a layout of 2 columns. They must have equal heights when rendered side by side (large screen). On mobile they should stack up. I use the old BS grid for this.
The content consists of <ul> among others. In IE11 the lists doesn't stay inside the columns. Instead Col 2s list is rendered on top of Col 1s list.
How can I make each list render and stay inside it's respective column?
How can I skip BS grid and just use flexbox for making columns responsive?
Here's a codepen:
https://codepen.io/olefrankjensen/pen/RxXEBN?editors=1000
Try this:
Note: get rid of extra classes eg: card-block justify-content-center
align-items-center in section tag.
<div class="row justify-content-sm-center">
<div class="col-sm-5">
<section class="ContractTemplateDetails mt-sm-0 unselectable mr-sm-2 card h-100" data-template-id="18">
<!-- Card content -->
</section>
</div>
<div class="col-sm-5">
<section class="ContractTemplateDetails mt-sm-0 unselectable mr-sm-2 checked card h-100" data-template-id="18">
<!-- Card content -->
</section>
</div>
</div>
Check Demo HERE
Updated
<section class="ContractTemplateDetails mt-sm-0 unselectable mr-sm-2 card h-100" data-template-id="18">
<div class="card-text-content mb-auto">
<div class="contract-image"><img class="" src="http://freevector.co/wp-content/uploads/2010/05/29358-toy-car-outline.png" alt="Contract Basic"></div>
<h4 class="contract-title">Contract Basic</h4>
<ul class="contract-list">
<li>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Impedit non </li>
<li>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Impedit non.</li>
<li>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Impedit non </li>
<li>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Impedit non omfattet af serviceaftalen.</li>
</ul>
</div>
<div class="contract-price mt-auto">
<h2 class="component-margin-top-small">205,00 kr./md.</h2>
</div>
<div class="SamCheckbox custom-control custom-checkbox"><input type="checkbox" class="custom-control-input" id="sam-check-undefined" value="18"><i class="custom-control-indicator"></i></div>
</section>
Related
Trying to figure out why my top container isn't laying out correctly. I'm just getting into CSS Grid.
https://codesandbox.io/embed/stupefied-haze-v633r?fontsize=14&hidenavigation=1&theme=dark
Edit
I found my problem finally, my header container wasn't placed to close at the correct spot. Rookie mistake( That I wish I would stop making)
If you are referring to the .wrapper class then you need to set a max-width in order to follow the rest.
If you are referring to the fact that on top right side you have some empty space is that you have created on grid those areas and they are not being used so instead of
grid-template-areas: "showcase showcase top-box-a" "showcase showcase top-box-b";
grid-template-areas: "showcase showcase" "showcase showcase";
Even tho be more specific which container if not answered your question.
You have to put div.top-box-a and div.top-box-b out of the <header> container because they are now as childs of the <header>. Change your html markdown to this:
<section class="top-container">
<header class="showcase">
<h1>Gaffa Miners</h1>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Repudiandae nihil consequatur aspernatur distinctio porro
labore!
</p>
Lear More
</header>
<div class="top-box top-box-a">
<h4>My Projects</h4>
<p>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Eius, ea!
</p>
Projects
</div>
<div class="top-box top-box-b">
<h4>About Me</h4>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Incidunt, consectetur.
</p>
About
</div>
</section>
I have a card and in it is an image then a header. Then, I want to have a paragraph and link all of the way at the bottom of the card. I defined a min-height in CSS to make room to do so. However, the following code just flows top to bottom with space at the bottom instead of content there.
<div class="col-lg-4">
<div class="card shadow">
<img class="card-img-top" src="https://source.unsplash.com/random/1600x900?house" alt="Card image cap">
<div class="card-body">
<h5 class="card-title text-center">47 Dream Homes You'll Wish You Could Afford</h5>
<div class="text-center d-block align-items-end">
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eos odio possimus labore ratione!.</p>
Go somewhere
</div>
</div>
</div>
</div>
Here is what it looks like and I want the lorem ipsum and button to be right up against the bottom with the headline at the top.
Let me suggest an alternative solution; one that would not require additional CSS and instead rely on Bootstrap's existing framework. The .card-footer class is part of the Card component and can integrate very well with your desired results.
To achieve equal heights you could rely either on .card-deck or simply applying the .h100 class to the .card wrapper. Since it's unclear how you might be applying this design to multiple cards the below example relies on .h100:
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<div class="container-fluid">
<div class="row">
<div class="col-sm-6 col-lg-4">
<div class="card h-100 shadow">
<img class="card-img-top" src="https://source.unsplash.com/random/1600x900?house" alt="Card image cap">
<div class="card-body">
<h5 class="card-title text-center">47 Dream Homes You'll Wish You Could Afford</h5>
</div>
<div class="card-footer bg-white border-top-0 text-center">
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eos odio possimus labore ratione!.</p>
Go somewhere
</div>
</div>
</div>
<div class="col-sm-6 col-lg-4">
<div class="card h-100 shadow">
<img class="card-img-top" src="https://source.unsplash.com/random/1600x900?house" alt="Card image cap">
<div class="card-body">
<h5 class="card-title text-center">47 Dream Homes You'll Wish You Could Afford</h5>
</div>
<div class="card-footer bg-white border-top-0 text-center">
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eos odio possimus labore ratione! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eos odio possimus labore ratione! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eos odio possimus labore ratione!</p>
Go somewhere
</div>
</div>
</div>
<div class="col-sm-6 col-lg-4">
<div class="card h-100 shadow">
<img class="card-img-top" src="https://source.unsplash.com/random/1600x900?house" alt="Card image cap">
<div class="card-body">
<h5 class="card-title text-center">47 Dream Homes You'll Wish You Could Afford</h5>
</div>
<div class="card-footer bg-white border-top-0 text-center">
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eos odio possimus labore ratione! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eos odio possimus labore ratione!</p>
Go somewhere
</div>
</div>
</div>
</div>
</div>
Now by default .card-footer applies a top border as well as a slightly darker background. We can override those styles by applying .bg-white to modify the background color and .border-top-0 to remove the top border. There is no reason to declare it a block element and centering the text is as simple as applying .text-center.
No min-height CSS involved.
For more information on how the Card component can be grouped please review Bootstrap's 4.x documentation on Card layou
You have to make the card-body a flex-column and then align use a Bootstrap utility class to push the elements to the bottom.
Bootstrap Flex Utilities
So we apply .d-flex and .flex-column to the .card-body div and .mt-auto to the div holding your paragraph and button.
.card {
height: 600px;
/* artificial height */
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row">
<div class="col-lg-4">
<div class="card shadow">
<img class="card-img-top" src="https://source.unsplash.com/random/1600x900?house" alt="Card image cap">
<div class="card-body d-flex flex-column">
<h5 class="card-title text-center">47 Dream Homes You'll Wish You Could Afford</h5>
<div class="text-center d-block mt-auto">
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eos odio possimus labore ratione!.</p>
Go somewhere
</div>
</div>
</div>
</div>
</div>
</div>
Use
use card groups so that footer section will align to the bottom.
When I add padding around an image at the top of a card when in dev tools mobile view, the image doesn't keep aspect ratio. When I go back to full size view the aspect ratio is fine.
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<div class="card-deck">
<div class="card bg-primary product-card--style mb-3">
<img src="https://dummyimage.com/500x500/8A8A8A/fff" alt="asdf" class="card-img-top product-card--img p-5">
<div class="card-body product-card--layout">
<h5 class="card-title">Product 1</h5>
<h6 class="card-subtitle">For people who..</h6>
<p class="card-text">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Alias sit illo eaque nulla aliquid tempora sapiente minus consequuntur atque! Iusto.</p>
More info
</div>
</div>
</div>
My code
Image of how it looks in dev tool mobile
The thing is if I go to my code pen in dev tools mobile view it seems to be working as it should, but from my file it isn't. This is the reason I'm so confused about it.
You wanted to maintain aspect ratios, does this work for you ?
.card { display:block !important; }
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<div class="card-deck">
<div class="card bg-primary product-card--style mb-3">
<img src="https://dummyimage.com/500x500/8A8A8A/fff" alt="asdf" class="card-img-top product-card--img p-5">
<div class="card-body product-card--layout">
<h5 class="card-title">Product 1</h5>
<h6 class="card-subtitle">For people who..</h6>
<p class="card-text">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Alias sit illo eaque nulla aliquid tempora sapiente minus consequuntur atque! Iusto.</p>
More info
</div>
</div>
</div>
I'm using Bootstrap 3 and struggling to make a horizontal list of panels responsive. My HTML is as below. It renders fine in all browsers but on mobile resolution the text is not responsive. Any ideas what I am missing?
<body>
<div class="container">
<div class="row">
<div class="col-xs-2">
<div class="panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title">Sprinkler System <br />Test & Inspection</h3>
</div>
<div class="panel-body">
Lorem ipsum dolor sit amet, qui ne iudicabit honestatis. Cu utroque adversarium usu, ius ut autem consulatu.
</div>
</div>
</div>
<div class="col-xs-2">
<div class="panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title">Heading for panel</h3>
</div>
<div class="panel-body">
Lorem ipsum dolor sit amet, qui ne iudicabit honestatis. Cu utroque adversarium usu, ius ut autem consulatu.
</div>
</div>
</div>
<div class="col-xs-2">
<div class="panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title">Heading for panel</h3>
</div>
<div class="panel-body">
Lorem ipsum dolor sit amet, qui ne iudicabit honestatis. Cu utroque adversarium usu, ius ut autem consulatu.
</div>
</div>
</div>
<div class="col-xs-2">
<div class="panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title">Heading for panel</h3>
</div>
<div class="panel-body">
Lorem ipsum dolor sit amet, qui ne iudicabit honestatis. Cu utroque adversarium usu, ius ut autem consulatu.
</div>
</div>
</div>
</div>
</div>
</body>
To make it mobile friendly you should have different column sizes at lower resolution. The words are too long to fit within a col-xs-2. You could keep the 4 columns layout by giving it two classes of col-xs-6 and col-sm-3. Once it gets to the smaller resolution the columns will be re arranged appropriately.
Your divs that contain your panels should have the class changed to look like this in each of them. Will give you a 2 column layout at xs resolution and 4 column layout at small and above
<div class="col-xs-6 col-sm-3">
</div>
If you have issues with the panels not aligning properly on the lower resolution when they are rearranged this might fix the issue:
Bootstrap fluid row columns with different height
You just have to add the css class
.col-xs-6:nth-child(odd) {
clear: both;
}
I am trying to code a section of a one-page responsive Bootstrap design that has two side-by-side columns of text. The designer wants these two columns to have a max-width, but once it reaches its max, it is no longer centered (as the rest of the content continues to be responsive).
Is there a way around this to still have the two columns of text centered?
Edit: Here is a link to what the code looks like: http://www.bootply.com/119539
Here try this Bootply. Is this what you are looking for?
<div class="row">
<div class="col-lg-12">
<h2 class="center-block">How We Work</h2>
</div>
<div class="col-lg-4 col-lg-offset-2">
<p class="text-justify center-block">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce quis nulla nec lacus condimentum molestie.</p>
</div>
<div class="col-lg-4">
<p class="text-justify center-block">Lorem ipsum dolor sit amet, consectetur adipiscing elit. .</p>
</div>
</div>
h2.center-block{
text-align:center;
}
p.text-justify{
max-width:400px;
}
NOTE: You can use col-lg-offset-2 to shift the div by 2 columns.