.latestQuestions{
height: 400px;
}
.latestQuestions .row{
box-sizing: border-box;
}
<head>
<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>
<div class="bg-info latestQuestions container">
Latest Questions
<div class="bg-primary h-100 row">
<div class="col-sm">col1</div>
<div class="col-sm">col2</div>
<div class="col-sm">col3</div>
</div>
</div>
<p>OK</p>
I have a row inside a <div> and when I put background color to the row it spills out of the <div> vertically. I googled the solutions and all solutions are related to the horizontal spilling. I have used BootStrap latest version.
I have tried using box-sizing: border-box; Tried using class="container" in the outer div (It only helps in the horizontal spilling).
.latestQuestions {
height: 400px;
}
.latestQuestions .row {
box-sizing: border-box;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<div class="bg-info latestQuestions container">
Latest Questions
<div class="bg-primary h-100 row">
<div class="col-sm">col1</div>
<div class="col-sm">col2</div>
<div class="col-sm">col3</div>
</div>
</div>
<p>OK</p>
enter image description hereYou can see that OK comes inside the color of the row. I want it outside and below that row.
Make the container a flex-column and then apply flex:1 to the row (removing h-100).
There are Bootstrap classes flex-column etc that can help with this.
.latestQuestions {
height: 200px;
/* adjusted for demo */
display: flex;
flex-direction: column
}
.latestQuestions .row {
box-sizing: border-box;
flex: 1;
}
<head>
<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>
<div class="bg-info latestQuestions container">
Latest Questions
<div class="bg-primary row">
<div class="col-sm">col1</div>
<div class="col-sm">col2</div>
<div class="col-sm">col3</div>
</div>
</div>
<p>OK</p>
Remove h-100 as its stands for height: 100% for block
.latestQuestions{
height: 400px;
}
.latestQuestions .row{
box-sizing: border-box;
}
<head>
<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>
<div class="bg-info latestQuestions container">
Latest Questions
<div class="bg-primary row">
<div class="col-sm">col1</div>
<div class="col-sm">col2</div>
<div class="col-sm">col3</div>
</div>
</div>
<p>OK</p>
Related
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 have two icons inside the "col" class. It is sprite icons wrapped with anchor tag. It is stacked one on above. I want it be in one line horizontally. Also I want to reorder it with the bootstrap "order" class . How can I do that? Please help me!
I tried to wrap it with additional row and col.And use flex with flex-direction but nothing helped.
Inside footer
Two icons what I want to align inside my .segment-six class
Icons above each other. I want to see it in horizontal. I want to reorder these stuff to be .segment-four be first then .segment-six then .segment-five in stack
.segment-six {
/* display: flex;
flex-direction: row; */
width: 120px;
/* margin-left:auto;
margin-right: 20%; */
img {
max-width: 100%;
max-height: 100%;
/* padding-left: 50px; */
}
}
<!-- Bootstrap -->
<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">
<div class="row">
<div class="col-md-3 col-sm-12 col-xs-12 segment-four">
<img src="https://via.placeholder.com/50">
</div>
<div class="col-md-3 col-sm-12 col-xs-12 segment-six">
<img src="https://via.placeholder.com/100">
<img src="https://via.placeholder.com/150">
</div>
<div class="col-md-6 col-sm-12 col-xs-12 segment-five">
<p>©TOO SMART PAY ПЛАТЕЖНАЯ ОРГАНИЗАЦИЯ №02-17-012 OT 09.02.2017 РЕЕСТР НАЦИОНАЛЬНОГО БАНКА РК</p>
</div>
</div>
add this code in your css
css
.segment-six a{
float: left;
}
.segment-six a img{
max-width:100%;
height:auto;
}
Use order instead of .segment if you are using bootstrap 4.
For example: .order-5 instead of .segment-five.
The items are horizontally to eachother, have you included bootstrap in your header? <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">
.order-6 {
/* display: flex;
flex-direction: row; */
width: 120px;
/* margin-left:auto;
margin-right: 20%; */
img {
max-width: 100%;
max-height: 100%;
/* padding-left: 50px; */
}
}
<!-- Bootstrap -->
<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">
<div class="row">
<div class="col-md-3 col-sm-12 col-xs-12 order-4">
<img src="https://dummyimage.com/100x100/888/fff.jpg&text=image+1">
</div>
<div class="col-md-3 col-sm-12 col-xs-12 order-6">
<img src="https://dummyimage.com/100x100/888/fff.jpg&text=image+2">
<img src="https://dummyimage.com/100x100/888/fff.jpg&text=image+3">
</div>
<div class="col-md-6 col-sm-12 col-xs-12 order-5">
<p>©TOO SMART PAY ПЛАТЕЖНАЯ ОРГАНИЗАЦИЯ №02-17-012 OT 09.02.2017 РЕЕСТР НАЦИОНАЛЬНОГО БАНКА РК</p>
</div>
</div>
Further explanation about the order class: https://getbootstrap.com/docs/4.3/layout/grid/#order-classes
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>
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 have a text inside a col, and i would like to know how can i put this text in the middle of the col.
<div class="container-fluid">
<div class="row">
<div class="col-xs-2 "><img src="images/header/picture.png" alt="Menu"></div>
<div class="col-xs-7 ">Perfile</div>
<div class="col-xs-3"><img src="images/header/picture.png" alt="Menu"></div>
</div>
try this.
In the class row add style="text-align: center"
Then change class="col-xs-2", class="col-xs-7",class="col-xs-3"
to class="col-xs-12"
Perfile
You can use bootstrap class text-center to center your element in the column
<div class="container-fluid">
<div class="row">
<div class="col-xs-2 "><img src="images/header/picture.png" alt="Menu"></div>
<div class="col-xs-7 text-center">Perfile</div>
<div class="col-xs-3"><img src="images/header/picture.png" alt="Menu"></div>
</div>
Bootstrap. How to align vertically the contents of the menu
I have four solutions. The first of these requires that images were the same height. In three others the images may differ in height.
1. line-height
You can set a property line-height for the text. line-height must be equal to the height of images. It is suitable when the text occupies one line and images have the same height.
.put-in-the-middle {
line-height: 80px; /* = height of the picture.png */
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<div class="container-fluid">
<div class="row">
<div class="pull-left"><img src="http://placehold.it/80x80/69c/fff/" alt="Menu"></div>
<div class="pull-right"><img src="http://placehold.it/120x80/9c6/fff/" alt="Menu"></div>
<div class="put-in-the-middle text-center">Perfile</div>
</div>
</div>
2. table-cell
You can transform blocks in table cells. Then apply vertical-align: middle; to them.
.transform-in-a-table {
display: table;
}
.transform-in-a-table div {
display: table-cell !important;
vertical-align: middle;
}
.make-it-wide {
width: 100%;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<div class="container-fluid">
<div class="row transform-in-a-table">
<div><img src="http://placehold.it/80x40/c69/fff/" alt="Menu"></div>
<div class="make-it-wide text-center">Perfile</div>
<div><img src="http://placehold.it/120x80/9c6/fff/" alt="Menu"></div>
</div>
</div>
3. HTML table
.make-it-wide {
width: 100%;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<table>
<tr>
<td><img src="http://placehold.it/80x40/c69/fff/" alt="Menu"></td>
<td class="make-it-wide text-center">Perfile</td>
<td><img src="http://placehold.it/120x80/9c6/fff/" alt="Menu"></td>
</tr>
</table>
4. inline-block + text-align-last
You can use the idea from vertical-align with Bootstrap 3 with property text-align-last.
.vertical-middle {
text-align-last: justify;
}
.vertical-middle > div,
.vertical-middle > img {
display: inline-block;
vertical-align: middle;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<div class="container-fluid">
<div class="row vertical-middle">
<img src="http://placehold.it/80x40/c69/fff/" alt="Menu">
<div>Perfile</div>
<img src="http://placehold.it/120x80/9c6/fff/" alt="Menu">
</div>
</div>