In my header I have three logos. I need to center those logoes, where there is a margin between them on around 100 - 140px. I did not know how to do that, so I solved it with putting a margin on 150px, with the result that the logos are not placed on mobile devices.
On the mobile they should be vertical instead of horizontal.
I actually thought I could do it like this:
display: inline;
margin: 0 auto;
But that is not doing abything at all. Does anybody knows how I can solve this, so they also fit on mobile devices?
<div class="fullscreen landing parallax">
<div class="overlay">
<div class="container">
<div class="row">
<div class="col-md-12 logo">
<!-- /.logo -->
<img src="/img/seminar/company_1-logo-white-small.png" alt="company_1" class="logo">
<img src="/img/seminar/company_2-white.png" alt="company_2">
<img src="/img/seminar/company_3-white.png" alt="company_3">
</div>
</div>
</div>
</div>
</div>
CSS
.logo {
margin: 20px 0 15px 0;
}
.logo img{
margin-left: 160px;
width: 163px;
}
Try to separate the row into 3 columns and place the images inside the column with bootstrap's text-center class. Bootstrap will align images vertically on mobile UI.
On iPad horizotal
On iPad vertical
On desktop browser
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<style type="text/css">
.logo {
margin: 20px 0 15px 0;
}
.logo img {
margin-left: 160px;
width: 163px;
}
</style>
</head>
<body>
<div class="fullscreen landing parallax">
<div class="overlay">
<div class="container">
<div class="row">
<div class="col-md-4 text-center">
<img src="http://vignette4.wikia.nocookie.net/mrmen/images/5/52/Small.gif/revision/latest?cb=20100731114437" alt="company_1" class="logo">
</div>
<div class="col-md-4 text-center">
<img src="http://vignette4.wikia.nocookie.net/mrmen/images/5/52/Small.gif/revision/latest?cb=20100731114437" alt="company_1" class="logo">
</div>
<div class="col-md-4 text-center">
<img src="http://vignette4.wikia.nocookie.net/mrmen/images/5/52/Small.gif/revision/latest?cb=20100731114437" alt="company_1" class="logo">
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Add this:
.logo {
display:flex;
justify-content:center;
align-items:center;
}
You'll probably need to set a width on the .logo element and maybe `margin:0 auto;' too depending on its width.
For more info on flexbox: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
Live example:
.logo {
display:flex;
justify-content:center;
align-items:center;
}
.logo img {
margin-left:10px;
margin-right:10px;
}
<div class="logo">
<img src="http://placekitten.com/200/100" alt="">
<img src="http://placekitten.com/200/100" alt="">
<img src="http://placekitten.com/200/100" alt="">
</div>
Related
I have 3 images which are not the same size in Desktop format, how do I get the same size? Then in mobile format I would like it to overlap by taking the entire width.
I tried with flex-direction: column but it doesn't work. I use flexbox for my code.
.background-color {
background-color: #f05f40;
}
h2 {
text-align: center;
padding-top: 2%;
margin-top: 0;
}
.row {
display: flex;
width: 100%;
text-align: center;
}
.content {
justify-content: space-around;
padding: 0 10px;
}
img {
height: 200px;
object-fit: cover;
object-position: center center;
}
#media screen and (max-width: 600px) {
.column {
width: 100%;
}
.content {
flex-direction: column;
}
}
<div class="background-color">
<h2 id="projets">Mes Projets</h2>
<div class="row">
<div class="column">
<div class="content">
<img class="img" src="/assets/img/projectImage/pain.jpg" alt="Bred" style="width: 100%;">
<h3>My Work</h3>
<p>Lorem ipsum..</p>
</div>
</div>
<div class="column">
<div class="content">
<img class="img" src="/assets/img/projectImage/catmash.jpg" alt="catmash" style="width: 100%;">
<h3>My Work</h3>
<p>Lorem ipsum..</p>
</div>
</div>
<div class="column">
<div class="content">
<img class="img" src="/assets/img/projectImage/snakgame.jpg" alt="snakegame" style="width: 100%;">
<h3>My Work</h3>
<p>Lorem ipsum..</p>
</div>
</div>
</div>
</div>
You are add flex-direction: column inside .content which doesn't have display: flex. Instead you need to add in .row which wraps all three contents
#media screen and (max-width: 600px) {
.column {
width: 100%;
}
.content {
flex-direction: column;
}
}
Take a look at this:
<!DOCTYPE html>
<html lang="en">
<head>
<title>3 Images responsive</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-4">
<div class="thumbnail">
<img src="https://www.w3schools.com/w3images/lights.jpg" alt="Lights" style="width:100%">
</div>
</div>
<div class="col-md-4">
<div class="thumbnail">
<img src="https://www.w3schools.com/w3images/nature.jpg" alt="Nature" style="width:100%">
</div>
</div>
<div class="col-md-4">
<div class="thumbnail">
<img src="https://www.w3schools.com/w3images/fjords.jpg" alt="Fjords" style="width:100%">
</div>
</div>
</div>
</div>
</body>
</html>
You would achieve the same size for all images by setting the width and height to the same value. I normally just resize all images in a image editing software such as Photoshop and then just import them. Saves you the work with sizing in CSS.
I have a couple of images
mockleft.png - 1228x500px
mockright.png - 1825x335px
My code is as below..
<head>
<link href="css/bootstrap.min.css" rel="stylesheet">
</head>
<body id="home">
<div class="intro">
<div class="row">
<div class="col-xs-5" style="background-color:blue">
<img src="img/mockleft.png" alt="logo" style="width:100%;">
</div>
<div class="col-xs-1"></div>
<div class="col-xs-6" style="background-color:red;">
<img src="img/mockright.png" alt="logo" style="width:100%;">
</div>
</div>
</div>
</body>
The output is as below..
I wish for two things..
a) The left div with blue background should be same height as right div with red background and vice versa.
b)Once the right div with red background becomes same size with the left one, I want the mockright.png image to be vertically aligned at bottom of the right div.
I tried the vertical-align css to both the div as well as image without success.
All help is sincerely appreciated
Thanks
You could do it with flexbox. If you use Bootstrap 4 as #Pete suggests in the comments, you could achieve the same, since it uses flexbox.
JSFiddle Demo
.row {
display: flex;
}
.col-xs-1 {
width: 10%;
}
.col-xs-5 {
display: flex;
flex-direction: column;
width: 40%;
background: blue;
justify-content: flex-end;
}
.col-xs-6 {
width: 50%;
background: red;
}
<div class="row">
<div class="col-xs-5">
<img src="https://placekitten.com/600/400" alt="logo" style="width:100%;">
</div>
<div class="col-xs-1"></div>
<div class="col-xs-6">
<img src="https://placekitten.com/600/400" alt="logo" style="width:100%;">
</div>
</div>
a) Assuming you need to use Bootstrap 3, what you can do is use one of the options provided to make the columns the same height:
How can I make Bootstrap columns all the same height?
b) For that part, use auto margin:
<img src="img/mockright.png" alt="logo" style="width:100%; margin-top: auto;">
Hope it helps :)
I am trying to create a responsive web page using bootstrap. In the small view (xs and sm) the page works fine. I hid some images for the smaller view and it has a very standard layout.
Problem starts when I increase the screen size. In the large views (>=md) I have tried to stack four images column-wise with a row. The fourth image always goes to the next row, no matter what I do.
I have tried setting margin,padding and borders to zero but still no luck. I have attached a link to my problem in code pen. The actual html file and css are slightly bigger so I have narrowed it down only to show the problematic part. Please ignore any unused classes or ids in my code. Thanks
https://codepen.io/maheenul/pen/mLdmvy?editors=1100
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Responsive Design Lab</title>
<link rel="stylesheet" type="text/css" href="css/responsive.css"/>
<meta charset = "UTF-8">
<!-- Latest compiled and minified CSS -->
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
</head>
<body>
<section id = "center">
<div class="container">
<div class="row">
<div class="col-12">
<h2>Images not confined within the row</h2>
<div class="myClass">
<h3> Loren Ipsum</h3>
</div>
</div>
</div>
<div class="row d-none d-md-block">
<img class="col-md-3" src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcTzDojh5E0fzvTg4nWYs0JadpTwcS2S1KHOtnVQnlruNqmNvfIk" alt="Football">
<img class="col-md-3" src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcTO8WIJ5ygVENopHPC5Op9z4ua-MoGD-LoUZuEd6vdL-EMro28CWw" alt="Solar Car">
<img class="col-md-3" src="http://www-personal.umich.edu/~jensenl/visuals/album/annarbor/IMG_1051.jpg" alt="campus">
<img class="col-md-3" src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcTzDojh5E0fzvTg4nWYs0JadpTwcS2S1KHOtnVQnlruNqmNvfIk" alt="Football">
</div>
</div>
</section>
<footer>
<p>The images above don't stack .<br/> Responsive Design</p>
</footer>
</body>
</html>
CSS:
body{
margin: 1%;
padding:1%;
background-color: rgba(0,0,255,.2) !important;
font-size: 100%;
min-width: 500px;
}
header, footer{
background-color:#0066FF;
padding: 1%;
margin: 1%;
}
header h1{
font-size: 3rem;
color:rgba(0,0,0,.7);;
}
section{
margin:0%;
padding:0%;
}
.myClass{
margin: 0em 1em;
padding:.75em;
border: 1px solid black;
border-radius: .25%;
}
footer{
clear: both;
text-align:center;
text-transform: uppercase;
}
#media screen and (min-width: 768px){
header, footer{
background-color:transparent;
}
img{
display: inline-block;
margin: 0;
padding: 0;
border:0;
overflow: auto;
}
}
Add font-size: 0; on <div class="row d-none d-md-block">.
The spaces between images are taking space, thats why its not fitting in 1 row.
The problem you're having with row d-none d-md-block is that the Grid in Bootstrap 4 is not a block element; it is flex. This code changes the display method on MD+ devices from flex to block.
The correct class to use is row d-none d-md-flex. When you do this you restore Bootstrap's Grid behavior; but you also cause your images to display incorrectly as you've applied the Grid directly to the image. To fix that we have to wrap the columns around the image and then apply some responsive image behavior to the actual image element.
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
<div class="container">
<div class="row">
<div class="col-12">
<h2>Images not confined within the row</h2>
<div class="my-3 p-3 border border-secondary bg-secondary text-light">
<h3>Loren Ipsum</h3>
</div>
</div>
</div>
<div class="row align-items-center d-none d-md-flex">
<div class="col-md-3"><img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcTzDojh5E0fzvTg4nWYs0JadpTwcS2S1KHOtnVQnlruNqmNvfIk" class="img-fluid img-thumbnail" alt="Football"></div>
<div class="col-md-3"><img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcTO8WIJ5ygVENopHPC5Op9z4ua-MoGD-LoUZuEd6vdL-EMro28CWw" class="img-fluid img-thumbnail" alt="Solar Car"></div>
<div class="col-md-3"><img src="http://www-personal.umich.edu/~jensenl/visuals/album/annarbor/IMG_1051.jpg" class="img-fluid img-thumbnail" alt="campus"></div>
<div class="col-md-3"><img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcTzDojh5E0fzvTg4nWYs0JadpTwcS2S1KHOtnVQnlruNqmNvfIk" class="img-fluid img-thumbnail" alt="Football"></div>
</div>
</div>
Note: Because we're hiding elements at the smallest breakpoint you will need to expand the snippet to see the full results.
(bootstrap 3 and Laravel 5.1 framework)
I have 3 divs in a Boostrap row. Each div has an image and some text that is centered on that image. I would like all three DIVs to be side by side (vertically centered in the row) but I can't seem to achieve it. I have searched through a number of posts but mostly they are simple solutions and aren't working for the complexity I have with mine.
HTML
<div class="container">
<div class="row"> <!--Timer and scoring of match -->
<div class="wrapcontrols" style="float: left">
<img src="/img/leftminus.png">
<img src="/img/blackscore.png">
<img src="/img/rightplus.png">
<h2 class="clocktime">5</h2>
</div>
<div class="wrap">
<img src="/img/clockbackground.png">
<h2 class="clocktime">03:00</h2>
</div>
<div class="wrapcontrols" style="float: right">
<img src="/img/leftminus.png">
<img src="/img/yellowscore.png">
<img src="/img/rightplus.png">
<h2 class="clocktime">5</h2>
</div>
</div>
CSS
.wrap {
width: 152px;
height:auto;
vertical-align:middle;
margin: auto;
text-align:center;
position:relative; }
.clocktime {
position: absolute;
font-family: 'Nunito', sans-serif;
font-weight: 400;
margin: auto;
top: 0;
left:0;
right:0;
bottom:0;
color:#fff;
height:36px; }
.wrapcontrols {
width: 375px;
vertical-align:middle;
height: auto;
margin: auto;
text-align:center;
position:relative; }
Here is what it looks like currently
Here, I added appropriate classes that are required for the Bootstrap.I also removed your inline CSS. I would also remove some CSS styles for wrapcontrols and wrap divs.
<div class="container">
<div class="row"> <!--Timer and scoring of match -->
<div class="wrapcontrols col-sm-4">
<img src="/img/leftminus.png">
<img src="/img/blackscore.png">
<img src="/img/rightplus.png">
<h2 class="clocktime">5</h2>
</div>
<div class="wrap col-sm-4">
<img src="/img/clockbackground.png">
<h2 class="clocktime">03:00</h2>
</div>
<div class="wrapcontrols col-sm-4">
<img src="/img/leftminus.png">
<img src="/img/yellowscore.png">
<img src="/img/rightplus.png">
<h2 class="clocktime">5</h2>
</div>
</div>
THis is the correct Bootstrap Structure:
<div class="row">
<div class="col-sm-4"></div>
<div class="col-sm-4"></div>
<div class="col-sm-4"></div>
</div><!--end row-->
I'm making a header with Bootstrap. My page-header contains an image and text. I want the text to be vertically centered in the header. It seems like an easy, fix, but I'm running into trouble. I made a custom class called v-align where I set the vertical-alignment: middle;, but it's not working. Any suggestions?
Image:
HTML:
<html>
<head>
<!-- CSS -->
<link rel="stylesheet" href="bootstrap.min.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="row">
<div class="col-sm-8 col-sm-offset-2">
<div id="form-container">
<div class="page-header text-center">
<div class="row">
<img class="col-xs-4"src="Popcorn.png" width="100" height="auto" >
<div class="col-xs-8 v-align">
<h2>Sparky's Movie Theater</h2>
</div>
</div>
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.13.0/ui-bootstrap-tpls.min.js"></script>
</body>
</html>
Css Class:
.v-align {
height: 100%;
display:table-cell;
vertical-align: middle;
}
I was able to get my text to be vertically aligned by adding the following to my css code:
CSS:
#box {
height: 100px;
line-height: 100px;
text-align: center;
}
#spantext {
display: inline-block;
vertical-align: middle;
line-height: normal;
}
HTML:
<div class="col-xs-8" id="box">
<h2 id="spantext">Sparky's Movie Theater</h2>
</div>
Remove the padding and margin in <H2>
h2{
margin:0;
padding:0;
}