How to center the content or items on small sizes in Tailwind. I did all the alignment classes that are available in Tailwind It's not working. it's Tailwind V3
<div class="bg-white pb-8">
<div class="p-4 pb-0 bg-third-bg sm:max-w-7xl mx-auto">
<div class="sm:flex sm:max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 sm:items-center sm:justify-between bg-white p-6">
<div class="sm:flex sm:flex-col sm:items-center sm:justify-center sm:space-y-4 md:w-4/12">
<div class="sm:flex">
<img src="https://educlever.beplusthemes.com/university/wp-content/uploads/2018/11/forma4.png" alt="" />
</div>
<div class="sm:flex text-xl font-bold">Lorem ipsum dolor sit</div>
<div class="sm:flex sm:text-center">Lorem ipsum dolor sit amet, conse ct amet, conse adipiscing elit dolor sit a amet, conse adipisci</div>
</div>
<div class="sm:flex sm:flex-col sm:items-center sm:justify-center sm:space-y-4 md:w-4/12">
<div class="sm:flex">
<img src="https://educlever.beplusthemes.com/university/wp-content/uploads/2018/11/forma3.png" alt="" />
</div>
<div class="sm:flex text-xl font-bold">Lorem ipsum dolor sit</div>
<div class="sm:flex sm:text-center">Lorem ipsum dolor sit amet, conse ct amet, conse adipiscing elit dolor sit a amet, conse adipisci</div>
</div>
<div class="sm:flex sm:flex-col sm:items-center sm:justify-center sm:space-y-4 md:w-4/12">
<div class="sm:flex">
<img src="https://educlever.beplusthemes.com/university/wp-content/uploads/2018/11/forma2.png" alt="" />
</div>
<div class="sm:flex text-xl font-bold">Lorem ipsum dolor sit</div>
<div class="sm:flex sm:text-center">Lorem ipsum dolor sit amet, conse ct amet, conse adipiscing elit dolor sit a amet, conse adipisci</div>
</div>
</div>
</div>
</div>
https://play.tailwindcss.com/dBKsusYFvi?size=540x720
This is typically done with Tailwind's flex or grid.
Since it looks like you're working with flex already, I've included that example first.
1. Flex
If you intend to use Tailwind's flex, wrapping your items in a container that has flex and justify-center is all you need. Keep in mind these classes need to be on the direct parent element of the items you want centered.
<div class="flex justify-center">
<div>centered item</div>
</div>
The below example would apply the styles to screens at or above whatever size is assigned to sm in your Tailwind theme, or 480px for the default - the equivalent of #media (min-width: 480px).
<div class="sm:flex sm:justify-center">
<div>centered item</div>
</div>
Here's a snippet you can run to illustrate:
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
<div class="flex bg-slate-100 p-8 justify-center">
<div class='text-2xl'>centered item</div>
</div>
</body>
</html>
2. Grid
With grid, you just need a parent with grid and justify-items-center.
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
<div class="grid grid-cols-1 justify-items-center bg-slate-100 p-8">
<div class='text-2xl'>centered item</div>
</div>
</body>
</html>
I'd be sure to check out the docs as well, they're quite helpful with plenty of examples.
I found out that I have to use grid justify-items to solve that issue
<div class="bg-white pb-8">
<div class="p-4 pb-0 bg-third-bg sm:max-w-7xl mx-auto">
<div class="sm:flex sm:max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 sm:items-center sm:justify-between bg-white p-6">
<div class="grid justify-items-center text-center">
<img class="w-32" src="https://educlever.beplusthemes.com/university/wp-content/uploads/2018/11/forma4.png" alt="" />
<div class="text-xl font-bold">Lorem ipsum dolor sit</div>
<div class="">Lorem ipsum dolor sit amet, conse ct amet, conse adipiscing elit dolor sit a amet, conse adipisci</div>
</div>
<div class="grid justify-items-center">
<img class="w-32" src="https://educlever.beplusthemes.com/university/wp-content/uploads/2018/11/forma3.png" alt="" />
<div class="sm:flex text-xl font-bold">Lorem ipsum dolor sit</div>
<div class="sm:flex sm:text-center">Lorem ipsum dolor sit amet, conse ct amet, conse adipiscing elit dolor sit a amet, conse adipisci</div>
</div>
<div class="grid justify-items-center">
<img class="w-32" src="https://educlever.beplusthemes.com/university/wp-content/uploads/2018/11/forma2.png" alt="" />
<div class="sm:flex text-xl font-bold">Lorem ipsum dolor sit</div>
<div class="sm:flex sm:text-center">Lorem ipsum dolor sit amet, conse ct amet, conse adipiscing elit dolor sit a amet, conse adipisci</div>
</div>
</div>
</div>
</div>
Related
Can I ask you for help with this https://play.tailwindcss.com/fIuk5aXhz0?
What I have now:
What I need here is to have the red div height lower, just after HELLO 2 of the green box, like this:
<link href="https://unpkg.com/tailwindcss#^2/dist/tailwind.min.css" rel="stylesheet"/>
<div class="grid grid-cols-4 gap-6">
<div class="grid gap-4 bg-red-500">
<span>HELLO 1</span>
<span>HELLO 2</span>
</div>
<div class="grid gap-4 col-span-3 bg-green-500">
<span>HELLO 1</span>
<span>HELLO 2</span>
<span>HELLO 3</span>
<span>HELLO 4</span>
<span>HELLO 5</span>
<span>HELLO 6</span>
</div>
</div>
I think you can use auto-rows-min and wrap these two of HELLO in a div in this case.
example
I understood it like this. Left column should not be affected by the height of the right column, right? If so, then I would have implemented it that way.
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.19/tailwind.min.css' media='all' />
<div class="bg-gray-400 min-h-screen flex items-center justify-center ">
<div class="grid grid-cols-2 gap-2 w-1/2">
<div class="row-span-2 rounded ">
<div class="bg-white p-10 rounded bg-green-100 mb-2">Block A</div>
<div class="bg-white p-10 rounded bg-green-100 ">Block B</div>
</div>
<div class="row-span-2 bg-white p-10 rounded">lorem lorem lroem lorem lorem lroem lorem lorem lroemlorem lorem lroemlorem lorem lroem lorem lorem lroem lorem lorem lroem lorem lorem lroem lorem lorem lroem lorem lorem lroem lorem lorem lroem lorem lorem lroem lorem lorem lroem lorem lorem lroem lorem lorem lroem lorem lorem lroem lorem lorem lroem lorem lorem lroem lorem lorem lroem lorem lorem lroem lorem lorem lroem lorem lorem lroem lorem lorem lroem lorem lorem lroem lorem lorem lroem
lorem lorem lroem lorem lorem lroem lorem lorem lroem
</div>
</div>
</div>
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.
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>
I'm currently creating a web page with Bootstrap and I'm using columns. My page looks like that:
I'd like to center the last column (in the second row) but the page is dynamic and I don't know how many containers there are.
I found this two solutions on Google:
1) Add this to my css:
.col-centered{
float: none;
margin: 0 auto;
}
2) Add this to the class tag attribute
col-lg-offset-4
But both solutions look like this:
That is not what i want. I want it to look like this:
How can i achieve this?
Bootstrap's columns are floating by default with css float property. With float we can't middle align columns. However with display: inline-block we can. All we need is to remove float from styles of columns and change them to inline-block with vertical-align: middle and you will get what you want. But don't forget to remove extra space that comes with inline-block.
Here is the trick.
.wrapper {
background: green;
padding: 20px 0;
}
.box {
border-radius: 10px;
margin-bottom: 30px;
background: #fff;
padding: 10px;
color: #000;
}
.center-align {
letter-spacing: -4px;
text-align: center;
font-size: 0;
}
.center-align [class*='col-'] {
display: inline-block;
vertical-align: top;
letter-spacing: 0;
font-size: 14px;
float: none;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="wrapper">
<div class="container center-align">
<div class="row">
<div class="col-xs-4">
<div class="box">
<p>Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.</p>
</div>
</div>
<div class="col-xs-4">
<div class="box">
<p>Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.</p>
</div>
</div>
<div class="col-xs-4">
<div class="box">
<p>Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.</p>
</div>
</div>
<div class="col-xs-4">
<div class="box">
<p>Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.</p>
</div>
</div>
</div>
</div>
<div class="container center-align">
<div class="row">
<div class="col-xs-4">
<div class="box">
<p>Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.</p>
</div>
</div>
<div class="col-xs-4">
<div class="box">
<p>Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.</p>
</div>
</div>
<div class="col-xs-4">
<div class="box">
<p>Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.</p>
</div>
</div>
<div class="col-xs-4">
<div class="box">
<p>Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.</p>
</div>
</div>
<div class="col-xs-4">
<div class="box">
<p>Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.</p>
</div>
</div>
</div>
</div>
</div>
Note: Setting font-size: 0; letter-spacing: -4px on parent and applying parent's font-size: 14px; letter-spacing: 0 back on child elements will remove white space that comes with inline-block.
Bootstrap has built-in functionality to achieve the layout you are after, without the introduction of additional CSS rules. Simply use the .col-md-offset-* class:
Move columns to the right using .col-md-offset-* classes. These classes increase the left margin of a column by * columns. For example, .col-md-offset-4 moves .col-md-4 over four columns.
Your layout would end up looking similar to this:
.show-grid {
margin-bottom: 15px;
}
.your-custom-div {
height: 50px;
background-color: green;
color: white;
text-align: center;
}
<!DOCTYPE html>
<html lang="en">
<head>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
</head>
<body>
<div class="container">
<div class="row show-grid">
<div class="col-md-4">
<div class="your-custom-div">
.col-md-4
</div>
</div>
<div class="col-md-4">
<div class="your-custom-div">
.col-md-4
</div>
</div>
<div class="col-md-4">
<div class="your-custom-div">
.col-md-4
</div>
</div>
<div class="clearfix visible-md"></div>
</div>
<div class="row show-grid">
<div class="col-md-4 col-md-offset-4">
<div class="your-custom-div">
.col-md-4 .col-md-offset-4
</div>
</div>
<div class="clearfix visible-md"></div>
</div>
</div>
</body>
</html>
EDIT #1: For your requirement of not knowing how many columns you will be fetching from your database for the second row, another option would be to use a conditional during the output of the HTML to also output a .col-md-offset-4 class if the modulo of the number of items in your collection divided by the number of columns is equal to 1, or proceed as usual otherwise. In ASP.NET with Razor, this would look something like this (the example below is kept simple on purpose to demonstrate the proposed logic, it can be refactored to it's own HTML helper class, accounting for other column sizes as well):
#{
bool lastItemShouldBeCentered = Foo.Count % 3 == 1;
for (int i = 0; i < Foo.Count; i++)
{
bool isLastItem = i == Foo.Count - 1;
if (isLastItem && lastItemShouldBeCentered)
{
<div class="col-md-4 col-md-offset-4">
// Foo[i] content here
</div>
}
else
{
<div class="col-md-4">
// Foo[i] content here
</div>
}
}
}
EDIT #2: Looks like I misread your requirement. For 1 left-over column, this solution will suffice. For more, I would go with #Muhammad's answer.
You need to add the last block of text into a different row and change the "col-md-4" to "col-md-12".
<div class="row">
<div class="col-md-4"> // column 1
bla bla bla
</div>
<div class="col-md-4"> //column 2
bla bla bla
</div>
<div class="col-md-4"> // column 3
bla bla bla
</div>
</div>
<div class="row">
<center>
<div class="col-md-12"> //last column, also note I changed it to 12
bla bla bla
</div>
</center>
</div>
I have a div where is a carousel - separately with text and images. Everything works (almost perfect) :) But I want have a background carousel with images in this set. I have sth like that:
jsfiddle
<div id="background">
<div class="carousel slide carousel-fade" data-ride="carousel">
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
</div>
<div class="item">
</div>
<div class="item">
</div>
</div>
</div>
</div>
<div id="slider" class="carousel slide col-xs-9 padd-lt0" data-ride="carousel" data-interval="3000">
<div class="carousel-inner">
<div class="item active">
<img alt="First slide"4 src="http://placehold.it/1200x440/999999/cccccc" >
</div>
<div class="item">
<img alt="Second slide" src="http://placehold.it/1200x440/cccccc/ffffff">
</div>
<div class="item">
<img alt="Third slide" src="http://placehold.it/1200x440/dddddd/333333">
</div>
</div>
</div>
<div id="slider_captions" class="col-xs-3 ">
<div>
<div id="caption-0" class="carousel-caption">
<h2>Title 1</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nam, enim. A sint repudiandae tempora, nulla aliquam</p>
</div>
<div id="caption-1" class="carousel-caption">
<h2>Title 2</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nam, enim. A sint repudiandae tempora, nulla aliquam</p>
</div>
<div id="caption-2" class="carousel-caption">
<h2>Title 3</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nam, enim. A sint repudiandae tempora, nulla aliquam</p>
</div>
</div>
</div>
When I try put this example to other div (div .row) i don't see any background. I tired z-index and background-color: transparent - but nothing was happen.
How to convert the example above (background slider) so that it works only in a specific div (not the entire browser window)