In this case, I need the text in Line 1 and Line 2 to be left aligned without the gap in the left appearing in line 2 regardless of the device size.
I tried to apply m-1, p-1, text-left, and even negative padding but none of those removed the leading space in line 2. Thanks.
JSFiddle containing problem code Here
<h4>Line 1-Header4 </h4>
<div class="container-fluid">
<h4> Line2-Header4 </h4> <!-- HERE IS THE ISSUE -->
<div class="row zz-border-Top2
border-bottom border-primary text-center bg-light">
<div class="col-sm-1 font-weight-bold text-dark bg-warning">
<h6>Text1</h6>
</div>
<div class="col-sm-2">
<h6> Text 2 </h6>
</div>
<div class="col-sm-9 text-left" style="color:navy;">
<h6>Text 3</h6>
</div>
</div>
</div>
You need to use row inside the container to compensate the padding added by the container with the negative margin of the row
<link rel="stylesheet" type="text/css" href="//stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<h4>Line 1-Header4 </h4>
<div class="container-fluid">
<div class="row">
<h4> Line2-Header4 </h4> <!-- HERE IS THE ISSUE -->
</div>
<div class="row zz-border-Top2
border-bottom border-primary text-center bg-light">
<div class="col-sm-1 font-weight-bold text-dark bg-warning">
<h6>Text1</h6>
</div>
<div class="col-sm-2">
<h6> Text 2 </h6>
</div>
<div class="col-sm-9 text-left" style="color:navy;">
<h6>Text 3</h6>
</div>
</div>
</div>
Related
I've made bootstrap cards that appear on two different pages. One on the landing page which I want to increase the spacing and one on the books page which I want to increase the width of the cards. Here's the code that I've written and used in both pages. The only thing that I've changed is on the 6th line from '...col-lg-3' to '...col-lg-2'. If anyone can assist me in adding the spacing and increasing the with of the card, help me if you can. d-flex justify-content-evenly doesn't work when i use col-lg-3.
<section id="about" class="ts-block" >
<div id="cards_landscape_wrap-2">
<div class="container " style="width:70%">
<div class="row d-flex justify-content-around">
#foreach($products as $product)
<div class="col-xs-12 col-sm-6 col-md-3 col-lg-3">
<a href="{{route("products.show",$product->slug)}}">
<div class="card-flyer ">
<div class="text-box">
<div class="image-box">
<img src="{{asset($product->image)}}" alt="{{$product->title}}" class="img-fluid rounded mx-auto d-block" width="100%"/>
</div>
<div class="card-footer">
<i class="text-muted"><strike>Ksh.{{$product->old_price}}</strike></i>
<span class="text-primary font-weight-bold">Ksh.{{$product->price}}</span><br>
<span class="mybuttonoverlap btn btn-primary">View</span>
</div>
</div>
</div>
</a>
</div>
#endforeach
</div>
</div>
</div>
</section>
Try including d-flex justify-content-around to a direct parent containing the cards instead of
<div class="row d-flex justify-content-around">. And add margin to the card.
<div class="col-xs-12 col-sm-6 col-md-3 col-lg-3 d-flex justify-content-around">
<a href="{{route("products.show",$product->slug)}}">
<div class="card-flyer m-2">
<div class="text-box">
<div class="image-box">
<img src="{{asset($product->image)}}" alt="{{$product->title}}" class="img-fluid rounded mx-auto d-block" width="100%"/>
</div>
<div class="card-footer">
<i class="text-muted"><strike>Ksh.{{$product->old_price}}</strike></i>
<span class="text-primary font-weight-bold">Ksh.{{$product->price}}</span><br>
<span class="mybuttonoverlap btn btn-primary">View</span>
</div>
</div>
</div>
</a>
</div
Thanks to the many questions and answers on stackoverflow about card-columns, I could set tiled cols in row but it looks like some kind of padding or margin or else is breaking bootstrap's 12 columns per row "rule".
I am trying to achieve a masonry / pinterest tile layout, with Tile 1 and Tile 2 columns going under the description column, white text remains under picture profile.
In the below example, when I set the width of the description col to col-xl-4 makes it remain under the profile picture col instead of next to it.
Moreover, the description column takes the same height as the profile picture column.
<div class="container-fluid">
<div class="row card-columns">
<div class="col-xl-8 card">
<div class="card-body">
<h2>Profile picture</h2>
<img src="https://via.placeholder.com/900x500.jpg" alt="" class="img-fluid rounded">
</div>
</div>
<div class="col-xl-4 card">
<div class="card-body">
<h2>Description</h2>
</div>
</div>
<div class="col-xl-8 card">
<div class="card-body">
<h2>Text</h2>
</div>
</div>
<div class="col-xl-2 card">
<div class="card-body">
<h2>Tile 1</h2>
</div>
</div>
<div class="col-xl-2 card">
<div class="card-body">
<h2>Tile 2</h2>
</div>
</div>
</div>
</div>
How can I fix this? What am I missing here?
Tried it on this fiddle https://jsfiddle.net/pba8h4dk/.
<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="container-fluid">
<div class="row">
<div class="col-lg-9 card">
<div class="card-body">
<h2>Profile picture</h2>
<img src="https://via.placeholder.com/900x500.jpg" alt="" class="img-fluid rounded">
</div>
</div>
<div class="col-lg-3 card">
<div class="card-body">
<h2>Description</h2>
</div>
</div>
</div>
</div>
Removing card-columns class did the trick (and obviously making sure your screen is sm/md/lg/)
I am using bootstrap for my layout.
<div class="container-fluid footer">
<div class="row p-4">
<div class="col-lg-3 d-flex flex-column justify-content-center align-items-md-center">
<h3>Company</h3>
<div class="mt-3 text-left">
<div class="box">
<p class="link-router" routerLink="/careers">Careers</p>
</div>
<div class="box">
<p class="link-router" routerLink="/about-us"><a>About</a></p>
</div>
<div class="box">
<p class="link-router" routerLink="/contact-us">Contract us</p>
</div>
</div>
</div>
</div>
</div>
Here is for example one column in my row.The content of that column should be on the left ( default )
and centered vertically so for that i used
d-flex flex-column justify-content-center
but now on smaller devices i want the content to be in the center, not in on the left.
So tried with the class
align-items-md-center
to tell that the content should be in the middle on > 768px devices.But then the whole time the content is in the middle not only on md devices.
How shoould i do that ?
Youn need to use align-items-center align-items-md-start. You have centring by default and you reset the center on md (> 768px)
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" >
<div class="container-fluid footer">
<div class="row p-4">
<div class="col-lg-3 d-flex flex-column justify-content-center align-items-center align-items-md-start">
<h3>Company</h3>
<div class="mt-3 text-left">
<div class="box">
<p class="link-router" routerLink="/careers">Careers</p>
</div>
<div class="box">
<p class="link-router" routerLink="/about-us"><a>About</a></p>
</div>
<div class="box">
<p class="link-router" routerLink="/contact-us">Contract us</p>
</div>
</div>
</div>
</div>
</div>
I'm really confused by the columns system in Bootstrap. Here is what I have:
<div class="container-fluid">
<!-- Page Heading -->
<div class="d-sm-flex align-items-center justify-content-between mb-4">
<h1 class="h3 mb-0 text-gray-800">Cards</h1>
</div>
<div class="row">
<!-- Earnings (Monthly) Card Example -->
<div class="col-xl-2 col-md-2 mb-2">
<div class="card border-left-primary shadow h-100 py-2">
<div class="card-body">
<div class="row no-gutters align-items-center">
<div class="col mr-2">
<div class="text-xs font-weight-bold text-primary text-uppercase mb-1">Stop</div>
<div class="h5 mb-0 font-weight-bold text-gray-800">8</div>
</div>
<div class="col-auto">
<span class="material-icons">
pan_tool
</span>
</div>
</div>
</div>
</div>
</div>
I have 8 cards total and 2 of them fall in the second line, because of spacing. How can I achieve a professional view with my cards? I need to show 12 different status of machines we have, start, stop, and run.
Here is the link of jsFiddle:
https://jsfiddle.net/rbk27ote/1/
You just need put class 'col' for all your div element those you want to make equal.just like as below:-
<div class="col"></div>
I have a col-4 | col-8 layout in Bootstrap 4 Beta 3.
The first col contains a pic, the second col should contain a pic and text aside.
At the moment I have divided the second col into another row with two cols.
I need to have these to cols stick together (e.g. class=no-gutters). But the image inside gets larger than the one in the first col as soon as I remove the gutters. I cannot remove all gutters on all three cols, as there should be a margin remaining between main col 1 and 2.
Codepen:
https://codepen.io/SchweizerSchoggi/pen/mpjgLP
<div class="container mt-3">
<div class="row">
<!-- Teaser 1 -->
<div class="col-12 col-md-4" id="teaser_Umzug">
<div class="teaser-img teaser-stick">
<img src="https://placeimg.com/640/480/tech" alt="Bild XY Company Umzug" class="img-fluid z-1 mr-1" />
<div class="teaser-overlay pt-2 pl-4 z-2">
<div class="teaser-txt">
<h2 class="mb-3"></h2>
<p class="mb-4">
<span class="bold clearfix">Settelen –</span> ist Ihr Partner<br/>für regionalen und nationalen Umzug.
</p>
<button type="button" class="teaser">Mehr erfahren</button>
</div>
</div>
</div>
</div>
<!-- Teaser 2 -->
<div class="col-12 col-md-8" id="teaser_AutoService">
<div class="row">
<!-- Teaser 2 Img -->
<div class="col-12 col-md-6 bg-box-light">
<div class="ml-0 mr-0"><img src="https://placeimg.com/640/480/tech" alt="Bild XY Company Auto und Service" class="img-fluid" /></div>
</div>
<!-- Teaser 2 Text -->
<div class="col-12 col-md-6 bg-box-light">
<div class="teaser-txt pt-4 pl-4">
<p class="mb-4">
<span class="bold clearfix">XY Company –</span> Ihr starker Partner in Sachen Auto und Service.
</p>
<button type="button" class="teaser">Services</button>
</div>
</div>
</div>
</div>
</div>
Well, here's a solution I came up with...
Add the pl-md-0 class to the column for the teaser 2 image. (that removes the left padding for medium screens)
Then put the contents of the first column (that includes the teaser 1 image) into a new row-column pair.
Then add the pl-md-0 class to the inner column for the teaser 1 image.
I believe this is the effect you were going for. (I didn't touch the right paddings because I thought it wasn't necessary but you certainly could remove both the left and right paddings with the px-md-0 class.)
Here's the code:
.bg-box-light {
background-color: #eee; /* TBD ! */
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" integrity="sha384-Zug+QiDoJOrZ5t4lssLdxGhVrurbmBWopoEl+M6BdEfwnCJZtKxi1KgxUyJq13dy" crossorigin="anonymous">
<div class="container mt-3">
<div class="row">
<!-- Teaser 1 -->
<div class="col-12 col-md-4" id="teaser_Umzug">
<div class="row">
<div class="col pl-md-0">
<div class="teaser-img teaser-stick">
<img src="https://placeimg.com/640/480/tech" alt="Bild XY Company Umzug" class="img-fluid z-1 mr-1" />
<div class="teaser-overlay pt-2 pl-4 z-2">
<div class="teaser-txt">
<h2 class="mb-3"></h2>
<p class="mb-4">
<span class="bold clearfix">Settelen –</span> ist Ihr Partner<br/>für regionalen und nationalen Umzug.
</p>
<button type="button" class="teaser">Mehr erfahren</button>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Teaser 2 -->
<div class="col-12 col-md-8" id="teaser_AutoService">
<div class="row">
<!-- Teaser 2 Img -->
<div class="col-12 col-md-6 pl-md-0 bg-box-light">
<div class="ml-0 mr-0"><img src="https://placeimg.com/640/480/tech" alt="Bild XY Company Auto und Service" class="img-fluid" /></div>
</div>
<!-- Teaser 2 Text -->
<div class="col-12 col-md-6 bg-box-light">
<div class="teaser-txt pt-4 pl-4">
<p class="mb-4">
<span class="bold clearfix">XY Company –</span> Ihr starker Partner in Sachen Auto und Service.
</p>
<button type="button" class="teaser">Services</button>
</div>
</div>
</div>
</div>
</div>
</div>