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>
Related
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>
I'm working with bootstrap 4 and following codes,
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/css/bootstrap.css">
<div class="card-header rounded-0 border border-dark">
<div class="row">
<div class="col-12 col-md-4 ">
<img src="{{asset('images/usa.jpg')}}" alt="..." class="rounded-circle">
</div>
<div class="col-12 col-md-8 ">
<p>This is not a game fgfhg dfghdh dhdhdf dfgdhfhg dfdfhfh dfhdfhdf dfhdfh</p>
</div>
</div>
</div>
I need display above two div elements in the same row on large screen and need separate two rows (image is above and paragraph is under the image) when it is displaying mobile device. I use following col-12 col-sm-8 col-md-6 col-lg-4 col-xl-3 item codes in side to the div but not success.
how could I manage this problem?
View in Full Page , You will get it
body {
padding-top: 40px;
}
.col-sm-6 {
background: #ccc;
}
.other {
background: #a4a4a4;
}
.p {
text-align: center;
padding-top: 120px;
}
.p a {
text-decoration: underline;
color: blue;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row">
<div class="col-sm-6">
<h1>Bootstrap Grid Demo</h1>
</div>
<div class="col-sm-6 other">
<h1>2 Columns</h1>
</div>
</div>
</div>
<p class="p">Demo by Jabir Sayed. See article.</p>
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>
So what I am trying to do is align these divs within a bootstrap card. My issue is, I am able to get the left half of it right, but I can't figure out how to align the far right elements. I am currently using width percentages to allow this to stay responsive, though I have one thing set as fixed due to pictures always being the same size.
<div class="card" style="width:65%;float:left;">
<h5 class="card-header">Window Latch Black (Small)</h5>
<div class="card-body clearfix text-center" style="width:100%;display:inline-block;background-color: aqua;">
<div class="cartimage" style="background-color:red;float:left">
<img class="rounded-circle" src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" alt="Generic placeholder image" width="140" height="140">
</div>
<div class="carttext" style="height:50%;width:75%;background-color:green;">
khjg
</div>
<div class="cartamt" style="height:50%;width:75%;background-color:yellow;">
amt
</div>
<div class="cartprice" style="height:50%;width:15%;background-color:purple;float:right">
price
</div>
<div class="cartbutton" style="height:50%;width:15%;background-color:pink;float:right">
button
</div>
</div>
</div>
You need to adjust the order and replace 15% with 25% to have a total of 100% per row. You need to also set a height to parent container to use % height with child element:
.rounded-circle {
border-radius:50%;
vertical-align:top;
}
<div class="card" style="width:65%;float:left;">
<h5 class="card-header">Window Latch Black (Small)</h5>
<div class="card-body clearfix text-center" style="width:100%;display:inline-block;background-color: aqua;height:140px">
<div class="cartimage" style="background-color:red;float:left">
<img class="rounded-circle" src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" alt="Generic placeholder image" width="140" height="140">
</div>
<div class="cartprice" style="height:50%;width:25%;background-color:purple;float:right">
price
</div>
<div class="carttext" style="height:50%;width:75%;background-color:green;">
khjg
</div>
<div class="cartbutton" style="height:50%;width:25%;background-color:pink;float:right">
button
</div>
<div class="cartamt" style="height:50%;width:75%;background-color:yellow;">
amt
</div>
</div>
</div>
By the way, since you are using Bootstrap V4 you can rely on flex to create your layout:
.rounded-circle {
border-radius: 50%;
vertical-align: top;
}
.cartprice {
background: red;
flex-basis: 75%;
}
.carttext {
background: green;
flex-basis: 25%;
}
.cartbutton {
background: blue;
flex-basis: 75%;
}
.cartamt {
background: yellow;
flex-basis: 25%;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="card">
<h5 class="card-header">Window Latch Black (Small)</h5>
<div class="card-body text-center d-flex">
<div class="cartimage">
<img class="rounded-circle" src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" alt="Generic placeholder image" width="140" height="140">
</div>
<div class="d-flex flex-wrap w-100" >
<div class="cartprice">
price
</div>
<div class="carttext">
khjg
</div>
<div class="cartbutton">
button
</div>
<div class="cartamt">
amt
</div>
</div>
</div>
</div>
If you are using bootstrap4, I don't understand why using float...Use boostartp4 [Flex Utilities] classes instead to make these type of grid layout...Also for good practice try to wrap your divs into a wrapper divs
Stack Snippet
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="card">
<h5 class="card-header">Window Latch Black (Small)</h5>
<div class="card-body text-center p-0 d-flex no-gutters" style="background-color: aqua;">
<div class="cartimage" style="background-color:red;">
<img class="rounded-circle" src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" alt="Generic placeholder image" width="140" height="140">
</div>
<div class="d-flex flex-column" style="flex: 2;">
<div class="carttext col" style="background-color:green;">
khjg
</div>
<div class="cartamt col" style="background-color:yellow;">
amt
</div>
</div>
<div class="d-flex flex-column col">
<div class="cartprice col" style="background-color:purple">
price
</div>
<div class="cartbutton col" style="background-color:pink">
button
</div>
</div>
</div>
</div>
I know this may be easy for most of you but I'm stuck with this issue.
I need to implement this design:
Layout Design
... and for now I've got this Current layout.The general structure is a row with col-3 and col-9, this col-9 has two rows, one for name and job title, and the other one for statistics in the page (col-3 for each of them). I need them to fill the height of his parent, but height property doesn't work. Which could be a clean solution? Thanks a lot.
Here is the structure, it's pretty simple tho.
<div class="row profile-header">
<div class="col-md-3 user-image text-center">
<img ...>
<span>..</span>
</div>
<div class="col-md-9">
<div class="row">
<div class="col-md-12">
<h2 class="text-white">...</h2>
<h4 class="text-muted">...</h4>
</div>
</div>
<div class="row text-center">
<div class="col-md-3 stat">
<h3>...</h3>
<small>...</small>
</div>
...
</div>
</div>
Use position: relative on the parent and then position:absolute; bottom: 0; on the children.
Nice explanation there.
Flexbox would be my recommendation although CSS tables might be an option too.
Codepen Demo
Snippet Demo (view Fullscreen)
.user-image {
background: pink;
}
.user-image img {
display: block;
margin: auto;
}
.profile-header {
display: flex;
}
.right {
background: #c0ffee;
display: flex;
flex-direction: column;
}
.stats {
margin-top: auto;
}
.stat {
background: lightgrey;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="row profile-header">
<div class="col-md-3 user-image text-center">
<img src="http://www.fillmurray.com/300/200" alt="" />
<span>User Ranking</span>
</div>
<div class="col-md-9 right">
<div class="row">
<div class="col-md-12">
<h2 class="text-white">User Name</h2>
<h4 class="text-muted">reference</h4>
</div>
</div>
<div class="row text-center stats">
<div class="col-md-3 stat">
<h3>Some Stat</h3>
<small>Some Stat</small>
</div>
<div class="col-md-3 stat">
<h3>Some Stat</h3>
<small>Some Stat</small>
</div>
<div class="col-md-3 stat">
<h3>Some Stat</h3>
<small>Some Stat</small>
</div>
<div class="col-md-3 stat">
<h3>Some Stat</h3>
<small>Some Stat</small>
</div>
</div>
</div>