I was working with bootstrap and found out a weird issue. When using collapse button, page width is changed (changes to lower), when I press collapse again to hide the shown content, page is reset to normal. What can be causing the issue?
<a class="btn btn-icon btn-light" data-toggle="collapse" href="#article-content1" role="button" aria-expanded="false" aria-controls="article-content1">
<i class="fas fa-minus"></i>
</a>
<div class="collapse" id="article-content1">
<div class="card-body">
You can show or hide this card.
</div>
<div class="card-footer">
<div class="container-fluid">
<div class="row">
<div class="col-1">
<img alt="image" src="./assets/img/avatar/avatar.png" class="rounded-circle avatar-outline ml-autox" alt="" width="46" height="46" style="margin-top:-3px">
</div>
<div class="col-6 text-left">
<strong>Jasmine Snow</strong></br>
<span class="color-muted">November 11, 2020</span>
</div>
<div class="col-5"><!-- empty --></div>
</div>
</div>
</div>
</div>
Related
I have a issue with vertical alignment in a container. I have the following code that does what I want, that is, the first row in the center and the second at the bottom of the container.
Full screen
<header class="masthead" id="home">
<div class="container h-100">
<div class="row h-100 align-items-center justify-content-evenly text-center">
<div class="col-4">
<img src="assets/img/profil.png" class="rounded-circle img-fluid" alt="...">
<hr class="divider" />
<h1 class="text-white font-weight-bold">d3vyce</h1>
</div>
<div class="col-md-8 col-lg-4">
<h2 class="text-white font-weight-bold">Hi đź‘‹, Welcome to my Site!</h2>
<p class="text-white">Developer, CTF Player, Homelab, 3D Printing</p>
<hr class="divider" />
<div class="d-grid col-6 mx-auto">
<a class="btn btn-outline-light btn-lg" href="https://blog.d3vyce.fr" target="_blank"><i class="fa fa-bookmark fa-lg"></i> Blog</a>
<a class="btn mt-2 btn-outline-light btn-lg" href="https://github.com/d3vyce" target="_blank"><i class="fa fa-github fa-lg"></i> Github</a>
</div>
</div>
</div>
<div class="row head-row justify-content-center">
<div class="col-12 mouse_scroll p-0">
<a href="#about">
<div class="mouse">
<div class="wheel"></div>
</div>
<div>
<span class="m_scroll_arrows unu"></span>
<span class="m_scroll_arrows doi"></span>
<span class="m_scroll_arrows trei"></span>
</div>
</a>
</div>
</div>
</div>
</header>
For the alignment at the bottom of the second row I use the following CSS:
.mouse_scroll {
display: block;
width: 24px;
height: 100px;
position: absolute;
bottom: 0; }
The problem happens with the responsive. The columns of the first row are well one on top of the other, but the space between the two is much too important and I can't modify it :(
I tried to search on stackoverflow for answers, but after many tests I'm in a dead end...
Reponsive
Thank you in advance for your answers!
I have a code like this
<div class="col-md-12 p-0 m-0" type="button" data-toggle="collapse" data-target="#collapseFace" aria-expanded="false" aria-controls="collapseExample">
<div class="border-bottom border-top f-sz-18">
Face
</div>
</div>
<div class="collapse" id="collapseFace">
<div>
<div><a class="text-decoration-none text-dark f-sz-15 ml-3" href="">123</a></div>
</div>
</div>
How to disable so that the drop-down list does not work when following a link?
When I click on a link, for a split second I see how it starts to open, it's unpleasant
I am creating an angular application in which i have an detail page with a cardheader which consist of two buttons namely back and edit and both sides and a text in between.
I have used bootstap and set the columns like below.
But when i see the screen in mobile view the header is not aligned properly
Below is the code i am using. How could i fix it to view in a single line in mobile view
<div class="card-header">
<div class="row">
<div class="col-sm-3 col-lg-3 text-left">
<button size="sm" class="btn btn-primary" (click)="goBack()">
<i class="fa fa-chevron-left"></i> Back
</button>
</div>
<div class="col-sm-6 col-lg-6 text-center">
<h4>Switch Detail</h4>
</div>
<div class="col-sm-3 col-lg-3 text-right">
<button size="sm" class="btn btn-primary" (click)="gotoEdit()">
<i class="fa fa-pencil"></i> Edit
</button>
</div>
</div>
</div>
There is a couple of approach you can follow.
You could force the width of the container to stay constant on all views. Note that this can cause your text to overflow.
<div class="card-header">
<div class="row">
<div class="col-3 text-left">
<button size="sm" class="btn btn-primary" (click)="goBack()">
<i class="fa fa-chevron-left"></i> <span class="button-text"> Back
</span>
</button>
</div>
<div class="col-6 text-center">
<h4>Switch Detail</h4>
</div>
<div class="col-3 text-right">
<button size="sm" class="btn btn-primary" (click)="gotoEdit()">
<i class="fa fa-pencil"></i> <span class="button-text"> Edit </span>
</button>
</div>
</div>
</div>
You could use #media Query to hide the text on the buttons leaving only the icons on a mobile view.
#media screen and (max-width: 560px) {
button-text {
display: none;
}
}
Alternatively, you could reduce the font size of the title on mobile using the same approach in case 2 above.
I have two divs like this:
First div :
<div class="col-md-6" id="owner_name_76a62a154a220a104a16a203a196a25a92a71a58a216a222a172a64a" style="visibility: visible;float:left;margin-left:2px">
<div class="container-fluid">
<div class="row">
<span class="user" style="color:#000a75;font-weight:bold">Général</span>
</div>
</div>
</div>
Second div :
<div class="col-md-2 px-4 chevron-down collapsed" data-toggle="collapse" data-target="#76a62a154a220a104a16a203a196a25a92a71a58a216a222a172a64a" aria-expanded="false" style="float:right;margin-right:2px">
<i class="material-icons float-right material-expand ripple" style="color: #0047FD !important;margin-right:2px">expand_more</i>
</div>
This two div are in :
<a class="mdc-list-item" data-placement="top" title="Acceuil" style="cursor:pointer;width:400px;margin-left:4px;margin-right:0em" data-toggle="collapse" data-target="#76a62a154a220a104a16a203a196a25a92a71a58a216a222a172a64a">
<div class="col-md-6" id="owner_name_76a62a154a220a104a16a203a196a25a92a71a58a216a222a172a64a" style="visibility: visible;float:left;margin-left:2px">
<div class="container-fluid">
<div class="row">
<span class="user" style="color:#000a75;font-weight:bold">Général</span>
</div>
</div>
</div>
<!--Collaspe zone-->
<div class="col-md-2 px-4 chevron-down collapsed" data-toggle="collapse" data-target="#76a62a154a220a104a16a203a196a25a92a71a58a216a222a172a64a" aria-expanded="false" style="float:right;margin-right:2px">
<i class="material-icons float-right material-expand ripple" style="color: #0047FD !important;margin-right:2px">expand_more</i>
</div>
</a>
Here what it looks like :
I want the space between the div to be greater than this , so i have tried with float and with margin but i have the same problem.
So i want the icon of expand more to be in the right margin 0 now it is in the center.
I think your codes is not completely posted here, so we have a difference in viewing.
But I see in your codes, the width has been set as fixed value 400px. That's why the icon could not move to right. Please remove the width:400px; in the a tag.
Maybe when you run code at your side, the a tag has been set display: block/inline-block .etc.. So you can see it can not move to right. That why we can not understand what you want.
Something like this? I need more details.
Just used d-flex from bootstrap.
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css" integrity="sha384-Smlep5jCw/wG7hdkwQ/Z5nLIefveQRIY9nfy6xoR1uRYBtpZgI6339F5dgvm/e9B" crossorigin="anonymous">
<!-- just to show it whit boostrap -->
<a class="mdc-list-item" data-placement="top" title="Acceuil" style="cursor:pointer;" data-toggle="collapse" data-target="#76a62a154a220a104a16a203a196a25a92a71a58a216a222a172a64a">
<div class="d-flex" id="owner_name_76a62a154a220a104a16a203a196a25a92a71a58a216a222a172a64a" style="visibility: visible;">
<div>
<span class="user" style="color:#000a75;font-weight:bold">Général</span>
</div>
<!--Collaspe zone-->
<div class="ml-auto px-4 chevron-down collapsed" data-toggle="collapse" data-target="#76a62a154a220a104a16a203a196a25a92a71a58a216a222a172a64a" aria-expanded="false">
<i class="material-icons float-right material-expand ripple" style="color: #0047FD !important;margin-right:2px">expand_more</i>
</div>
</div>
</a>
My problem was solved ! i followed this exemple
<div class="container">
<div class="row">
<div class="col-sm">
<div class="row">
<span class="user" style="color:#000a75;font-weight:bold">Général</span>
</div>
</div>
<div class="col-sm">
<div class="col-md-2 px-4 chevron-down collapsed" data-toggle="collapse" data-target="#76a62a154a220a104a16a203a196a25a92a71a58a216a222a172a64a" aria-expanded="false" style="float:right;margin-right:2px">
<i class="material-icons float-right material-expand ripple" style="color: #0047FD !important;margin-right:2px">expand_more</i>
</div>
</div>
</div>
</div>
I'm working on making a site, and im currently dealing with BS4.1.3
I'm still new to this world so i have this issue right now:
<div class="container">
<nav class="navbar sticky-top">
<div class="grid">
<div class="row">
<div class="col-md-4">
<a class="btn btn-primary" data-toggle="collapse" href="#collapse-top-menu" role="button" aria-expanded="false" aria-controls="collapse-top-menu">
<img src="img/baseline-menu-24px.svg">
</a>
</div>
<div class="col-md-4">
<a class="navbar-brand" href="#">
<img src="img/bootstrap-solid.svg" width="40" height="40">
</a>
</div>
<div class="col-md-4">
Test
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="collapse" id="collapse-top-menu">
<input type="text" class="form-control" id="input-top-collapse-search" placeholder="Cosa stai cercando?">
</div>
</div>
</div>
</div>
</nav>
</div>
But the end result it's like this
While i wanted that the first blue button and the "logo" (B) were aligned, "test" a lot more in the right part of the navbar
Also the bottom search bar should be the same width as the container, so full lenght
<div class="container">
<nav class="navbar sticky-top">
<div class="grid">
<div class="row">
<div class="col-md-4">
<a class="btn btn-primary" data-toggle="collapse" href="#collapse-top-menu" role="button" aria-expanded="false" aria-controls="collapse-top-menu">
<img src="img/baseline-menu-24px.svg">
</a>
</div>
<div class="col-md-8 pull-right">
<a class="navbar-brand" href="#">
<img src="img/bootstrap-solid.svg" width="40" height="40">
<span>Test</span>
</a>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="collapse" id="collapse-top-menu">
<input type="text" class="form-control" id="input-top-collapse-search" placeholder="Cosa stai cercando?">
</div>
</div>
</div>
</div>
</nav>
</div>
.collapse input{
width:100%;
}
I am on mobile Stack Overflow app hence not able to test this.
In Bootstap 4, to put the test at the right of the navbar you can try,
<ul class="navbar-nav ml-auto">The content which goes to right comes here as a li</ul>
Also for aligning the blue button (The button you are using here is called as hamburger, remember that) can be aligned by using some margin-top for it.
Just use a CSS selector to select the hamburger and give some margin-top property to it.
Please consider adding a codepen so that we mobile users can play around with your code.