Using Bootstrap 4, I have created a grid. On a phone, the text on the right column is long enough to make the row taller. I have simulated this by making the body 375px wide. I'd like the row to stay the size of the image and then apply text-overflow: ellipsis to hide the text that overflows the row. How can I do this?
My CSS and HTML is below.
.infoHeader {
text-transform: uppercase;
}
#posterCol {
max-width: 184px;
}
.movieDBImg {
border-radius: 4px;
}
body {
width: 375px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<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">
</head>
<body>
<div class="flex-container" style="padding: 15px;">
<div class="row">
<div class="col" id="posterCol"><img class="movieDBImg" style="max-width: 154px;"
src="https://image.tmdb.org/t/p/w300/cezWGskPY5x7GaglTTRN4Fugfb8.jpg"></div>
<div class="col">
<div class="row text-muted infoHeader">Directors</div>
<div class="row">
Joss Whedon
</div>
<div class="row text-muted infoHeader">Genres</div>
<div class="row">
<p class="card-text">
Science Fiction,
Action,
Adventure</p>
</div>
<div class="row text-muted infoHeader">Cast</div>
<div class="row">
Robert Downey Jr.,
Chris Evans,
Mark Ruffalo,
Chris Hemsworth,
Scarlett Johansson,
Jeremy Renner,
Tom Hiddleston,
Clark Gregg,
Cobie Smulders,
Stellan Skarsgård</div>
</div>
</div>
</div>
</body>
</html>
I have applied the text-overflow: ellipsis for your description in mobile view using media queries. I have simplified your css and inline styles.
.exp-container img {
max-width: 130px;
border-radius: 4px;
}
.text-muted {
text-transform: uppercase;
}
body {
width: 375px;
}
#media (max-width: 767px) {
.exp-content .text {
width: 170px;
overflow: hidden;
display: inline-block;
text-overflow: ellipsis;
white-space: nowrap;
}
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<div class="d-flex">
<div class="exp-container">
<img src="https://image.tmdb.org/t/p/w300/cezWGskPY5x7GaglTTRN4Fugfb8.jpg" class="img-fluid">
</div>
<div class="exp-content mr-auto ml-3">
<div class="text-muted">Directors</div>
<div class="text">Joss Whedon</div>
<div class="text-muted">Genres</div>
<div class="text">Science Fiction, Action, Adventure</div>
<div class="text-muted">Cast</div>
<div class="text">Robert Downey Jr., Chris Evans, Mark Ruffalo, Chris Hemsworth, Scarlett Johansson, Jeremy Renner, Tom Hiddleston, Clark Gregg, Cobie Smulders, Stellan Skarsgård</div>
</div>
</div>
Related
May be a newbie question. I am trying to create 2 rows with 3 sections each. But for some reason even when i set class="col-lg-4", the sections still take up boxes like it is class="col-lg-2"
Basically I wanted to have 6 squares inside instead of 6 rectangles
From my understanding, col-lg-4 should take 33% of the container therefore creating a row of 3
I have set it up here but it seems that it does not want to work and I do not have a clue why
.bookshelf {
background-color: #564E52;
width: 1100px;
height: 700px;
display: flex;
margin: 100px auto 100px auto;
border: 20px solid #7F5822;
}
#media (max-width: 800px){
.bookshelf{
width: 900px;
height: 500px;
}
}
#section1 {
border: 20px solid #7F5822;
}
#section2 {
border: 20px solid red;
}
#section3 {
border: 20px solid purple;
}
#section4 {
border: 20px solid green;
}
#section5 {
border: 20px solid yellow;
}
#section6 {
border: 20px solid pink;
}
<!doctype html>
<html>
<head>
<meta lang="en-US">
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>penpal</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/styles.css">
</head>
<body>
<div id="main" class="container-fluid">
<div class="wrapper">
<div class="bookshelf">
<span id="section1" class="col-sm-6 col-lg-4">
</span>
<span id="section2" class="col-sm-6 col-lg-4">
</span>
<span id="section3" class="col-sm-6 col-lg-4">
</span>
<span id="section4" class="col-sm-6 col-lg-4">
</span>
<span id="section5" class="col-sm-6 col-lg-4">
</span>
<span id="section6" class="col-sm-6 col-lg-4">
</span>
</div>
</div>
</div>
</body>
</html>
Use .row class with .bookshelf
All columns should be wrapped in an element with class 'row'. Change this:
<div id="main" class="container-fluid">
<div class="wrapper">
<div class="bookshelf">
Into this:
<div id="main" class="container-fluid">
<div class="wrapper">
<div class="row bookshelf">
Basically I wanted to have 6 squares inside instead of 6 rectangles
Use aspect-ratio: 1 / 1; on your columns to make them square, like this:
<span id="section1" class="col-sm-6 col-lg-4" style="aspect-ratio: 1 / 1;">
I'm trying to nest containers with Twitter Bootstrap to achieve the following in this screen shot. In the PSD the bubble image height is 404px. I need this to look good across all devices, so responsiveness is a must and should scale accordingly without overwhelming the screen.Could somebody please point me in the right direction to nail the CSS down for this?
I have added what I've done so far in Bootstrap to make this happen but it is off and need to get the containers right. I've read that containers in bootstrap shouldn't be nested but "can be".
I have nested containers but can't seem to achieve what is in the screen shots with Bootstrap.
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="css/style.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.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<title>Page Title</title>
</head>
<body>
<div class=".container-fluid">
<div class="row">
<div class="col-lg-12 top">
TOP TRENDING STORY FOR AUGUST 21, 2019
</div>
</div>
<div class="row">
<div class="col-lg-12 bg-top">
<div class="container">
<div class="row">
<div class="col-md-6">
test 1
</div>
<div class="col-md-6">
Test 2
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
CSS
.top{
background-color: #d42222;
color:#FFFFFF;
font-size:23px;
text-align: center;
}
.bg-top{
background:transparent url('../images/background-top.png') no-repeat center center /cover;
}
This needs some styling to get what you want; You can take a look at the left and right margins which are inserted by Bootstrap .container and may want to override them; to get closer to the image you shared, I added some top and bottom margins myself;
Complete working snippet below:
.redBanner {
background: red;
}
.redBanner p {
margin-bottom: 0;
}
.myExternalContainer {
background-image: url("https://www.akberiqbal.com/Jumbo.jpg");
background-position: center;
background-repeat: no-repeat;
background-size: cover;
background-color: lightblue;
padding-bottom: 5%;
}
.myInternalContainer {
margin-top: 10%;
margin-bottom: 10%;
}
.innerMostContainer {
margin: 10%;
}
.innerMostContainer button {
width: 100%;
}
.container {
background: #fff
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<div class="container-fluid myExternalContainer">
<div class="row">
<div class="col-lg-12 top redBanner">
<p class="text-center">TOP TRENDING STORY FOR AUGUST 21, 2019</p>
</div>
</div>
<div class="container myInternalContainer">
<h3 class="text-center"> medicare</h3>
<div class="row">
<div class="innerMostContainer">
<div class="row">
<div class="col-lg-12 bg-top">
<img src='https://www.akberiqbal.com/src/images/LinkedIn4.png' class='img-fluid' />
<div class="row">
<div class="col-6">
Author Name
<br/> Published date
</div>
<div class="col-6">
<button type="button" class='btn btn-primary'>Read time</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
I am making a webpage in HTML and CSS which have to be replicated exactly like this image.
At this moment, I am able to get this in fiddle.
The problem with the fiddle is: it (text and a rectangle(with some text)) is getting aligned at the left-side and right-side center of page whereas I want to bring them at the center of a page (with some distance between the two) as shown in the image. The HTML code which I am using is:
<div class="sections">
<div class="container">
<div class="row">
<div class="col-lg-6 left-side"> Development & Design</div>
<div class="col-lg-6 right-side"> Web Designer Qualifications Go here</div>
</div>
</div>
I am wondering whether do I need to .col-lg-6 class as I have used above to replicate an image ?
If not then do I need to use col-lg-offset-1 in my HTML code in order to replicate an image ?
At least for the size of screen that you're doing it col-lg you can get it to work by using justify-content-center in the wrapping <div>. What this does is that it moves the empty space to the sides of both elements, bring in them together to the center. I used col-lg-4 in my case, but if that is too small for you you can adjust it to your needs.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="sections">
<div class="container">
<div class="row justify-content-center">
<div class="col-lg-3 left-side"> Development & Design</div>
<div class="col-lg-3 right-side">
Web Designer
<!-- list requested in the comments Here -->
<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>
</div>
</div>
</div>
</div>
You can find more info on Bootstrap Doc
Run this below Snippet :
.sections{
width: 100%;
}
.sections .row {
padding-top: 100px;
}
.sections .left-side {
font-style: italic;
float:left;
width:45%;
}
.sections .right-side {
border-radius: 10px;
display: inline-block;
margin-bottom: 30px;
max-width: 320px !important;
height: 100px;
font-style: italic;
border: 1px solid #000;
background-color: white;
padding: 10px 10px 10px 10px;
float: right;
width:50%;
}
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Homesail</title>
<link rel="shortcut icon" href="assets/img/Uploads/favicon.png">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<link rel="stylesheet" href="test.css">
</head>
<body>
<div class="sections">
<div class="container">
<div class="row">
<div class="col-lg-6 left-side"> Development & Design</div>
<div class="col-lg-6 right-side"> Web Designer
<ul>
<a href=''><li>Qualification</li></a>
<a href=''><li>Go here</li></a>
</ul></div>
</div>
</div>
</div>
</body>
</html>
I'm trying to get three equally sized columns with same margin and background color. But I get column 1 with no margin and background color, column 2 and 3 appear no problem. I'm finding this really frustrating so any help would be greatly appreciated!
Here's my html:
<!DOCTYPE html>
<html lang="en">
<head>
<style>
<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>
div1 {
border: 1px solid grey;
margin-top: 100px;
margin-bottom: 50px;
margin-right: 100px;
margin-left: 50px;
background-color: lightgrey;
}
div2 {
border: 1px solid grey;
margin-top: 100px;
margin-bottom: 50px;
margin-right: 100px;
margin-left: 50px;
background-color: lightgrey;
}
div3 {
border: 1px solid grey;
margin-top: 100px;
margin-bottom: 50px;
margin-right: 100px;
margin-left: 50px;
background-color: lightgrey;
}
</style>
</head>
<body>
<div class="row">
<div1 class="col-sm-4">Column 1</div1>
<div2 class="col-sm-4">Column 2</div2>
<div3 class="col-sm-4">Column 3</div3>
</div>
</body>
</html>
Here's the similar result i'm trying to get:
Here's the wrong one what I get:
As your using bootstrap you may as well use bootstrap, plus a little bit of css to pad the inner panels (to match your desired output). The HTML is all over the place (head code and div*'s).
So here is your code.
<!DOCTYPE html>
<html lang="en">
<head>
<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>
<style>
.panel-pad-10 {
padding: 10px;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-sm-4 panel-pad-10">
<div class="panel panel-default">
<div class="panel-body">Column 1</div>
</div>
</div>
<div class="col-sm-4 panel-pad-10">
<div class="panel panel-default">
<div class="panel-body">Column 2</div>
</div>
</div>
<div class="col-sm-4 panel-pad-10">
<div class="panel panel-default">
<div class="panel-body">Column 3</div>
</div>
</div>
</div>
</div>
</body>
</html>
From: http://getbootstrap.com/css/#overview-container
Bootstrap requires a containing element to wrap site contents and house our grid system. You may choose one of two containers to use in your projects. Note that, due to padding and more, neither container is nestable.
So, wrap it up in a container like this:
<div class="container">
<div class="row">
<div1 class="col-sm-4">Column 1</div1>
<div2 class="col-sm-4">Column 2</div2>
<div3 class="col-sm-4">Column 3</div3>
</div>
</div>
Or use "container-fluid" if you want full width
EDIT: As Lawrence pointed out, if you're going to use custom markup, you need to be sure that it has the display:block property set, otherwise it will not work
Just use Bootstrap. You don't want to override what Bootstrap provides.
<div class="row">
<div class="col-sm-4">
<div class="well">1
</div>
</div>
<div class="col-sm-4">
<div class="well">2
</div>
</div>
<div class="col-sm-4">
<div class="well">3
</div>
</div>
</div>
http://www.codeply.com/go/lUApj2LpiJ?q=
Have you tried Flexbox ?
<!DOCTYPE html>
<html>
<head>
<style>
.flex-container {
display: -webkit-flex;
display: flex;
width: 400px;
min-height: 800px;
background-color: lightgrey;
}
.flex-item {
background-color: cornflowerblue;
width: 100px;
height: 400px;
margin: 10px;
}
</style>
</head>
<body>
<div class="flex-container">
<div class="flex-item">flex item 1</div>
<div class="flex-item">flex item 2</div>
<div class="flex-item">flex item 3</div>
</div>
</body>
</html>
You really shouldn't "invent" your own html tags like this. <div1> is not a valid HTML tag.
Also, since div1, div2, and div3 all are supposed to be styled the same way, you can simply create a class for them like this:
.column {
border: 1px solid grey;
margin-top: 100px;
margin-bottom: 50px;
margin-right: 100px;
margin-left: 50px;
background-color: lightgrey;
}
Then, in your html, do this (combined with LordNeo's reply):
<div class="container">
<div class="row">
<div class="col-sm-4 column">Column 1 Div</div>
<div class="col-sm-4 column">Column 2 Div</div>
<div class="col-sm-4 column">Column 3 Div</div>
</div>
</div>
I am trying to change the background image of a jumbotron I have on one of my views and it just isnt working. I have looked at numerous posts on stack, and tried all of the suggested solutions but none of them are working for me.
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">
<!-- Bootstrap -->
<link href="dist3/css/bootstrap.min.css" rel="stylesheet">
<link href="css/style.css" type="text/css" rel="stylesheet">
</head>
<body>
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<ul>
<li>About</li>
<li>Me</li>
</ul>
</div>
</nav>
<div class="content">
<div class="jumbotron">
<div class="container">
<h1>Allan Araujo</h1>
<p>Example paragraph</p>
</div>
</div>
<section class="pink">
<div class="container-fluid">
<div class="row">
<div class="col-xs-12"><h3>.container-fluid</h3></div>
</div>
<div class="row">
<div class="col-xs-6">Column one</div>
<div class="col-xs-6">Column one</div>
</div>
</div>
</section>
<section class="green">
<div class="container">
<div class="row">
<div class="col-xs-12"><h3>.container</h3></div>
</div>
<div class="row">
<div class="col-xs-6">Column one</div>
<div class="col-xs-6">Column one</div>
</div>
</div>
</section>
</div> <!--END CONTENT-->
</body>
</html>
CSS:
/* ============================================= JUMBOTRON ============================================= */
.jumbotron {
background: url('/img/congruent_pentagon.png') no-repeat center center !important;
background-size: cover;
}
.nav {
text-align: center;
padding: 0;
margin: 0;
background-color: red;
height: 10%;
}
.nav li {
display: inline-block;
margin-right: 5%;
margin-left: 5%;
}
.pink {
background-color: #f99;
}
.green {
background-color: #9f9;
}
section {
padding-bottom: 20px;
}
My folders are structured as follows:
FOLDER
--css
--style.css
--dist
--img
--congruent_pentagon.png
--header.php
--index.php
I have tried to change the url to go see if that was the issue, but that did not fix the problem either. The weird part is the the background right now is grey, but not displaying the image that I want it to.
EDIT: now displaying entire html/css doc. I am using php to load in nav bars but I just combined them here to make it easier to look at.
The issue is related to the url to your image, change it to /img/congruent_pentagon.png
Online example: http://jsfiddle.net/tthLjchm/1/
Css:
.jumbotron {
background: url('http://getbootstrap.com/assets/img/sass-less.png') no-repeat center center !important;
height: 50%;
margin-top: 10px;
color: black;
}
.jumbotron p, h1 {
text-align: center;
}
The issue was that the image had to be placed within my css folder.