I'm building a website in Bootstrap but when I switch my website to a mobile responsive view some elements are bumping into each other like this.
That's how site looks in the large version.
I'm tried to add some media queries.
#media (max-width: 992px) {
/*Intro*/
.title {
font-size: 30px;
}
.title-text {
font-size: 12px;
}
.title-btn button {
padding: 10px 35px !important;
}
}
But elements still are bumping into each other when I switch to mobile responsive view.
My HTML code:
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet"/>
<!-- Intro -->
<section class="intro" id="intro">
<div class="container">
<div class="row">
<div class="col-lg-6 order-1 order-lg-2">
<img class="img-fluid" src="Img/Intro/Phone.png" alt="">
</div>
<div class=" col-lg-6 order-2 order-lg-1 title-block">
<div class="pre-title">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-award" viewBox="0 0 16 16">
<path d="M9.669.864L8 0 6.331.864l-1.858.282-.842 1.68-1.337 1.32L2.6 6l-.306 1.854 1.337 1.32.842 1.68 1.858.282L8 12l1.669-.864 1.858-.282.842-1.68 1.337-1.32L13.4 6l.306-1.854-1.337-1.32-.842-1.68L9.669.864zm1.196 1.193l.684 1.365 1.086 1.072L12.387 6l.248 1.506-1.086 1.072-.684 1.365-1.51.229L8 10.874l-1.355-.702-1.51-.229-.684-1.365-1.086-1.072L3.614 6l-.25-1.506 1.087-1.072.684-1.365 1.51-.229L8 1.126l1.356.702 1.509.229z"/>
<path d="M4 11.794V16l4-1 4 1v-4.206l-2.018.306L8 13.126 6.018 12.1 4 11.794z"/>
</svg>
<p>#1 Editiors Choice App of 2020</p>
</div>
<h1 class="title">
Best app for your
modern lifestyle
</h1>
<p class="title-text">
Increase productivity with a simple to-do app. app for
managing your personal budgets.
</p>
<div class="title-btn">
<button type="button" class="btn btn-primary">
Try for free
</button>
Watch demo video
</div>
</div>
</div>
</div>
</section>
<!-- Features -->
<section class="features" id="features">
<div class="container">
<div class="companies">
<p class="companies-text">Trusted by companies like</p>
</div>
<div class="row companies-logos">
<div class="col-sm">
<img src="Img/Companies/SouthWest.png " class="img-fluid" alt="">
</div>
<div class="col-sm">
<img src="Img/Companies/Anubis.png" class="img-fluid" alt="">
</div>
<div class="col-sm">
<img src="Img/Companies/Alonzo.png" class="img-fluid" alt="">
</div>
<div class="col-sm">
<img src="Img/Companies/Express.png" class="img-fluid" alt="">
</div>
<div class="col-sm">
<img src="Img/Companies/Maniac.png" class="img-fluid" alt="">
</div>
</div>
</div>
</section>
The problem is that looks like structure of HTML in your footer section. Initializing the row div, you should have used "col" feature as you used. Your code looks like the same what I explain. However, there is a little bit difference compare to what i mention. In order to make it clear for you, i have build up this snippet for you. You need to use "col" feature on element that you want to layout . In your code, you used for container of image tags which is not the element you want to make it responsive. That is why you got bumping into each other. I wish that yoou figure it out. Cheers!
.box{
background-color: red;
width: 200px;
height: 200px;
display: inline-block;
}
.box-1{
background-color: yellow;
}
.box-2{
background-color: purple;
}
.box-3{
background-color: blue;
}
.box-4{
background-color: green;
}
.box-5{
background-color: lightpink;
}
<!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" />
<link rel="stylesheet" href="style.css" />
<link
href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css"
rel="stylesheet"
/>
<title>stackover</title>
</head>
<body>
<section class="features" id="features">
<div class="container">
<div class="companies">
<p class="companies-text">Trusted by companies like</p>
</div>
<div class="row companies-logos">
<div class="col-lg-4 col-md-3 col-sm-6 box box-1">Logo-1</div>
<div class="col-lg-4 col-md-3 col-sm-6 box box-2">Logo-2</div>
<div class="col-lg-4 col-md-3 col-sm-6 box box-3">Logo-3</div>
<div class="col-lg-4 col-md-3 col-sm-6 box box-4">Logo-4</div>
<div class="col-lg-4 col-md-3 col-sm-6 box box-5">Logo-5</div>
</div>
</div>
</section>
</body>
</html>
Related
I am using bootstrap and I am trying to create the following layout:
I tried
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="col-lg-2 text-left">
<div class="card card-primary">
<div class="card-body p-2">
<img class="tv-symbol-icon tv-symbol-icon--size-auto" src="https://s3-symbol-logo.tradingview.com/apple--big.svg" alt="Apple Inc icon">
<div>APPLE INC (AAPL)</div>
<div>NASDAQ</div>
<div><img class="tv-flag-country tv-flag-country--us tv-flag-country--size_sub_title" src="https://www.tradingview.com/static/images/svg/common/flags/flag-square-us.svg" alt="US Flag"></div>
</div>
</div>
</div>
I tried flexboxes, however my layout does not arrange.
How to arrange the text next to the image?
Any suggestions what I am doing wrong?
You were 95% the way there. I have finished it off for you.
Really all you were missing was some nested bootstrap to make a col-10 that contains the company details sitting alongside the logo.
.name {
font-size: 2rem;
}
.tv-symbol-icon {
border-radius: 50%;
width: 100%;
}
.tv-flag-country {
margin: 0 0.5em;
border-radius: 50%;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="col-lg-2 text-left">
<div class="card card-primary">
<div class="card-body p-2">
<div class="row">
<div class="col-sm-2">
<img class="tv-symbol-icon tv-symbol-icon--size-auto" src="https://s3-symbol-logo.tradingview.com/apple--big.svg" alt="Apple Inc icon">
</div>
<div class="col-sm-10">
<div class="row">
<div class="name">APPLE INC</div>
</div>
<div class="row">
<div>NASDAQ</div>
<div><img class="tv-flag-country tv-flag-country--us tv-flag-country--size_sub_title" src="https://www.tradingview.com/static/images/svg/common/flags/flag-square-us.svg" alt="US Flag"></div>
<div>(AAPL)</div>
</div>
</div>
</div>
</div>
</div>
</div>
I want to place 2 links on the left and 1 on the right side under some images.
The images are all different sizes and everything in my main div is centered.
main .about p {
margin-left: 50%;
transform: translateX(-50%);
width: 700px;
line-height: 1.5;
font-weight: 400;
z-index: 9;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<main class="section mb-5">
<!-- Main -->
<section class="container mb-4">
<div class="row">
<div class="col-md-12 ml-md-auto text-center about">
<header>
<h1 class="mb-3">Some Title</h1>
</header>
<img src="image.jpg" height="484" width="700">
<p class="text-left">
FHD Ansicht |
4K Ansicht
</p>
</div>
</div>
</section>
</main>
At the moment i did set the paragraph under the image to the width of the image:
And it looks like this with text only on the left side:
What i need is:
I guess a figure around the image and the text inside it is part of the solution.
Whats the best way doing it in the latest bootstrap?
Try playing with this snippet:
<main class="container-fluid">
<div class="row">
<img class="col-md-12" src="#" alt="test" style="background-color: blue; height: 400px;">
</div>
<div class="row subtitle-container">
<div class="col-md-10 left-subtitle">
Some Text | Some Text
</div>
<div class="col-md-2 right-subtitle">
Some Text
</div>
</div>
</main>
You can use float-left and float-right bootstrap classes to get texts to the left and right.
main .about p {
margin-left: 50%;
transform: translateX(-50%);
width: 700px;
line-height: 1.5;
font-weight: 400;
z-index: 9;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<main class="section mb-5">
<!-- Main -->
<section class="container mb-4">
<div class="row">
<div class="col-md-12 ml-md-auto text-center about">
<header>
<h1 class="mb-3">Some Title</h1>
</header>
<img src="image.jpg" class="w-100" height="484" width="700">
<div class="text-center clearfix">
FHD Ansicht
<span class="float-left mx-2">|</span>
4K Ansicht
<!-- <span>|</span> -->
another link
</div>
</div>
</div>
</section>
</main>
I am creating an image gallery with 3 rows, each containing 3 images by using the Bootstrap grid system. All of the images have different size. What I am trying to do is make all of the images the same size.
I tried to use the max-height or max-width in my CSS, however it didn't help to make all the images (thumbnails) similar size.
Should I just get rid of the thumbnail class or is there any other solution?
body {
padding-top: 70px;}
.row .flex {
display: inline-flex;
width: 100%;}
img {
width:100%;
min-height:100px;}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row match-to-row">
<div class="col-lg-4 col-sm-6">
<div class="thumbnail">
<img src="https://source.unsplash.com/eKTUtA74uN0" alt="">
</div>
</div>
<div class="col-lg-4 col-sm-6">
<div class="thumbnail">
<img src="https://source.unsplash.com/x-tbVqkfQCU" alt="">
</div>
</div>
<div class="col-lg-4 col-sm-6">
<div class="thumbnail">
<img src="https://source.unsplash.com/cjpGSEkXfwM" alt="">
</div>
</div>
<div class="row match-to-row">
<div class="col-lg-4 col-sm-6">
<div class="thumbnail">
<img src="https://source.unsplash.com/63JKK67yGUE" alt="">
</div>
</div>
<div class="col-lg-4 col-sm-6">
<div class="thumbnail">
<img src="https://source.unsplash.com/YP6lDrlxWYQ" alt="">
</div>
</div>
<div class="col-lg-4 col-sm-6">
<div class="thumbnail">
<img src="https://source.unsplash.com/NqE8Ral8eCE" alt="">
</div>
</div>
<div class="row flex match-to-row">
<div class="col-lg-4 col-sm-6">
<div class="thumbnail">
<img src="https://source.unsplash.com/6oUsyeYXgTg" alt="">
</div>
</div>
<div class="col-lg-4 col-sm-6">
<div class="thumbnail">
<img src="https://source.unsplash.com/WF2lvywxdMM" alt="">
</div>
</div>
<div class="col-lg-4 col-sm-6">
<div class="thumbnail">
<img src="https://source.unsplash.com/2FdIvx7sy3U" alt="">
</div>
</div>
</div>
</div>
I think the property you're looking for is object-fit
img {
width: 200px; /* You can set the dimensions to whatever you want */
height: 200px;
object-fit: cover;
}
The object-fit property works similarly to how you would using background-size: cover on a background image to make it fill the page without stretching. This way, you can define a width in a rule that all images will follow to ensure that they are the same size without distorting your picture.
Other values you can use with this property includes:
fill - stretch the image.
contain - preserve the aspect ratio of the image.
cover - Fill the height and width of the box.
none - Keep the original size.
scale-down - compare the differences between none and contain to find the smallest object size.
object-fit | CSS-Tricks
Add the css class img-responsive to every image.
just modify this:
img {
width: 100px; // how much you want
min-height: 100px;
float: left;
margin: 10px;
}
Go to "Inspect Element" in your browser and look for something like:
.thumbnail a>img, .thumbnail>img {
display: block;
width: 100%;
height: auto; }
Change it to:
.thumbnail a>img, .thumbnail>img {
display: block;
width: 100%;
height: 300px; //change as per your requirement }
Bootstrap’s grid system uses a series of containers, rows, and columns to layout and align content. Top level, is Container and rows and columns are displayed under it.
In Bootstrap, there are 4 classes
xs (for phones - screens less than 768px wide)
sm (for tablets - screens equal to or greater than 768px wide)
md (for small laptops - screens equal to or greater than 992px wide)
lg (for laptops and desktops - screens equal to or greater than 1200px wide)
How to decide on column display:
A page is divided into 12columns grid and width is calculated as
width: percentage((#columns / #grid-columns));
1 column / 12 grid-columns = 8.33% * 1170px = 97.5px
there are no partial pixels so browsers rounds the number.
col-md-2 - Will display 6 images in a row. 2 means 2 columns to display an image
col-sm-12 - Class will help in stacking the image when opened on small devices
.img-center - Is custom class to defined additional properties for the image box
Hope this helps.
.img-center {
text-align: center;
border-radius: 8px;
width: 100px;
background-color: white;
box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.15), 0 2px 3px 0 rgba(0, 0, 0, 0.1);
}
.row {
display: flex;
margin: auto;
}
<!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="EightImages.css" />
<link rel="images" href="images" />
<link rel="stylesheet" href="css/bootstrap-grid.min.css" />
<link rel="stylesheet" href="css/bootstrap.min.css" />
<title>Document</title>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-sm-12 col-md-2">
<img
class="img-fluid img-center"
src="https://cdn.pixabay.com/photo/2016/09/07/11/37/tropical-1651426__340.jpg"
/>
<p>
Test
</p>
</div>
<div class="col-sm-12 col-md-2">
<img
class="img-fluid img-center"
src="https://cdn.pixabay.com/photo/2016/09/07/11/37/tropical-1651426__340.jpg"
/>
<p>
Test
</p>
</div>
<div class="col-sm-12 col-md-2">
<img
class="img-fluid img-center"
src="https://cdn.pixabay.com/photo/2016/09/07/11/37/tropical-1651426__340.jpg"
/>
<p>
Test
</p>
</div>
<div class="col-sm-12 col-md-2">
<img
class="img-fluid img-center"
src="https://cdn.pixabay.com/photo/2016/09/07/11/37/tropical-1651426__340.jpg"
/>
<p>
Test
</p>
</div>
<div class="col-sm-12 col-md-2">
<img
class="img-fluid img-center"
src="https://cdn.pixabay.com/photo/2016/09/07/11/37/tropical-1651426__340.jpg"
/>
<p>
Test
</p>
</div>
<div class="col-sm-12 col-md-2">
<img
class="img-fluid img-center"
src="https://cdn.pixabay.com/photo/2016/09/07/11/37/tropical-1651426__340.jpg"
/>
<p>
Test
</p>
</div>
<div class="col-sm-12 col-md-2">
<img
class="img-fluid img-center"
src="https://cdn.pixabay.com/photo/2016/09/07/11/37/tropical-1651426__340.jpg"
/>
<p>
Test
</p>
</div>
<div class="col-sm-12 col-md-2">
<img
class="img-fluid img-center"
src="https://cdn.pixabay.com/photo/2016/09/07/11/37/tropical-1651426__340.jpg"
/>
<p>
Test
</p>
</div>
</div>
</div>
<script src="js/bootstrap.min.js"></script>
<script
src="https://code.jquery.com/jquery-3.2.1.slim.min.js"
integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
crossorigin="anonymous"
></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>
</body>
</html>
I already tried different solutions posted here to get two columns with the same height, but unfortunately I can't get this to work. The Problem is, that I have three images, one on the left in "portrait mode" and two on the right in "landscape mode". I want both images together on the right to have the same height as the image on the left.
I think that this could be a solution, but I didn't get this to work: The two items on the right could each have a height of 50% of the div on the left. The images inside the item then should fill the height and have an auto width.
Like this:
Here is what my basic code looks so far: https://jsfiddle.net/qg7t976L/
.padding-0 {
padding: 0;
}
img {
width: 100%;
}
img {
border: 1px white solid;
}
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet" />
<div id="work" class="content">
<div class="container-fluid work-body">
<div class="row">
<div class="padding-0 col-sm-6">
<div class="work-inner">
<div class="work-item">
<img src="http://placehold.it/500x750" alt="work1">
</div>
<!--/.work-item-->
</div>
<!--/.work-inner-->
</div>
<div class="padding-0 col-sm-6">
<div class="padding-0 work-inner col-sm-12">
<div class="work-item">
<img src="https://placehold.it/450x250" alt="work2">
</div>
<!--/.work-item-->
</div>
<div class="padding-0 work-inner col-sm-12">
<div class="work-item">
<img src="https://placehold.it/500x250" alt="work3">
</div>
<!--/.work-item-->
</div>
</div>
</div>
</div>
<!--/.container-->
</div>
<!--/work-->
You can try with these code.
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>
<body>
<div class="container">
<div class="row row--equal">
<div class="col-md-6 no-padding">
<div class="item item--full-height">
<img src="https://i.stack.imgur.com/WS7U5.png" alt="">
</div>
</div>
<div class="col-md-6 item--half-height no-padding">
<div class="item ">
<img src="https://i.stack.imgur.com/cslWU.png" alt="">
</div>
<div class="item item--half-height">
<img src="https://i.stack.imgur.com/niAPD.png" alt="">
</div>
</div>
</div>
</div>
</body>
</html>
CSS:
.row--equal{
display: flex;
}
.no-padding{
padding-left: 0px !important;
padding-right: 0px !important;
}
.item{
margin-right: 1px;
margin-bottom: 1px;
}
.item img{
width: 100%;
height: 100%;
}
.item--full-height{
height: 100%;
}
.item--half-height{
height: 50%;
}
I am new to responsive design and I am trying to use bootstrap.
My problem is that I cannot get a portion of the html to display on a single row when on small screens.
I have the following HTML:
<!DOCTYPE HTML>
<html>
<head lang="en">
<title>Test</title>
<meta content="IE=11.0000" http-equiv="X-UA-Compatible">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-width=1.0">
<link href="files/bootstrap.css" rel="stylesheet">
<link href="files/bootstrap-responsive.css" rel="stylesheet">
<style>
body, html
{
height: 100%;
margin: 0;
padding: 0;
}
.container-fluid
{
display: table !important;
height: 100% !important;
width: 100%;
}
.row-fluid
{
display: table-row !important;
height: 100% !important;
width: 100%;
}
.fullwidth
{
width: 100% !important;
}
#media screen and (min-width: 750px)
{
.top-bar-items
{
display: table !important;
height: 80px;
}
}
.content
{
display: table-cell;
vertical-align: middle;
text-align: center;
}
.navbar-cell
{
padding-top: 18px;
}
.blue
{
background-color: Blue;
}
.red
{
background-color: red;
}
.green
{
background-color: green;
}
</style>
</head>
<body>
<header>
<div class="container-fluid">
<div class="row-fluid">
<div class="col-md-5 col-sm-7 text-left">
<img src="images/logo.png" />
</div>
<div class="col-md-2 col-sm-5 red top-bar-items">
<div class="content">
<div class="row-fluid">
<div class="col-md-9 green col-sm-7 col-xm-6">
<img src="images/linkedin.png" />
<img src="images/linkedin.png" />
<img src="images/linkedin.png" />
</div>
<div class="col-md-3 blue col-sm-5 col-xm-6">
<img src="images/default.png" />
<img src="images/default.png" />
</div>
</div>
</div>
</div>
<div class="col-md-5 text-center visible-desktop">
<div style="padding-top:20px;">
<img src="images/header.png" />
</div>
</div>
</div>
<div class="row-fluid">
<div class="col-md-6 blue">
Something2
</div>
<div class="col-md-6 red">
Something2
</div>
</div>
</div>
</header>
<script src="files/jquery.min.js"></script>
<script src="files/bootstrap.js"></script>
</body>
</html>
The html code I am referring to is the following:
<div class="col-md-2 col-sm-5 red top-bar-items">
<div class="content">
<div class="row-fluid">
<div class="col-md-9 green col-sm-7 col-xm-6">
<img src="images/linkedin.png" />
<img src="images/linkedin.png" />
<img src="images/linkedin.png" />
</div>
<div class="col-md-3 blue col-sm-5 col-xm-6">
<img src="images/default.png" />
<img src="images/default.png" />
</div>
</div>
</div>
</div>
This when on medium and large screens displays in a single row but when displayed on a small screen it breaks into two rows which is the problem.
Thanks in advance.
As AntB pointed out, this is just a case of accidentally using col-xm-6 instead of col-xs-6.
When a column size is applied for any screen screen size, all sizes below it are automatically given a width of 12 columns unless otherwise specified. In this case the class col-xm-6 doesn't hit any rules so it doesn't tell bootstrap anything. When there are more than 12 columns worth of elements in a given row, they just wrap over into the next row, so your two small 12-column width divs just wrapped into two rows.
Change it to this:
<div class="content">
<div class="row-fluid">
<div class="col-md-9 green col-sm-7 col-xs-6">
<!-- content -->
</div>
<div class="col-md-3 blue col-sm-5 col-xs-6">
<!-- content -->
</div>
</div>
</div>
Demo in fiddle