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
Related
So I have very simple code like this:
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
<div class="pt-5 bg-info">
<!-- Something -->
</div>
<div class="row pt-4 bg-success">
<!-- Something -->
</div>
But, as a result (of this particular code), I have 2 these blocks with different width. So why it is happened and how to prevent such situations?
The problem is caused by Bootstrap library's internal row class -bs-gutter-x: 1.5rem; to set the property. If you manually overwrite this property, this behavior will be resolved as you wish. Changing the library's behavior in this way causes different side effects. This is not recommended behavior. That's why I suggest you follow the steps in section "Suggestion".
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap demo</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
<style>
.row {
--bs-gutter-x: 0rem !important;
}
</style>
</head>
<body>
<div class="pt-5 bg-info"></div>
<div class="row pt-4 bg-success"></div>
</body>
</html>
Suggestion
The pt class is used to change the padding-top property. The different use of the pt class is not relevant to the problem. To responsively place elements horizontally, define child <div> elements with row class within a <div> element with container class.
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
<div class="container">
<div class="row">
<div class="pt-5 bg-info"></div>
</div>
<div class="row">
<div class="pt-4 bg-success">
</div>
</div>
References
Bootstrap v5.2. - Gutters
Bootstrap v5.2 - Spacing
using w3css, cannot make "Wish you a happy day" in the center of the sand-colored section yet.
<html>
<head>
<title>W3.CSS Template</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Trirong">
<style>
body,h1,h2,h3,h4,h5 {font-family: "Trirong", serif}
</style>
</head>
<body class="w3-light-grey">
<!-- w3-content defines a container for fixed size centered content,
and is wrapped around the whole page content, except for the footer in this example -->
<div class="w3-content" style="max-width:1100px">
<!-- Header -->
<header class="w3-container w3-center w3-padding-32">
<p><button class="w3-button w3-padding-large w3-white w3-border">Welcome</button></p>
</header>
<!-- Grid -->
<div class="w3-row w3-card-4 w3-margin w3-sand">
<!-- Blog entries -->
<div class="w3-col l8 s12">
<img src="../static/images/101.jpg" alt="Nature" style="width:100%">
</div>
<div class="w3-col l4">
<div class="w3-container w3-sand">
<div class="w3-container w3-sand w3-center" style="width:80%; margin:auto;">
<p>
<h7>WELCOME</h7>
<h3><b>Wish you a happy day</b></h3>
<h6>Keep calm and carry on !</h6>
</p>
</div>
</div>
</div>
<!-- END GRID -->
</div>
<br>
<!-- END w3-content -->
</div>
</body>
</html>
[![enter image description here][1]][1]
Any suggestions ?
ok i used w3-cell and we-cell-row, not w3-container, it's working now
see this sample
https://www.w3schools.com/w3css/tryit.asp?filename=tryw3css_layout_align_all
So I'm just sandboxing how responsive flex and shrink works in Bootstrap. Below is my code. Nothing seems to work. I've tried using different breakpoints such as lg/md/sm but to no luck. Would appreciate any guidance.
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Google Font -->
<link href="https://fonts.googleapis.com/css?family=Nunito:200,300,400,700" rel="stylesheet">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<!-- Custom CSS -->
<link rel="stylesheet" href="app.css">
<title>Practice </title>
</head>
<body>
<div class="container-fluid">
<div class="row bd-highlight">
<div class="col border border-2 flex-md-shrink-1">Flex item 1</div>
<div class="col border border-2 flex-md-shrink-0">Flex item 2</div>
</div>
</div>
<!-- Optional JavaScript -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
</body>
</html>
Since .col is flex: 1 0 0% columns will grow, but not shrink so your test isn't doing anything to override .col. You could change flex-grow to override the .col behavior...
<div class="container-fluid">
<div class="row">
<div class="col border border-2 flex-md-shrink-1 flex-md-grow-1">Flex item 1</div>
<div class="col border border-2 flex-md-shrink-0 flex-md-grow-0">Flex item 2</div>
</div>
</div>
https://codeply.com/p/0pUmeIxKEX
Try to use only d-flex and not combine it with bootstrap's grid system (.col and .row)
Here is the modified example:
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Google Font -->
<link href="https://fonts.googleapis.com/css?family=Nunito:200,300,400,700" rel="stylesheet">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<!-- Custom CSS -->
<link rel="stylesheet" href="app.css">
<title>Practice </title>
<style>
.item-container {
width: 100%;
}
.item {
flex-basis: 100%;
flex-shrink: 200px;
}
.item-shrink {
flex-shrink: 3;
}
</style>
</head>
<body>
<div class="item-container d-flex bd-highlight">
<div class="item item-shrink border border-2">Flex item 1</div>
<div class="item border border-2">Flex item 2</div>
</div>
<!-- Optional JavaScript -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
</body>
</html>
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 am trying to build two rows with Bootstrap 4, the one should be displayed on devices with viewport < tablet and the other > tablet. In other words, once the one is visible, the other is hidden. I am using the native d-- classes from Bootstrap 4, but in the > tablet case they break the columns somehow. I am not sure, if it's bug or just me, but I am stick with this for hours. Here is a simple example that I've made to represent the issue.
<html>
<head>
<meta content="text/html; charset=UTF-8" http-equiv="Content-Type">
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link href="images/favicon.ico" rel="shortcut icon" type="image/x-icon" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
</head>
<body>
<section class="container-fluid">
<div class="row d-none d-md-block">
<div class="col-4">
<p>Test paragraph - desktop</p>
</div>
<div class="col">
<p>Test paragraph - desktop</p>
</div>
</div>
<div class="row d-xs-block d-md-none">
<div class="col-8">
<p>Test paragraph - mobile</p>
</div>
<div class="col">
<p>Test paragraph - mobile</p>
</div>
</div>
</section>
</body>
</html>
You need to use d-md-flex class because d-md-block override flex property of bootstrap 4.....check this i have added d-md-flex class
<html>
<head>
<meta content="text/html; charset=UTF-8" http-equiv="Content-Type">
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link href="images/favicon.ico" rel="shortcut icon" type="image/x-icon" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
</head>
<body>
<section class="container-fluid">
<div class="row d-none d-md-flex">
<div class="col-4">
<p>Test paragraph - desktop</p>
</div>
<div class="col">
<p>Test paragraph - desktop</p>
</div>
</div>
<div class="row d-xs-block d-md-none">
<div class="col-8">
<p>Test paragraph - mobile</p>
</div>
<div class="col">
<p>Test paragraph - mobile</p>
</div>
</div>
</section>
</body>
</html>