I am trying to figure out how to align contents to the baseline. I am working with the bootstrap framework, and have been unable to do so.
<div class="row">
<div class="col-12">
<span class="h5">My Games</span>
<button type="button" class="btn btn-info float-right" v-b-modal.create-game>New Game</button>
</div>
</div>
Which produces this:
When I consult the bootstrap documentation, it says to do this:
<div class="d-flex align-items-baseline">...</div>
But when I do this or apply the same classes to the col-12:
<div class="row">
<div class="col-12">
<div class="d-flex align-items-baseline">
<span class="h5">My Games</span>
<button type="button" class="btn btn-info float-right" v-b-modal.create-game>New Game</button>
</div>
</div>
</div>
it results in this:
I looked at this post, which suggests flex and align-items:baseline to the row div. However when I did this, nothing happens.
Could anyone suggests to me what I am doing wrong and how I can fix it? I would like the text to be placed to the baseline, and for them to still be spread apart from one another.
I would like it to look close to this:
Thanks!
You need to remove the margin for your .h5 and use .align-items-end
span.h5 {
flex-grow: 1;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<div class="row">
<div class="col-12">
<div class="d-flex align-items-end">
<span class="h5 m-0">My Games</span>
<button type="button" class="btn btn-info float-right" v-b-modal.create-game>New Game</button>
</div>
</div>
</div>
You can add some css & see result
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<div class="row" style="margin: 0px;">
<div class="col-12" style="display: inline-block;width: 100%;background-color: #efefef;padding: 15px;">
<span class="h5" style="margin: 10px 0 0 0;display: inline-block;">My Games</span>
<button type="button" class="btn btn-info float-right" v-b-modal.create-game>New Game</button>
</div>
</div>
Related
I am learning Bootstrap and now I am facing a problem that I just couldn't get it.
This is a snippet of the code:
<button
className="
col-md-4
col-sm-auto
btn
btn-info
btn-custom"
onClick={this.toggleModalHandler}
> Salvar
</button>
Here a somewhat more complete code:
<div className="container">
<h2 className="border-bottom mb-4 pt-sm-2">Insira Os Valores Do Produto</h2>
<div className="pt-4 border-bottom">
<h5>Valor Total: R$ </h5>
<div className="
row
align-items-md-center
mb-2
flex-md-row
flex-sm-column"
>
<h5 className="col-md-4 col-sm-auto mb-md-0">Valor Total Acumulado: R$</h5>
<div className="col-md-8 col-sd-12">
<button
className="col-auto btn btn-success btn-custom"
onClick={() => this.addOrcHandler()}
> Adicionar Orçamento
</button>
<button
className="col-auto btn btn-danger btn-custom"
onClick={() => this.limparHistoricoOrcHandler()}
> Limpar Orçamentos
</button>
<button
className="col-md-4 col-sm-auto col-3 btn btn-info btn-custom"
onClick={this.toggleModalHandler}
> Salvar
</button>
</div>
</div>
</div>
</div>
As I understand it so far col-md-4 should override col-sm-auto when the screen is bigger than 768px, but it is not working and I don't know why, since it worked properly in other elements.
I couldn't find an answer to this specific situation on my researches.
What I am not getting is why col-md-4 is not ocuppying 4 columns of the grid.
Just an observation: It works fine if I remove col-sm-auto. And it is in a row
What am I doing wrong?
You see, the .col uses for blocks which are the part of Bootstrap Grid. For correct work they should be covered in .row and .container parents. Although, you shouldn't mix it with button and .btn, because they works with different logic and for different purpose. The correct code is:
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/js/bootstrap.min.js"></script>
<div class="container-fluid">
<div class="row">
<div class="col-md-4 col-sm-auto">
<button class="btn btn-info btn-custom btn-block">Salvar</button>
</div>
</div>
</div>
UPDATED
More about .col wrapping https://getbootstrap.com/docs/4.0/layout/grid/#column-wrapping
Added .btn-block for .btn to get them 100% in a parent .col.
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/js/bootstrap.min.js"></script>
<div class="container">
<h2 class="border-bottom mb-4 pt-sm-2">Insira Os Valores Do Produto</h2>
<div class="pt-4 border-bottom">
<h5>Valor Total: R$ </h5>
<div class="row align-items-md-center mb-2 flex-md-row flex-sm-column">
<h5 class="col-md-4 col-sm-auto mb-md-0">Valor Total Acumulado: R$</h5>
<div class="col-md-8 col-sd-12">
<div class="row">
<div class="col-sm-4 col-auto">
<button class="btn btn-success btn-custom btn-block">Adicionar Orçamento</button>
</div>
<div class="col-sm-4 col-auto">
<button class="btn btn-danger btn-custom btn-block">Limpar Orçamentos</button>
</div>
<div class="col-sm-4 col-auto">
<button class="btn btn-info btn-custom btn-block">Salvar</button>
</div>
</div>
</div>
</div>
</div>
</div>
How to solve div overlay problem here I've one div in this div I've added two class col-sm-6. But when I am checking responsive it will going over of the div. I don't know how to solve. can anyone please help me.
I've attch the image of the output you can see :)
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="block">
<div class="row">
<div class="col-sm-6">
<p><strong>Showing 1 to 6 of 6 entries</strong></p>
</div>
<div class="col-sm-6" style="top: -8px;">
<div class="pagination">
<button class="btn btn-link previous">Previous</button>
<button class="btn btn-info number">1</button>
<button class="btn btn-link next">Next</button>
</div>
</div>
</div>
</div>
have found mobile grid class (col-xs-12) missing. Please try below snippet.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<div class="block">
<div class="row">
<div class="col-xs-12 col-sm-6">
<p><strong>Showing 1 to 6 of 6 entries</strong></p>
</div>
<div class="col-xs-12 col-sm-6">
<div class="pagination">
<button class="btn btn-link previous">Previous</button>
<button class="btn btn-info number">1</button>
<button class="btn btn-link next">Next</button>
</div>
</div>
</div>
</div>
you should set the div "col-12" for mobile size in bootstrap4."col-sm-6" don't work for size less than 557px.and make your div's "float" right.
.float-right{
float:rigth !important;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="block">
<div class="row">
<div class="col-sm-6 col-12 float-right">
<p><strong>Showing 1 to 6 of 6 entries</strong></p>
</div>
<div class="col-sm-6 col-12 float-right" style="top: -8px;">
<div class="pagination">
<button class="btn btn-link previous">Previous</button>
<button class="btn btn-info number">1</button>
<button class="btn btn-link next">Next</button>
</div>
</div>
</div>
</div>
I am trying to make a simple example where I have a row and inside that row is columns. One column is for the name of the left-hand side and on the right-hand side is the three buttons that exist. However, I am having issues placing the buttons properly on the right side as well as spacing them at an appropriate distance. I tried using the max-width in my CSS but I just ended up screwing up the project even more. Below is my HTML/CSS file:
#submitGPBtn {
margin-right: 30px;
}
<div class="row">
<div>
<h4> Group Pattern Test</h4>
</div>
<div class="mx-auto">
<button class="btn btn-primary">Save</button>
</div>
<div class="mx-auto">
<button class="btn btn-primary">Close</button>
</div>
<div class="ml-auto">
<button class="btn btn-primary" id="submitGPBtn">Submit</button>
</div>
</div>
You would want to use a btn-toolbar to group your buttons in-line.
#submitGPBtn {
margin-right: 30px;
}
<div class="row">
<div class="col">
Group Pattern Test
</div>
<div class="col">
<div class="btn-toolbar">
<button class="btn btn-primary">Save</button>
<button class="btn btn-primary">Close</button>
<button class="btn btn-primary" id="submitGPBtn">Submit</button>
</div>
</div>
</div>
This question has been answered well here. But here's an example below, add float-right class to your button bar, you can put a breakpoint in the class like float-sm-right but float-right works on any viewport width.
#submitGPBtn {
margin-right: 30px;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
<div class="col">
Group Pattern Test
</div>
<div class="col">
<div class="btn-toolbar float-right">
<button class="btn btn-primary">Save</button>
<button class="btn btn-primary">Close</button>
<button class="btn btn-primary" id="submitGPBtn">Submit</button>
</div>
</div>
</div>
In bootstrap ml-auto is fine to align buttons to the right, but you should apply it only to the first item after the "offset".
I added ml-1 to space the other buttons and a lightyellow background just to show where the container ends.
My personal suggestion when you use bootstrap is to code inside a container, you can't set its size to what you want but it prevents stretching in wide monitors.
.container {
background-color: lightyellow;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col text-left">
<h4> Group Pattern Test</h4>
</div>
<button class="btn btn-success ml-auto">Save</button>
<button class="btn btn-success ml-1">Close</button>
<button class="btn btn-success ml-1" id="submitGPBtn">Submit</button>
</div>
</div>
I want display a button to the center of the row, having on the same line a text aligned to the left:
<div class="col-xs-1">
<div class="card-header">
<h4 class="card-title">set</h4>
</div>
<div class="text-center">
<button type="button" class="btn btn-primary center-block add-option" id="add-option">test</button>
</div>
</div>
The problem is that I got this result: https://jsfiddle.net/DTcHh/96757/
Bootstrap has tons of classes to play with.
One of possible solutions:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<div class="container-fluid card-header btn-group">
<h4 class="card-title">set</h4>
<div class="text-center container">
<button type="button" class="btn btn-primary center-block add-option" id="add-option">test</button>
</div>
</div>
I have a css class:
.content-shadow {
box-shadow: 0 0 5px #888888 !important;
}
I am using this class at to locations in the file:
<div class="root-content-padder">
<div class="container">
<h1><strong>"</strong>Die Freiarbeit ist nur das Ergebnis deiner Basis</h1>
<div class="content-shadow">
<div class="text-center st-padding">
<iframe style="width: 50vw; height: 430px"
src="youtube.com...."></iframe>
</div>
<div class="text-center st-padding">
<button class="btn btn-default btn-lg">Text</button>
<strong>Or</strong>
<button class="btn btn-default btn-lg">Text</button>
</div>
</div>
</div>
<div style="height: 25px;"></div>
<div class="container">
<div class="content-shadow">
<div class="col-lg-4">
<h1>LoL</h1>
</div>
<div class="col-lg-8">
<p>Text</p>
<br/>
<a class="btn btn-default btn-lg" href="?page=me">Weiter lesen</a>
</div>
</div>
</div>
</div>
Now the first div which has the class content-shadow works fine, without a problem, but on the second one the shadow does not appear.
I can make the shadow visible on the second, if i remove the two divs <div class="col-lg-4">...</div> and <div class="col-lg-8">...</div>
That is extremely strange and i have no idea why, maybe here someone can help.
Regards Liz3
If you remove any style from debugger tool, it means it comments your style at run time.
As you are using external style and if you remove it from debugger tool, it comments the styles written in content-shadow, so where ever you have used content-shadow doesn't work.
But if you use inline-style and apply box-shadow in two different div and then remove any one of the box-shadow from debugger tool, it just comment your internal-style of that particular div at run-time where as another one will work
So, it's a normal behaviour
Coming to your second point, col-lg-* removes box-shadow
It is working with col-lg-* also as you can see the snippet. But shadow at the bottom is not visible, to make it visible apply padding-bottom: 10px; in the parent element of content-shadow.
.content-shadow {
box-shadow: 0 0 10px darkgreen !important;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="root-content-padder">
<div class="container">
<h1><strong>"</strong>Die Freiarbeit ist nur das Ergebnis deiner Basis</h1>
<div class="content-shadow">
<div class="text-center st-padding">
<iframe style="width: 50vw; height: 230px" src="youtube.com...."></iframe>
</div>
<div class="text-center st-padding">
<button class="btn btn-default btn-lg">Text</button>
<strong>Or</strong>
<button class="btn btn-default btn-lg">Text</button>
</div>
</div>
</div>
<div style="height: 25px;"></div>
<div class="container" style="padding-bottom: 10px;">
<div class="content-shadow">
<div class="col-lg-4">
<h1>LoL</h1>
</div>
<div class="col-lg-8">
<p>Text</p>
<br/>
<a class="btn btn-default btn-lg" href="?page=me">Weiter lesen</a>
</div>
</div>
</div>
</div>
So the solution was pretty straight forward:
I had to put a <div style="clear: both;"></div> after the
<div class="col-lg-4">
<h1>LoL</h1>
</div>
<div class="col-lg-8">
<p>Text</p>
<br/>
<a class="btn btn-default btn-lg" href="?page=me">Weiter lesen</a>
</div>