I'm trying to create HTML Page using Material Design grid system and implement the input fields view with all the nice features its offers in RTL Direction.
There is 2 Problems:
1. the grid layout not flliped to rtl
2. the input fields not working as expected
<html dir="rtl" lang="he">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="<?php echo base_url(); ?>js/jquery/jquery.min.js"></script>
<script src="<?php echo base_url(); ?>js/pooper.js"></script>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Rubik">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
</head>
<body dir="rtl">
<div class="row right">
<div class="col s1">1</div>
<div class="col s1">2</div>
<div class="col s1">3</div>
<div class="col s1">4</div>
<div class="col s1">5</div>
<div class="col s1">6</div>
<div class="col s1">7</div>
<div class="col s1">8</div>
<div class="col s1">9</div>
<div class="col s1">10</div>
<div class="col s1">11</div>
<div class="col s1">12</div>
</div>
<div class="row">
<div class="col s10" style="border-style: solid;border-color:black;">
<div class="row">
<form class="col s12">
<div class="row">
<div class="input-field col s12 right">
<i class="material-icons prefix right">search</i>
<textarea id="icon_prefix2" class="materialize-textarea"></textarea>
<label for="icon_prefix2">search</label>
</div>
</div>
</form>
</div>
</div>
</div>
</body>
</html>
i've tried all conventional ways like body and html dir and added right to as class name but nothing helped.
Related
Recently, I'm developing using bootstrap for a chatting system. But publishing a job is very difficult for me.
I want to develop the message template using bootstrap. I'm only using a bootstrap grid system.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="lib/bootstrap.min.css" />
</head>
<body>
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="lib/bootstrap.min.js"></script>
<div class="container-fluid">
<div>NickName</div>
<div class="row flex-nowrap">
<div class="col-auto" style="background-color: beige;">
<div class="row flex-nowrap">
<div class="col-auto">
<div class="text-break">
FileName : sddfssfdsdfsfdsdfsfddssdffdssfdsdfsdfsfdsdffdsfsdfsdsfdssfdsdfadsasdadsadsadsdasadsadsdaadsasdasds
</div>
<div>
SIZE
</div>
</div>
<div class="col-auto align-self-center">
<img src="./images/ic-download-doc-nor.png"/>
</div>
</div>
</div>
<div class="col-auto align-self-center text-nowrap">
PM 7:32
</div>
</div>
</div>
</body>
</html>
I want to show all contents when class is set to flex-nowrap. But above code is not working well.
If I reduce browser size in the above code, then the image tag and PM7:32 are hidden.
I don't know what to do. I want to show the following picture always.
You need to play with class col and col-auto inside row structure and use text-break class for braking single line text without spaces.
I hope this below snippet will help you a lot.
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/css/bootstrap.min.css">
<div class="container-fluid">
<div>NickName</div>
<div class="row">
<div class="col-12">
<div class="row flex-nowrap align-items-center">
<div class="col">
<div class="row flex-nowrap align-items-center rounded py-2" style="background-color: beige;">
<div class="col">
<div class="text-break">
<strong class="float-left mr-1">FileName:</strong> sddfssfdsdfsddsdffdsfsddssfdsdfsdfsfdsdffdsfsdfdsdffdsfsdfdsdffdsfsdfdsdffdsfsdfdsdffdsfsdfdsdffdsfsdfdsdffdsfsddsdffdsfsddssfdsdfsdfsfdsdffdsfsddffdsfsdfdsdfdffdsfsdfdsdf-Last Text
</div>
<div>
<strong>Size:</strong> 100kb
</div>
</div>
<div class="col-auto">
<img src="./images/ic-download-doc-nor.png"/>
</div>
</div>
</div>
<div class="col-auto text-nowrap">
PM 7:32
</div>
</div>
</div>
</div>
</div>
"d-flex" is important. You can try:
<div class="d-flex flex-nowrap">
...
</div>
I have a nice web page built up with cards but they simply dont seem to work when i paste it in the editor in the bootstrapemail editor which returns pure css code.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Vrindavan Chandrodaya Mandir</title>
<meta name="description" content="">
<meta name="author" content="LayoutIt!">
<!--Template based on URL below-->
<link rel="canonical" href="https://getbootstrap.com/docs/4.3/examples/starter-template/">
<!-- Bootstrap core CSS -->
<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">
<!-- <link href="css/bootstrap.min.css" rel="stylesheet">-->
<!-- <link href="css/Bootstrap.css" rel="stylesheet">-->
</head>
<body class="" style="background-color: azure">
<div class="card-deck">
<div class="card bg-primary">
<div class="card-body text-center">
<p class="card-text">Some text inside the first card</p>
<div class="card-footer">Hare Krishna</div>
</div>
</div>
<div class="card bg-warning">
<div class="card-body text-center">
<p class="card-text">Some text inside the second card</p>
</div>
</div>
<div class="card bg-success">
<div class="card-body text-center">
<p class="card-text">Some text inside the third card</p>
</div>
</div>
<div class="card bg-danger">
<div class="card-body text-center">
<p class="card-text">Some text inside the fourth card</p>
</div>
</div>
</div>
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<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>
</body></html>
I am using https://bootstrapemail.com/editor to get pure css to make some nice emails. Where am I going wrong? I know only bootstrap as my go to platform for designing.
I have gone through your code and with bootstrap email and I found that you missed some divs like container . You didn't mentioned
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> as they did.
//Here is a sample
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" media="all" href="/assets/application-mailer-dbc5154d3c4160e8fa7ef52fa740fa402760c39b5d22c8f6d64ad5999499d263.css" />
<style><!-- Add custom styles that you want inlined here --></style>
</head>
<body class="bg-light">
<preview>Thank you for riding with Lyft!</preview>
<div class="container">
<img class="mx-auto mt-4 mb-3" width="42" height="30" src="https://s3.amazonaws.com/lyft.zimride.com/images/emails/logo/v2/logo_44#2x.png" />
<div class="card mb-4" style="border-top: 5px solid #ff00bf;">
<div class="card-deck">
<div class="card bg-primary">
<div class="card-body text-center">
<p class="card-text">Some text inside the first card</p>
<div class="card-footer">Hare Krishna</div>
</div>
</div>
<div class="card bg-warning">
<div class="card-body text-center">
<p class="card-text">Some text inside the second card</p>
</div>
</div>
<div class="card bg-success">
<div class="card-body text-center">
<p class="card-text">Some text inside the third card</p>
</div>
</div>
<div class="card bg-danger">
<div class="card-body text-center">
<p class="card-text">Some text inside the fourth card</p>
</div>
</div>
</div>
</div>
</div>
</body></html>
//result
I know there have already been questions on this subject, but none of the solutions I found here were helpful. Hopefully someone can help me here:
I have a row with 4 columns of data as follows:
Here is the code:
<hr class="mb-4">
<div>
<h3>{{ player.full_name }}</h3>
<h4> {{ player.position }}</h4>
<h5> {{ player.team }}</h5>
</div>
<hr class="mb-4">
<div class="row">
<div class="col-xs-3 col-sm-3">
<div class="text-center font-weight-bold">
Form
</div>
<div class="text-center ">
{{ player.form }}
</div>
</div>
<div class="col-xs-3 col-sm-3">
<div class="text-center font-weight-bold">
Price
</div>
<div class="text-center">
<span>£</span>{{ player.price }}
</div>
</div>
<div class="col-xs-3 col-sm-3">
<div class="text-center font-weight-bold">
Total
</div>
<div class="text-center">
{{ player.total_points }}
</div>
</div>
<div class="col-xs-3 col-sm-3">
<div class="text-center font-weight-bold">
TSB
</div>
<div class="text-center">
{{ player.tsb }}%
</div>
</div>
</div>
As far as I understand, the 4 columns should keep in one row even in smaller screen, especially as there is definitely enough space to show them all together. On small screens this is what I get:
Nothing I change seem to help in this matter. I would like all columns to be shown in the same row even on smaller screens. Appreciate your help
Edit
The source of the problem is in the of my page.
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto|Varela+Round">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css"
href="https://cdn.datatables.net/v/bs4/dt-1.10.20/b-1.6.1/cr-1.5.2/r-2.2.3/sl-1.3.1/datatables.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.12.9/umd/popper.min.js"
integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
crossorigin="anonymous"></script>
<script type="text/javascript" src="https://cdn.datatables.net/v/bs4/dt-1.10.20/b-1.6.1/cr-1.5.2/r-2.2.3/sl-1.3.1/datatables.min.js"></script>
</head>
So the problem is when using the Bootstrap 4 tag instead of Bootstrap 3 like in the example below. Is that by design?
if you want it to be in 4 columns at any device width, just use the class col-3 instead col-xs-3 col-sm-3
I can't seem to reproduce this on my end. My guess is there's some difference in your CSS somewhere:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<link rel="shortcut icon" href="../../docs-assets/ico/favicon.png">
<!-- Bootstrap core CSS -->
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<hr class="mb-4">
<div>
<h3>Mohamed Salah</h3>
<h4>Midfielder</h4>
<h5>Liverpool</h5>
</div>
<hr class="mb-4">
<div class="row">
<div class="col-xs-3 col-sm-3">
<div class="text-center font-weight-bold">
Form
</div>
<div class="text-center ">
7.5
</div>
</div>
<div class="col-xs-3 col-sm-3">
<div class="text-center font-weight-bold">
Price
</div>
<div class="text-center">
<span>£</span>12.8
</div>
</div>
<div class="col-xs-3 col-sm-3">
<div class="text-center font-weight-bold">
Total
</div>
<div class="text-center">
165
</div>
</div>
<div class="col-xs-3 col-sm-3">
<div class="text-center font-weight-bold">
TSB
</div>
<div class="text-center">
45.3%
</div>
</div>
</div>
</div>
<script src="//code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.2/js/bootstrap.min.js"></script>
</body>
</html>
test it out and see:
https://codepen.io/davidgbiggs/pen/JjdXpGq
I have an img nested in a col. However, the col is larger than the image. It's as if there is padding at the bottom, but I don't see any. Here is a screenshot: https://imgur.com/a/K8iRWLf
There is another img nested within a separate col in the same row, but that img is the exact same size.
EDIT* I tried two fixes per a suggestion: display: block and vertical-align: bottom (separately), neither of which worked.
.img-shrink {
max-width: 80%;
max-height: 80%;
}
<div class="row justify-content-center">
<div class="col-3 body-padding text-center">
<img class="img-fluid img-shrink" src="img/dog-beer.jpg" alt="beer">
</div>
<div class="col-3 body-padding text-center">
<img class="img-fluid img-shrink" src="img/dog-treats.jpg" alt="treats">
</div>
</div>
<div class="row justify-content-center">
<div class="col-2 align-text-top">
<h4 class="product-header">Lorem Ipsum</h4>
</div>
<div class="col-2 align-text-top">
<h4 class="product-header">Lorem Ipsum</h4>
</div>
</div>
After playing around, I figured it out. The col is sized to the actual size of my image, not the max-width/height: 80% image that the browser renders. If anyone knows a way around this without resizing the original image, please enlighten me.
Try this once and see if it works
<!DOCTYPE html>
<html lang="en">
<head>
<title>CSS Example</title>
<meta charset="utf-8">
<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.0/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>
<style>
</style>
</head>
<body>
<div class="row justify-content-center">
<div class="col-3">
<img class="img-fluid" src="img.jpg" alt="beer">
</div>
<div class="col-3">
<img class="img-fluid" src="image.jpg" alt="treats">
</div>
</div>
<div class="row justify-content-center">
<div class="col-3 align-text-top text-center">
<h4 class="product-header">Lorem Ipsum</h4>
</div>
<div class="col-3 align-text-top text-center">
<h4 class="product-header">Lorem Ipsum</h4>
</div>
</div>
</body>
</html>
I'm pretty new with Bootstrap and have stumbled upon an issue:
Here's the HTML of my page:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title>Watch The Shawshank Redemption</title>
<link href="/Content/bootstrap/bootstrap.css" rel="stylesheet" />
<link href="/Content/Site.css" rel="stylesheet" />
<link href="//vjs.zencdn.net/4.1/video-js.css" rel="stylesheet">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-lg-8 col-md-8 col-sm-8 col-md-offset-2">
<div class="row">
<div class="col-lg-3 col-md-3 col-sm-3">
<img class="img-rounded img-border" src="http://ia.media-imdb.com/images/M/MV5BODU4MjU4NjIwNl5BMl5BanBnXkFtZTgwMDU2MjEyMDE#._V1_SX214_.jpg" />
</div>
<div class="col-lg-9 col-md-9 col-sm-9">
<h2 class="pagination-centered">The Shawshank Redemption</h2>
<p>Two imprisoned men bond over a number of years, finding solace and eventual redemption through acts of common decency.</p>
<div class="row">
<div class="col-lg-4 col-md-4 col-sm-4"><i class="glyphicon glyphicon-time"></i>142 minutes</div>
<div class="col-lg-4 col-md-4 col-sm-4">Release year: 1994</div>
<div class="col-lg-4 col-md-4 col-sm-4">Category: Crime</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="/Scripts/jquery-2.0.3.js"></script>
<script src="/Scripts/jquery.unobtrusive-ajax.js"></script>
<script src="/Scripts/bootstrap.js"></script>
<script src="//vjs.zencdn.net/4.1/video.js"></script>
<script src="/Scripts/initializers/initializer.js"></script>
</body>
</html>
However for some reason the text is being placed partly on the image as shown in the image below:
Why is the text being placed over the image?
I thought I gave the image 3 columns and the text 9 columns of the row so I don't see how they get into each other.
Give the image a class of img-responsive. It's just a case of the image being too wide.