How can I make the category Horizontally Centered
I tried justify-self-center and it didn't work out
https://play.tailwindcss.com/xTOkLkWyNj
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<div class="flex mx-2 space-x-1 h-52 2xl:grid-cols-12 2xl:gap-1 2xl:flex-none">
<div class="border-black border-2 justify-self-center">
<label class="font-bold text-center underline">Category</label>
<select wire:model="category" name="category" class="w-full border-2 border-black">
<option>test</option>
<option>test</option>
<option>test</option>
</select>
</div>
</div>
</body>
</html>
Please check the below link -
https://play.tailwindcss.com/7eFJ0nNXE9
I have added text-center in the div.
<div class="border-black border-2 text-center">
<label class="font-bold underline">Category</label>
<select wire:model="category" name="category" class="w-full border-2 border-black">
<option>test</option>
<option>test</option>
<option>test</option>
</select>
</div>
Related
This is the effect I'm trying to reproduce. The button is aligned on the right on the same level as the text. This is the result I want Goal
This is where I am image.
I tried using the grid but that ends up aligning the button with the div containing the text. The text has no padding.
Here's my code
<!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="container grid grid-cols-2 gap-32 h-screen">
<div class="border-solid border-red-600 border-2">
<div class="">
<h1 class="font-['Poppins'] font-bold text-5xl ml-0 leading-snug border-2 border-solid pr-0 inline-block">
Appliying for an internship has never been easier!
</h1>
</div>
<div class="justify-end flex">
<a class="btnn py-2 px-4 rounded-md inline-block" href="/blog">
Get Started!</a
>
</div>
</div>
<div
class="border-2 border-solid border-red-500 grid grid-cols-2 gap-4"
>
</div>
</body>
</html>
Hi #krankos
If you want the result as it's show in your Goal image Which you provided above. Then you could try that code which is in snippet. And also there are a lot of examples relate to that How to do that kind of things. Like at one:- Build websites faster with Tailwind CSS
<!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="max-w-sm p-6 bg-white border border-gray-200 rounded-lg shadow-md dark:bg-gray-800 dark:border-gray-700">
<a href="#">
<h5 class="mb-2 text-2xl font-bold tracking-tight text-gray-900 dark:text-white">Applying for an internship has never been easier!</h5>
</a>
<div class="grid justify-end">
<a href="#" class="flex mr-auto px-3 py-2 text-sm font-medium text-center text-white bg-green-500 rounded-lg hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">
Get started!
</a>
</div>
</div>
</body>
</html>
I'm trying to create a layout with TailwindCss similar to this:
+----------------------+
| |
+-----+----------------+
| | |
| | |
| | |
| | |
+-----+----------------+
This should fit the screen (both width and height). When the screen size changes it should adapt without displaying scrollbars.
So far I came up with this:
<!doctype html>
<html class="h-full">
<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 class="h-full">
<div class="h-full">
<div class="flex flex-row h-40 bg-red-500">
</div>
<div class="flex flex-grow">
<div class="flex bg-sky-600 w-48">
</div>
<div class="flex flex-grow bg-green-600">
<canvas width=100 height=200 style="border: 10px solid black;"></canvas>
</div>
</div>
</div>
</body>
</html>
The previous code results in this
I changed class of first div inside the body from h-full to h-full flex flex-col
<!doctype html>
<html class="h-full">
<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 class="h-full">
<div class="h-full flex flex-col">
<div class="flex flex-row h-40 bg-red-500">
</div>
<div class="flex grow">
<div class="flex bg-sky-600 w-48">
</div>
<div class="flex flex-grow bg-green-600">
<canvas width=100 height=200 style="border: 10px solid black;"></canvas>
</div>
</div>
</div>
</body>
</html>
I am trying to achieve below using Tailwind CSS Grid:
My HTML code is as below:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="tw_style.css" type="text/css">
<title>This is a Testing Site</title>
</head>
<body>
<section class="container h-screen mx-auto bg-red-100 grid grid-rows-10 gap-4">
<!-- Banner Image (left) and Menu Button (right) in same Grid Row-->
<section class="row-span-1">
<banner class="" style="background-image: url(Banner.jpg)">
<h1 class="pt-2 text-center align-top text-3xl font-black text-red-700">This is a Testing Site</h1>
</banner>
<button>
</button>
</section>
</section>
</body>
</html>
[Q1]: Why the background image does not show up until I put a block or flex class <banner class="block" style="background-image: url(Banner.jpg)"> ?
[Q2]: Why text in <h1> tag is not on the top of background image even though align-top is in place ?
Thanks a lot.
Q1: there is no html element named banner. When you use a div it works.
Q2: it is, however since the banner does not have a height defined it can't be on top
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="tw_style.css" type="text/css">
<title>This is a Testing Site</title>
</head>
<body>
<section class="container h-screen mx-auto bg-red-100 grid grid-rows-10 gap-4">
<!-- Banner Image (left) and Menu Button (right) in same Grid Row-->
<section class="row-span-1 grid grid-cols-10">
<div class="bg-no-repeat bg-cover col-span-9" style="background-image: url('https://media.giphy.com/media/26BRQTezZrKak4BeE/giphy.gif')">
<h1 class="pt-2 text-center align-top text-3xl font-black text-red-700">This is a Testing Site</h1>
</div>
<button class="col-span-1">
Menu
</button>
</section>
<div class="row-span-8 text-center text-6xl">Main content</div>
<div class="row-span-1 bg-yellow text-center">Footer</div>
</section>
</body>
Example pen: https://codepen.io/onewaveadrian/pen/MWpvwvx
I'm trying to use bulma columns but they are overflowing the body in mobile views. In the next picture you can see the white gap to the right of the screen. I inspected and the body tag is flush with the 'tomato' section's right border. However when the instance of columns appears it overflows the body tag and creates horizontal scrolling.
Thanks in advance for your help!
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.6.2/css/bulma.min.css" rel="stylesheet" />
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.8/css/all.css" integrity="sha384-3AB7yXWz4OeoZcPbieVW64vVXEwADiYyAEhwilzWsLw+9FgqpyjjStpPnpBO8o8S" crossorigin="anonymous">
<link rel="stylesheet" href="assets/stylesheets/main.css">
<title>Buffalo Wings</title>
</head>
<body>
<div class="bw-hero" style='display: flex; align-items: center; justify-content: center'>
<h1 class='title is-bold' style="color: white">slider tbd</h1>
</div>
<div class="container">
<div class="columns">
<div class="column">
<img src="assets/images/svg/the_chicken_wings_experts.svg" alt="The chicken wings experts">
</div>
<div class="column">
<h2 class="title has-text-centered">SELECCIONA TU PAÍS Y CIUDAD</h2>
<div class="field is-grouped is-grouped-centered">
<div class="control">
<div class="select">
<select>
<option>País</option>
<option>With options</option>
</select>
</div>
</div>
<div class="control">
<div class="select">
<select>
<option>Ciudad</option>
<option>With options</option>
</select>
</div>
</div>
</div>
<div class="field has-text-centered">
<input class="is-checkradio" id="saveLocationPreferences" type="checkbox" name="saveLocationPreferences" checked="checked">
<label for="saveLocationPreferences">Recordar mi selección</label>
</div>
</div>
</div>
</div>
</body>
</html>
For avoid horizontal scrolling on mobile device change viewport meta tag in your <head> with this:
<meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1.0, user-scalable=no">
instead of :
<meta name="viewport" content="width=device-width, initial-scale=1">
For me the solution is hiding horizontal overflow in the body, as such
body {
overflow-x: hidden;
}
#sam-nzd offered an alternative solution, but it disables users capabilty to zoom. I'd love to know myself which is the better option.
I cannot figure out how to align the div containing the "Go" button vertically to bottom.
I tried several things but none worked.
Here is a jsfiddle: https://jsfiddle.net/2fzq3xb3/2/
and here is the code:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>align div to bottom inside div</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<form method="post" action="#">
<div class="row" style="position: relative;">
<div class="col-xs-10">
<div class="row">
<div class='col-xs-6'>
<div class="form-group">
<label for="start-date">Start date</label>
<div class='input-group date' id='start-date'>
<input type='text' class="form-control" id='start_date' name='start_date' />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
<div class='col-xs-6'>
<div class="form-group">
<label for="end-date">End date</label>
<div class='input-group date' id='end-date'>
<input type='text' class="form-control" id='end_date' name='end_date' />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
<?php
?>
</div>
</div>
</div>
</div>
<div class="col-xs-2" style="position: relative; bottom: 50%;transform: translateY(-50%);">
<button type="submit" class="btn btn-primary btn-xs">Go</button>
</div>
</div>
</form>
</div>
</body>
</html>
Thanks
Add this CSS to the parent div.
display:table-cell;
vertical-align:middle;
Here is the solution that I found. Any suggestions for improvements are welcome:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>align div to bottom inside div</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<form method="post" action="#">
<div class="row">
<div class="col-xs-10" style="max-width: 500px;">
<div class="row">
<div class='col-xs-6'>
<div class="form-group">
<label for="start-date">Start date</label>
<div class='input-group date' id='start-date' style="max-width: 230px;">
<input type='text' class="form-control" id='start_date' name='start_date' />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
<div class='col-xs-6'>
<div class="form-group">
<label for="end-date">End date</label>
<div class='input-group date' id='end-date' style="max-width: 230px;">
<input type='text' class="form-control" id='end_date' name='end_date' />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
<?php
?>
</div>
</div>
</div>
</div>
<div class="col-xs-2" style="height:74px;">
<button type="submit" class="btn btn-primary btn-ss" style="position:absolute; bottom: 15px;">Go</button>
</div>
</div>
</form>
</div>
</body>
</html>
Thanks
just make sure row has its position property set to static (default value). I don't know why, but if you change it to relative or absolute it won't work.
.col-xs-12 {
position: absolute;
top: 50%;
transform: translateY(-50%);
}
<div class="row">
<div class="col-xs-12">
some text...
</div>
</div>