I have problem with my columns in bootstrap, right now they appear vertically, one above the other.
I need to show to the left
Code:
<div class="col-xl-4 col-lg-6 col-md-6 col-sm-12 col-12 layout-spacing">
<div class="widget widget-card-two">
<div class="widget-content">
<div class="media">
<div class="w-img">
<img src="assets/img/90x90.jpg" alt="avatar">
</div>
<div class="media-body">
<h6>{{ $tracking->order->shipping_address }}</h6>
<p class="meta-date-time">{{ $tracking->order->user->name }}</p>
</div>
</div>
<div class="card-bottom-section">
<h5>{{ $tracking->order->shipping_method }}</h5>
<div class="img-group">
<a style="text-decoration: none; background-color: #ffffff;" href="https://api.whatsapp.com/send?phone={{$tracking->order->user->telefono}}&text=Hola" target="_blank"> <img src="https://i.imgur.com/C5L19Q8.png" alt="avatar"> </a>
</div>
Ver Pedido N° {{ $tracking->order->id }}
</div>
</div>
</div>
</div>
help pls
Just add a row class, as shown below:
<div class="container">
<div class="row">
<div class="col-sm">
One of three columns
</div>
<div class="col-sm">
One of three columns
</div>
<div class="col-sm">
One of three columns
</div>
</div>
</div>
Please refer the docs for more info: https://getbootstrap.com/docs/4.0/layout/grid/
Related
I am writing in HTML, using Bootstrap 5. I am trying to make a simple row of cards, however there is a lot of empty padding/space. How do I remove this?
Extra Space between cards
Here is my code:
Code\
<div class="row">
<div class="col">
<div onclick="locations(2)" id="location-2" class="w-75 custom-card">
<div class="card-body">
<h5>
<div class="row">
<div class="col">
<img style="border-radius: 5px;" src="https://flagcdn.com/fi.svg" width=40 height=30>
</div>
<div class="col">
<span class="fs-5" style="margin-left:-30px;line-height:-20px;">Helsinki,</span><br><span style="margin-left:-30px;line-height:-20px;" class="fw-normal fs-6">Finland</span>
</div>
</div>
</h5>
</div>
</div>
</div>
<div class="col">
<div onclick="locations(2)" id="location-2" class="w-75 custom-card">
<div class="card-body">
<h5>
<div class="row">
<div class="col">
<img style="border-radius: 5px;" src="https://flagcdn.com/fi.svg" width=40 height=30>
</div>
<div class="col">
<span class="fs-5" style="margin-left:-30px;line-height:-20px;">Helsinki,</span><br><span style="margin-left:-30px;line-height:-20px;" class="fw-normal fs-6">Finland</span>
</div>
</div>
</h5>
</div>
</div>
</div>
</div>
I tried using g-0 in the row, however it did not change at all.
I am used two images button and place them in a a tag in the same bootstrap column. However this is how they look like:
This is my code:
<body>
<div class="backgroundImage">
<div class="text-right p-3">
<b>{{ __('Be A Dealer') }}</b>
</div>
<div class="container mt-4 mb-4">
<div class="row">
<div class="col-4 col-md-4 mx-auto my-auto">
<img class="mw-100" src="{{ asset('storage/logo/Bujishu_logo.png') }}" alt="Bujishu">
</div>
</div>
</div>
<div class="container">
<div class="row mb-4">
<div class="col-12 col-md-8 offset-md-2 text-center">
<h2 class="bujishu-motto">
A home is made of
<i>
<p class="bujishu-recursive">hopes</p>
</i>
and
<i>
<p class="bujishu-recursive">dreams</p>
</i>
</h2>
<h2 class="bujishu-motto">
Let us
<i>
<p class="bujishu-recursive">inspire</p>
</i>
you to build the perfect home!
</h2>
</div>
</div>
<div class="row mt-4">
<div class="col-6 col-md-4 offset-md-3 ">
<img class="landing_button" src="{{ asset('storage/buttons/Login-Icon.png') }}" alt="Login">
{{-- </div>
<div class="col-6 col-md-4 "> --}}
<img class="landing_button" src="{{ asset('storage/buttons/Sign-Up.png') }}" alt="Sign Up">
</div>
</div>
</div>
</div>
</div>
</body>
How do I align so the next two buttons are next to each other with some spacing between them as well?
Use d-flex and class in your col.
<div class="col-6 col-md-4 offset-md-3 d-flex">
You can also add pl-3 class to SIGN UP button for the space between the buttons.
If you are using Bootstrap 4 it will work if you use two columns, each of size 6 or you can change the size of columns accordingly.
<body>
<div class="backgroundImage">
<div class="text-right p-3">
<b>{{ __('Be A Dealer') }}</b>
</div>
<div class="container mt-4 mb-4">
<div class="row">
<div class="col-4 col-md-4 mx-auto my-auto">
<img class="mw-100" src="{{ asset('storage/logo/Bujishu_logo.png') }}" alt="Bujishu">
</div>
</div>
</div>
<div class="container">
<div class="row mb-4">
<div class="col-12 col-md-8 offset-md-2 text-center">
<h2 class="bujishu-motto">
A home is made of
<i>
<p class="bujishu-recursive">hopes</p>
</i>
and
<i>
<p class="bujishu-recursive">dreams</p>
</i>
</h2>
<h2 class="bujishu-motto">
Let us
<i>
<p class="bujishu-recursive">inspire</p>
</i>
you to build the perfect home!
</h2>
</div>
</div>
<div class="row mt-4">
<div class="col-6 col-md-6">
<img class="landing_button" src="{{ asset('storage/buttons/Login-Icon.png') }}" alt="Login">
</div>
<div class="col-6 col-md-6">
<img class="landing_button" src="{{ asset('storage/buttons/Login-Icon.png') }}" alt="Sign Up">
</div>
</div>
</div>
</div>
</body>
the entire row columns are about 12 columns so it should be col-md-6 or add d-flex to the row itself.
<div class="row mt-4">
<div class="col-6 col-md-6 ">
<img class="landing_button" src="{{ asset('storage/buttons/Login-Icon.png') }}" alt="Login">
</div>
<div class="col-6 col-md-6 ">
<img class="landing_button" src="{{ asset('storage/buttons/Sign-Up.png') }}" alt="Sign Up">
</div>
</div>
I have this layout made with bootstrap each witdth is 4 units
This is what im trying to achive
Basically I want last elements to stretch to fill.
If there were only four elements last one should be full width.
My attempt
I tried to add flex-fill and flex-grow-1 to each column but it doesn't seem to change anything.
Can I achive this effect whithout js?
Code
<div class="container">
<div class="d-flex justify-content-around row">
<div class="my-2 col-md-4">
<div class="card">
<div class="card-body">
<div class="card-title">One</div>
</div>
</div>
</div>
<div class="my-2 col-md-4">
<div class="card">
<div class="card-body">
<div class="card-title">Two</div>
</div>
</div>
</div>
<div class="my-2 col-md-4">
<div class="card">
<div class="card-body">
<div class="card-title">Three</div>
</div>
</div>
</div>
<div class="my-2 col-md-4">
<div class="card">
<div class="card-body">
<div class="card-title">Four</div>
</div>
</div>
</div>
<div class="my-2 col-md-4">
<div class="card">
<div class="card-body">
<div class="card-title">Five</div>
</div>
</div>
</div>
</div>
</div>
Assuming you want the default columns to have width 4, like col-md-4, I can suggest the following approach:
Do not specify column width in the HTML and justify the content evenly:
<div class="container">
<div class="d-flex justify-content-evenly row">
<div class="my-2 col">
<div class="card">
<div class="card-body">
<div class="card-title">One</div>
</div>
</div>
</div>
<div class="my-2 col">
<div class="card">
<div class="card-body">
<div class="card-title">Two</div>
</div>
</div>
</div>
<div class="my-2 col">
<div class="card">
<div class="card-body">
<div class="card-title">Three</div>
</div>
</div>
</div>
<div class="my-2 col">
<div class="card">
<div class="card-body">
<div class="card-title">Four</div>
</div>
</div>
</div>
<div class="my-2 col">
<div class="card">
<div class="card-body">
<div class="card-title">Five</div>
</div>
</div>
</div>
</div>
</div>
Then set the minimum size of all columns:
.my-2 {
flex-basis: 33.3%;
min-width: 33.3%;
}
Use equal-width utility of bootstrap. Divide the area in 2 rows with same width (col-md-8 here) and then place as many divs of equal width.
Sample below:
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="d-flex justify-content-around row">
<!-- row-1 -->
<div class="row col-md-8">
<div class="my-2 col">
<div class="card">
<div class="card-body">
<div class="card-title">One</div>
</div>
</div>
</div>
<div class="my-2 col">
<div class="card">
<div class="card-body">
<div class="card-title">Two</div>
</div>
</div>
</div>
<div class="my-2 col">
<div class="card">
<div class="card-body">
<div class="card-title">Three</div>
</div>
</div>
</div>
</div>
<!-- row-2 -->
<div class="row col-md-8">
<div class="my-2 col">
<div class="card">
<div class="card-body">
<div class="card-title">Four</div>
</div>
</div>
</div>
<div class="my-2 col">
<div class="card">
<div class="card-body">
<div class="card-title">Five</div>
</div>
</div>
</div>
</div>
</div>
You can create using 'Equal-width', for more details go through the Bootstrap 4 Grid System.
https://getbootstrap.com/docs/4.0/layout/grid/#equal-width
Bootstrap comes up with a lot of different solutions to achieve multiple views. What you've been trying so far was almost correct. However, your last col ist currently just looking a bit wrong. You might exchange your last cols classes by the following.
<div class="my-2 col flex-grow">
This does simply 2 things.
Using col you're letting flexbox decide how much space to take
Adding flex-grow you're telling flexbox to use and fill up any left space
Beginner coder requesting a little help with bootstrap4.
I'm trying to create a list group item for displaying user reviews.enter image description here
I've tried tinkering every thing I can think of.
On the face of it, it seems like it should be really simple, but I'm stumped.
Would love to know what you think? Do I need specific css to do it?
<div class="panel-heading">
<div class="panel-body">
<div class="list-group">
{% if comments %}
{% for comment in comments %}
<div class="list-group-item ">
<!--left hand side of table to store username, userstatus and userimage -->
<div class="col-lg-2 col-md-2 col-xs-2 col-sm-2 col-xl-2">
<div class="col-lg-12" align="center">
<p>{{ comment.user }}</p>
</div>
<div class="col-lg-12" align="center">
<p class="status">({{ comment.user.status }})</p>
</div>
<div>
<img class="rounded mx-auto d-block" width="64" height="64" src="{{ MEDIA_URL}}{{ comment.user.picture }}"/><p>
</div>
</div>
<!--right hand side of table to store date comment posted and comment -->
<div class="col-lg-8 col-md-8 col-xs-8 col-sm-8 col-xl-8">
<div class="col-lg-12" align="left">
<p>Posted: {{ comment.created}}</p>
</div>
<div>
<p>{{comment.body}}</p>
</div>
</div>
</div>
{% endfor %}
{% else %}
<p>There are no comments</p>
{% endif %}
</div>
</div>
</div>
Bootstrap now recommend that you use their Cards content container instead of using panels. To keep certain elements on the same line, you should keep those elements within the same row.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="card">
<div class="card-body">
<div class="row">
<div class="col-sm-2">
0808148w
</div>
<div class="col-sm-10">
</div>
</div>
<div class="row">
<div class="col-sm-2">
<p class="status">Current student</p>
</div>
<div class="col-sm-10">
<p>Posted: 20/03/2019</p>
</div>
</div>
<div class="row">
<div class="col-sm-2">
<img class="rounded d-block" width="64" height="64" src="https://picsum.photos/64/?random" />
</div>
<div class="col-sm-10 card-text">
Comments...
</div>
</div>
</div>
</div>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="card">
<div class="card-body">
<div class="row">
<div class="col-sm-2">
0808148w
</div>
<div class="col-sm-10">
</div>
</div>
<div class="row">
<div class="col-sm-2">
<p class="status">Current student</p>
</div>
<div class="col-sm-10">
<p>Posted: 21/03/2019</p>
</div>
</div>
<div class="row">
<div class="col-sm-2">
<img class="rounded d-block" width="64" height="64" src="https://picsum.photos/64/?random" />
</div>
<div class="col-sm-10 card-text">
Comments...
</div>
</div>
</div>
</div>
want to make this responsive by using image as bg in HTML onlyHTML file
I want to set model image as responsive background to main . adding CSS property like max-width is not working to div.
how to overlap bootstraps div?
<div class="game-cover">
<div class="container-fluid" id="about">
<div class="row" style="background: url({{ game.game_cover.url }})">
<div class="col-md-6 hidden-xs">
</div>
<div class="col-md-6 col-xs-12">
<div class="game-header">
<h2 class="text-uppercase" style="color: whitesmoke"> {{ game.game_title }} </h2>
<hr class="divider">
</div>
<div class="game-details">
<p class="text-justify" style="color: whitesmoke">{{ game.game_intro }}
</p>
</div>
</div>
</div>
</div>
</div>
what i want to do is this and make them overlap
<div class="game-cover">
<div class="container-fluid" id="about">
<div class="row">
<div class="col-md-12">
<img class="img-responsive" src="{{ game.game_cover.url }}">
</div>
<div class="col-md-6 hidden-xs">
</div>
<div class="col-md-6 col-xs-12">
<div class="game-header">
<h2 class="text-uppercase" style="color: whitesmoke"> {{ game.game_title }} </h2>
<hr class="divider">
</div>
<div class="game-details">
<p class="text-justify" style="color: whitesmoke">{{ game.game_intro }}
</p>
</div>
</div>
</div>
</div>
</div>