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>
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 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>
I have this in my html:
.btn {
height: 100%;
font-size: 10em;
}
<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="container-fluid mb-5">
<div class="row ">
<div class="col pl-0 pr-0 ml-5">
<button type="button" class="btn btn-primary btn-block">ONE</button>
</div>
<div class="col pl-0 pr-0 ml-5">
<button type="button" class="btn btn-primary btn-block">TWO</button>
</div>
<div class="col pl-0 pr-0 ml-5 mr-5">
<button type="button" class="btn btn-primary btn-block">THREE</button>
</div>
</div>
</div>
The problem that I am having is that when I resize browser buttons stick to the right side and to eachother. What can be done here? Any help appreciated!
Please run this in your browser rather than using snippet to have a better response
See I have changed one thing in your code . What I did was just added col-sm for div classes. You can find more about bootstrap grid system via this link. Bootstrap grid system .
I think you expect this.
To see the result please expan the snippet and then with Inspect Element in you browser and then navigate to mobile view . Thanks
Update
In addition to what you asked at the chat I have added some custom css which is responsive to increase the font size . Just added style="font-size:5vw;".The text size can be set with a vw unit, which means the "viewport width".
That way the text size will follow the size of the browser window:
This is the new view after adding style="font-size:5vw;"
<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="container-fluid mb-5 ">
<div >
<div class="container-fluid mb-5 ">
<div class="row ">
<div class="col pl-0 pr-0 ml-5 col-sm-3">
<button type="button" style="font-size:5vw;" class=" btn btn-primary btn-block">ONE</button>
</div>
<div class="col pl-0 pr-0 ml-5 col-sm-3">
<button type="button" style="font-size:5vw;" class=" btn btn-primary btn-block">TWO</button>
</div>
<div class="col pl-0 pr-0 ml-5 mr-5 col-sm-3">
<button type="button" style="font-size:5vw;" class=" btn btn-primary btn-block">THREE</button>
</div>
</div>