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.
Related
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've been working on a simple webpage to display three images in the top row and three in the bottom. I haven't even been able to get this test page working properly.
I'm working on a Raspberry Pi 3B running Raspbian Jessie, using flask 0.10.1.
Here is the view:
#app.route('/')
#app.route('/index')
def index():
return render_template('index.html',
title='testpage')`
and the HTML template:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.min.css"-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!--script src="bootstrap-3.3.7-dist/js/jquery-3.2.0.min.js"></script-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<!--script src="bootstrap-3.3.7-dist/js/bootstrap.min.js"></script-->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-xs-3-sm-3-md-3-lg-3">
<h1>3 Cols here
</h1>
</div>
<div class="col-xs-3-sm-3-md-3-lg-3">
<h1>3 Cols here
</h1>
</div>
<div class="col-xs-3-sm-3-md-3-lg-3">
<h1>3 Cols here
</h1>
</div>
<div class="col-xs-3-sm-3-md-3-lg-3">
<h1>3 Cols here
</h1>
</div>
</div>
<div class="row">
<div class="col-xs-12-sm-12-md-12-lg-12">
<h1>1 Col here
</h1>
</div>
</div>
</div>
</body>
</html>
Note: I initially tried sourcing the bootstrap files locally as the web server will be running on an intranet, but when that didn't work I commented it out and added the CDN links.
The page loads the text properly, but all in one central column. there doesn't seem to be any 'grid' to speak of. Does anyone have any suggestions what's going wrong?
There is syntax error in define class. it should like this:
col-xs-3 col-sm-3 col-md-3 col-lg-3
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.min.css"-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!--script src="bootstrap-3.3.7-dist/js/jquery-3.2.0.min.js"></script-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<!--script src="bootstrap-3.3.7-dist/js/bootstrap.min.js"></script-->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-xs-3 col-sm-3 col-md-3 col-lg-3">
<h1>3 Cols here
</h1>
</div>
<div class="col-xs-3 col-sm-3 col-md-3 col-lg-3">
<h1>3 Cols here
</h1>
</div>
<div class="col-xs-3 col-sm-3 col-md-3 col-lg-3">
<h1>3 Cols here
</h1>
</div>
<div class="col-xs-3 col-sm-3 col-md-3 col-lg-3">
<h1>3 Cols here
</h1>
</div>
</div>
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
<h1>1 Col here
</h1>
</div>
</div>
</div>
</body>
</html>
Haii, I wrote the following code using bootstrap:
<div class="row">
<div class="col-lg-3 col-sm-3 col-xs-12 ROOD" >
<div class="row">
<div class="col-md-12 col-sm-12 col-xs-6 image GEEL" >
<img src="images/camera.png" class="home">
<h4>Vraag uw foto digitaal op!</h4>
</div>
<div class="col-md-12 col-sm-12 col-xs-6 image GROEN">
<img src="images/card.png" class="home">
<h4>Probeer het proeflidmaatschap!</h4>
</div>
</div>
</div>
<div class="col-lg-8 col-sm-8 col-xs-12 nieuws PAARS">
<h1>..</h1>
</div>
</div>
Which should result in this on mobile devices:
phone
But the two nested rows keep being put on top of each other, whereas they should be placed next to each other on mobile phones. Like this:
How it should be
What I am doing wrong?
Copy the HTML below to begin working with a minimal Bootstrap document.
<!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">
The above 3 meta tags must come first in the head; any other head content must come after these tags
Than you need to link bootstrap in you html code:
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
</head>
<body>...</body>
Next you can paste html code from snippet into the body.
.ROOD {
background: red;
}
.GEEL {
background: yellow;
}
.GROEN {
background: green;
}
.PAARS {
background: violet;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
<div class="row">
<div class="col-sm-3 col-xs-12 ROOD" >
<div class="row">
<div class="col-sm-12 col-xs-6 image GEEL" >
<img src="images/camera.png" class="home">
<h4>Vraag uw foto digitaal op!</h4>
</div>
<div class="col-sm-12 col-xs-6 image GROEN">
<img src="images/card.png" class="home">
<h4>Probeer het proeflidmaatschap!</h4>
</div>
</div>
</div>
<div class="col-sm-8 col-xs-12 nieuws PAARS">
<h1>..</h1>
</div>
</div>
</div>
As you can see, "11111111..." and "22222222..." are overlapping. I think this is because the former exceeds the grid it belongs to, i.e. <div class="col-xs-6 col-lg-4">.
<!DOCTYPE html>
<html>
<head>
<title>
Test
</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap -->
<link href="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-xs-6 col-lg-4">
<h2>11111111111111111111111111111111</h2>
</div>
<div class="col-xs-6 col-lg-4">
<h2>22222222222222222222222222222222</h2>
</div>
</div>
</div>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>
</html>
It looks like this in my browser(Safari Version 9.1.2 (11601.7.7)):
What am I doing wrong?
Add word-wrap: break-word; to h2 element. because the default setting for word-wrap is normal. which wrap only for limited set of split tokens (example: whitespaces, hyphens).
HTML:
<div class="container">
<div class="row">
<div class="col-xs-6 col-lg-4">
<h2 class="w-wrap">11111111111111111111111111111111</h2>
<p class="text-muted ">11111111111111111111111111111111</p>
</div>
<div class="col-xs-6 col-lg-4">
<h2 class="w-wrap">22222222222222222222222222222222</h2>
<p class="text-muted">22222222222222222222222222222222</p>
</div>
</div>
</div>
CSS:
.w-wrap{
word-wrap: break-word;
}