I have the following code
<div class="container-fluid" id="calc-container">
<div class="row">
<div class="col-4 d-flex align-items-center justify-content-center text-center mx-auto">
<div class="row">
<div class="col-4 d-flex align-items-start justify-content-start text-start">
<span class="flex-column me-4">Country :</span>
</div>
<div class="col-8 d-flex align-items-end justify-content-end text-end">
<label>
<select class="form-select">
{% for c in countries %}
{% if forloop.first %}
<option selected>{{ c }}</option>
{% else %}
<option>{{ c }}</option>
{% endif %}
{% endfor %}
</select>
</label>
</div>
</div>
</div>
</div>
<div class="row mt-2">
<div class="col-4 d-flex align-items-center justify-content-center text-center mx-auto">
<div class="row">
<div class="col-4 d-flex align-items-start justify-content-start text-start">
<span class="flex-column me-4">Postcode :</span>
</div>
<div class="col-8 d-flex align-items-end justify-content-end text-end">
<input type="text" id="textPostcode" class="form-control">
</div>
</div>
</div>
</div>
</div>
It works OK on the big screen, but when I make window smaller or preview in mobile then "Country" and "Postcode" labels overlap with the inputs. For some reason breakpoints are not working here. Do you have any ideas how to make it work?
Related
I have the following html for a website page built with Bootstrap:
{{ define "main" }}
{{ $pageurl := .Permalink }}
<div class="col-xs-12 col-sm-8 col-md-9 content-column white-background">
{{ partial "mobile_nav_toggle.html" . }}
<div class="row">
<div class="col-lg-8">
<div class="jumbotron">
<h1 class="display-4">{{ .Title }}</h1>
<p class="lead">
<h3 style="font-weight:100;"> — was made by <i>{{ .Params.author }}</i></h3>
</p>
<hr class="my-4">
<p style="font-size:20px;">Who is a student of <strong>{{ .Params.major }}</strong>, when they were in their year <strong>{{ .Params.year }}.</strong></p>
</div>
<div class="content-column-content">
<br>
<h4>Project Abstract:</h4>
<hr>
<p>{{ .Params.description }}</p>
<hr>
<div class="row" style="padding-top:100px;">
<div class="col-sm-6">
<div class="card">
<div class="card-body">
<h5 class="card-title">Reach out to them</h5>
<p>Copy a link to this page to save or reach out to them to learn more:</p>
<button type="button" onclick="copyStringToClipboard({{ $pageurl }});
" style="border-radius:2px;padding:10px;" class="btn btn-primary ">Copy Link</button>
Contact Them
</div>
</div>
</div>
<div class="col-sm-6" style="background:#f2f2f2;">
<div class="card">
<div class="card-body">
<h5 class="card-title">Browse More By:</h5>
<ul class="list-group">
<li class="list-group-item d-flex justify-content-between align-items-center">
{{ .Params.major }} <span class="badge badge-primary badge-pill">14</span>
</li>
<li class="list-group-item d-flex justify-content-between align-items-center">
Year {{ .Params.year }} Students <span class="badge badge-primary badge-pill">2</span>
</li>
<li class="list-group-item d-flex justify-content-between align-items-center">
{{ .Params.tools }} <span class="badge badge-primary badge-pill">1</span>
</li>
</ul>
</div>
</div>
</div>
</div>
<br>
</div>
</div>
</div>
{{ end }}
I don't know how to add a new column to this. I've tried copying <div class="col-xs-12 col-sm-8 col-md-9 content-column white-background"> and adding things inside it, but it just adds it below the existing content. Essentially, I want to have a new sticky column where the 'Browse more` box appears next to the jumbotron.
try this
{{ define "main" }}
{{ $pageurl := .Permalink }}
<div class="col-xs-12 col-sm-8 col-md-9 content-column white-background">
{{ partial "mobile_nav_toggle.html" . }}
<div class="row">
<div class="col-lg-8">
<div class="jumbotron">
<h1 class="display-4">{{ .Title }}</h1>
<p class="lead">
<h3 style="font-weight:100;"> — was made by <i>{{ .Params.author }}</i></h3>
</p>
<hr class="my-4">
<p style="font-size:20px;">Who is a student of <strong>{{ .Params.major }}</strong>, when they were
in their year <strong>{{ .Params.year }}.</strong></p>
</div>
<div class="content-column-content">
<br>
<h4>Project Abstract:</h4>
<hr>
<p>{{ .Params.description }}</p>
<hr>
<div class="row" style="padding-top:100px;">
<div class="col-sm-6">
<div class="card">
<div class="card-body">
<h5 class="card-title">Reach out to them</h5>
<p>Copy a link to this page to save or reach out to them to learn more:</p>
<button type="button" onclick="copyStringToClipboard({{ $pageurl }});
" style="border-radius:2px;padding:10px;" class="btn btn-primary ">Copy Link</button>
<a href="#" class="btn btn-primary"
style="background:#353535;border-color:#353535;border-radius:2px;padding:10px;">Contact
Them</a>
</div>
</div>
</div>
<div class="col-sm-6" style="background:#f2f2f2;">
</div>
</div>
<br>
</div>
</div>
<div class="col-lg-4">
<div class="card">
<div class="card-body">
<h5 class="card-title">Browse More By:</h5>
<ul class="list-group">
<li class="list-group-item d-flex justify-content-between align-items-center">
{{ .Params.major }} <span class="badge badge-primary badge-pill">14</span>
</li>
<li class="list-group-item d-flex justify-content-between align-items-center">
Year {{ .Params.year }} Students <span
class="badge badge-primary badge-pill">2</span>
</li>
<li class="list-group-item d-flex justify-content-between align-items-center">
{{ .Params.tools }} <span class="badge badge-primary badge-pill">1</span>
</li>
</ul>
</div>
</div>
</div>
</div>
{{ end }}
for more info about bootstrap layout grids refer here
You need to manage 12 columns per row. You added this div for the first column
<div class="col-xs-12 col-sm-8 col-md-9 content-column white-background"></div>
Now you need to use this div.
<div class="col-xs-12 col-sm-4 col-md-3 content-column white-background"></div>
If I use "col-md-7" then I will add "col-md-5" for the second column.
Now i have this:
<div class="row row-cols-1 row-cols-md-2 g-4">
{{#each stories}}
<div class="col">
<div class="card shadow-sm">
<img class="card-img-top" src="{{ image }}">
<div class="card-body">
<p class="card-text">{{ description }}</p>
<div class="d-flex justify-content-between align-items-center">
Читать
<small class="text-muted">author</small>
</div>
</div>
</div>
</div>
{{/each}}
</div>
And it looks like:
Now
I want the cards to be under each other: Reference
if you wanna put every card under each other you should put w-100 to each of cards or change your code like this :
<div class="row g-4">
{{#each stories}}
<div class="col-lg-12 mx-auto">
<div class="card shadow-sm">
<img class="card-img-top" src="{{ image }}">
<div class="card-body">
<p class="card-text">{{ description }}</p>
<div class="d-flex justify-content-between align-items-center">
Читать
<small class="text-muted">author</small>
</div>
</div>
</div>
</div>
{{/each}}
</div>
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 designed a layout for an image grid with 9 images. I want to loop through my array of images and fill the grid dynamically so that the 10th image starts a new grid and is styled like the first image, 11th like the second image and so on...
The array won't always contain a multiple of 9.
This is what I currently have: (with fixed array indexes to show the order of images)
<div class="widget-body">
{% for mediaItem in mediaItems|batch(9) %}
<div class="d-flex flex-wrap">
<div class="col-12 p-0">
<img class="w-100" src="{{ (mediaItems[0].getWebPath()) }}" alt="{{ mediaItems[0].title }}"/>
</div>
</div>
<div class="d-flex flex-wrap">
<div class="col-6 p-0">
<div class="customGrid-background-img customGrid-rectangle" style="background-image: url('{{ (mediaItems[1].getWebPath()) }}')"></div>
</div>
<div class="col-6 p-0">
<div class="d-flex flex-wrap">
<div class="col-6 p-0 customGrid-background-img customGrid-square" style="background-image: url('{{ (mediaItems[2].getWebPath()) }}')"></div>
<div class="col-6 p-0 customGrid-background-img customGrid-square" style="background-image: url('{{ (mediaItems[3].getWebPath()) }}')"></div>
</div>
</div>
</div>
<div class="d-flex flex-wrap">
<div class="col-6 p-0">
<div class="d-flex flex-wrap">
<div class="col-6 p-0 customGrid-background-img customGrid-square" style="background-image: url('{{ (mediaItems[4].getWebPath()) }}')"></div>
<div class="col-6 p-0 customGrid-background-img customGrid-square" style="background-image: url('{{ (mediaItems[5].getWebPath()) }}')"></div>
</div>
<div class="d-flex flex-wrap">
<div class="col-6 p-0 customGrid-background-img customGrid-square" style="background-image: url('{{ (mediaItems[6].getWebPath()) }}')"></div>
<div class="col-6 p-0 customGrid-background-img customGrid-square" style="background-image: url('{{ (mediaItems[7].getWebPath()) }}')"></div>
</div>
</div>
<div class="col-6 p-0">
<div class="customGrid-background-img customGrid-square" style="background-image: url('{{ (mediaItems[8].getWebPath()) }}')"></div>
</div>
</div>
{% endfor %}
</div>
I have 10 images in the mediaItems array, which results in the grid being shown twice with the first 9 images.
I needed to use a fill argument with the batch filter to be able to use the second batch.
{% for mediaItem in mediaItems|batch(9, 'empty') %}
I also accidentally used mediaItems for the images. It should be mediaItem (for example: background-image: url('{{ (mediaItem[1].getWebPath()) }}'))
hi I wants to show these columns in horizontal manner but these are showing in vertical manner ow can I change it;
blade file:
<div class="col-lg-3 mb-4">
<!-- Input & Button Groups -->
#foreach($category->products as $pro_data)
<div class="card card-small mb-4">
<div class="card-header border-bottom">
<h6 class="m-0">{{ $pro_data->product_name }}</h6>
</div>
<ul class="list-group list-group-flush">
<li class="list-group-item px-3">
<div class="input-group mb-3">
<div class="input-group input-group-seamless">
<img src="{{ URL::to('/') }}/images/backend_images/category_images/{{ $pro_data->product_image }}" class="img-thumbnail" style="width: 400px; height: 300px;" />
</div>
</div>
</li>
</ul>
</div>
#endforeach
<!-- / Input & Button Groups -->
</div>
If I understand you correctly you are trying to show the products of the categories next to each other horizontally but you are seeing them vertically at the moment.
I think a proper way would wrap the foreach with your
<div class="col-lg-3 mb-4"></div> which gives us
<div class="row">
#foreach($category->products as $pro_data)
<div class="col-lg-3 mb-4">
<div class="card card-small mb-4">
<div class="card-header border-bottom">
<h6 class="m-0">{{ $pro_data->product_name }}</h6>
</div>
<div class="input-group mb-3">
<div class="input-group input-group-seamless">
<img src="{{ URL::to('/') }}/images/backend_images/category_images/{{ $pro_data->product_image }}" class="img-thumbnail" style="width: 400px; height: 300px;" />
</div>
</div>
</div>
</div>
#endforeach
</div>
Hope it helps!
#foreach($category->products as $pro_data)
<div class="col-lg-3 mb-4">
<!-- Input & Button Groups -->
<div class="card card-small mb-4">
<div class="card-header border-bottom">
<h6 class="m-0">{{ $pro_data->product_name }}</h6>
</div>
<ul class="list-group list-group-flush">
<li class="list-group-item px-3">
<div class="input-group mb-3">
<div class="input-group input-group-seamless">
<img src="{{ URL::to('/') }}/images/backend_images/category_images/{{ $pro_data->product_image }}" class="img-thumbnail" style="width: 400px; height: 300px;" />
</div>
</div>
</li>
</ul>
</div>
</div>
#endforeach
Hope this will work for.
I would float the divs to the left with some padding and use clearfix if needed.
All cards appeared in the horizontal manner because you might did't wrap them all without .row class
Because a set of css properties are applied to the .row class
Try the following approach:
<div class="row">
<div class="col-lg-3 mb-4">
</div>
</div>
Your code should be something like this. Added a row wrapper and col inside the loop. I assume <div class="col-lg-3 mb-4"> is your container for all cards.
<div class="col-lg-3 mb-4">
<!-- Input & Button Groups -->
<div class="row">
#foreach($category->products as $pro_data)
<div class="col">
<div class="card card-small mb-4">
<div class="card-header border-bottom">
<h6 class="m-0">{{ $pro_data->product_name }}</h6>
</div>
<ul class="list-group list-group-flush">
<li class="list-group-item px-3">
<div class="input-group mb-3">
<div class="input-group input-group-seamless">
<img src="{{ URL::to('/') }}/images/backend_images/category_images/{{ $pro_data->product_image }}" class="img-thumbnail" style="width: 400px; height: 300px;" />
</div>
</div>
</li>
</ul>
</div>
</div>
#endforeach
<!-- / Input & Button Groups -->
</div><!-- end of row -->
</div>
in bootstrap 4 you can use columns in horizontal manner. You did't wrap them all without use .row class this is most important class.
this is the right way if you use bootstrap 4
<div class="row">
<div class="col-md-3 mb-4"></div>
<div class="col-md-3 mb-4"></div>
<div class="col-md-3 mb-4"></div>
<div class="col-md-3 mb-4"></div>
</div>
#foreach($category->products as $pro_data)
<div class="row">
<div class="col-lg-3 mb-4">
<div class="card card-small mb-4">
<div class="card-header border-bottom">
<h6 class="m-0">{{ $pro_data->product_name }}</h6>
</div>
<ul class="list-group list-group-flush">
<li class="list-group-item px-3">
<div class="input-group mb-3">
<div class="input-group input-group-seamless">
<img src="{{ URL::to('/') }}/images/backend_images/category_images/{{ $pro_data->product_image }}" class="img-thumbnail" style="width: 400px; height: 300px;" />
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
#endforeach