I'm trying to center a vertical button group horizontally using d-flex, and change its width to 50% of the parent element, but after changing the width it gets aligned to the left. What gives?
.myclass {
border: 1px solid green;
}
.btn-group-vertical-50 {
width: 50%;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<h4>Button group width: 100%</h3>
<div class="card">
<div class="card-body">
<div id="btn-group-centering" class="d-flex flex-grow flex-column justify-content-center myclass">
<div id="button-group" class="btn-group-vertical myclass" role="group">
<button type="submit" name="siren-btn" class="btn btn-outline-info">5 second
siren</button>
<button type="submit" name="reboot-btn" class="btn btn-outline-warning">Reboot</button>
</div>
</div>
</div>
</div>
<br>
<h4>Button group width: 50%</h4>
<div class="card">
<div class="card-body">
<div id="btn-group-centering" class="d-flex flex-grow flex-column justify-content-center myclass">
<div id="button-group" class="btn-group-vertical-50 myclass" role="group">
<button type="submit" name="siren-btn" class="btn btn-outline-info js-siren-btn"><i class="fas fa-bullhorn mr-3"></i>5 second
siren</button>
<button type="submit" name="reboot-btn" class="btn btn-outline-warning js-reboot-btn"><i class="fas fa-power-off mr-3"></i>Reboot</button>
</div>
</div>
</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>
I am trying to make three parallel square shape buttons with title in center. something like this
My title
Square button-1 square button-2 square button-3
My code is as follows::
<div class="col-md-12 pt-md-5 text-center">
<p>My title</p>
</div>
<div class="container">
<div class="row">
<div class="col-xs-4">
<div>
<button class="btn btn-sq-lg btn-info">button-1</button>
</div>
<div >
<button class="btn btn-sq-lg btn-info">button-2</button>
</div>
<div>
<button class="btn btn-sq-lg btn-info">button3</button>
</div>
</div>
</div>
</div>
.btn-sq-lg {
width: 150px !important;
height: 150px !important;
}
output I am getting is three vertical without any spaces. But I want three parallel square buttons with equal spaces
how can I do that?
Also how can I make button with white color and black text and title with white color and increase font size?
Just made button as info but want a white background with black text
col-xs-** has been replaced with col-** in v4. You need to separate each button with col-4
.btn-sq-lg {
width: 150px !important;
height: 150px !important;
background: #ffff!important;
color: black!important
}
.square {
text-align: center
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<p class="p-5 w-100 text-center">My title</p>
<div class="container">
<div class="row">
<div class="col-4">
<div class="square">
<button class="btn btn-sq-lg btn-info ">button-1</button>
</div>
</div>
<div class="col-4">
<div class="square">
<button class="btn btn-sq-lg btn-info">button-2</button>
</div>
</div>
<div class="col-4">
<div class="square">
<button class="btn btn-sq-lg btn-info">button3</button>
</div>
</div>
</div>
</div>
Use justify-content-between to row and remove the div with col-xs-4 (xs does not exist in bootstrap 4)
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<div class="col-md-12 pt-md-5 text-center">
<p>My title</p>
</div>
<div class="container">
<div class="row justify-content-between">
<div>
<button class="btn btn-sq-lg btn-info">button-1</button>
</div>
<div>
<button class="btn btn-sq-lg btn-info">button-2</button>
</div>
<div>
<button class="btn btn-sq-lg btn-info">button3</button>
</div>
</div>
</div>
I have a JSFiddle here:
https://jsfiddle.net/sf4wkyx0/
My 'Add' button isn't quite left aligned with the textarea:
But both are preceded by an element with class col-2 so I'm not sure why the alignment is slightly off.
How do I left align my 'Add' button exactly with the textarea?
Add pl-0 of your button section's parent, it will be fine.
<div class="row col-12 mb-2 pl-0">
<div class="col-2 spacer"></div>
<div class="col-10 pl-0 d-inline">
<button type="button" class="btn btn-sm btn-primary ml-auto"> Add </button>
</div>
</div>
You can check this https://jsfiddle.net/7r0b8voj/
You were nesting you .row classes incorrectly. Just fix the nesting issue and it should be all good.
According to Bootstrap's own API documentation, when nesting columns any columns .col should be nested within a .row. The two should not be combined on a single element.
.row {
background: #f8f9fa;
margin-top: 20px;
}
.col {
border: solid 1px #6c757d;
padding: 10px;
}
<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="modal-body">
<div class="modal-body-scrolled border-primary border-bottom p-0 mt-2">
<div class="row">
<label for="duration" class="col-2 pl-0">Description</label>
<div class="col-10 pl-0 d-inline">
<textarea class="form-control" rows="2" style="min-width: 100%"></textarea>
</div>
</div>
<div class="row">
<div class="col-2 spacer"></div>
<div class="col-10 pl-0 d-inline">
<button type="button" class="btn btn-sm btn-primary ml-auto"> Add </button>
</div>
</div>
</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 am relatively new to web development in general and am having a layout crisis: I have a container-fluid that has a row split into two *col-md-6*s. Within a col-md-6 I want to be able to position elements horizontally. As shown in my code/picture; I am trying to make a simple div that is 95% the height of the button-group and shows up next to it...however it is showing up below it and is very short (I want it to be as tall as the button group). What is the protocol for sizing/positioning elements next to each other in Bootstrap like this?
<div class="container-fluid">
<div class="row">
<div class="col-md-6" style="background-color: lightcyan">
<div class="btn-group-vertical btn-group-lg">
<button type="button" class="btn btn-primary">Quick Select</button>
<button type="button" class="btn btn-primary">Show in Depth</button>
<button type="button" class="btn btn-primary">Delete Product</button>
</div>
<div id="prod_view">
yo
</div>
CSS:
#prod_view{
background: lightcoral;
width: 69%;
height: 95%;
margin-left: 23%;
border: solid;
}
What it looks like now:
I want the "yo" box to be more rectangular and to the right of the button group.
Here's a flex layout that will do that. You can use the justify-content property to affect the horizontal alignment, and align-items will affect the vertical alignment. Here's a visual guide for flexbox https://css-tricks.com/snippets/css/a-guide-to-flexbox/
.custom-row {
display: flex;
justify-content: space-between;
}
.custom-row > div:last-child {
width: 69%;
}
#prod_view {
height: 95%;
background: lightcoral;
border: solid;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
<div class="row">
<div class="col-md-6 custom-row" style="background-color: lightcyan">
<div class="btn-group-vertical btn-group-lg">
<button type="button" class="btn btn-primary">Quick Select</button>
<button type="button" class="btn btn-primary">Show in Depth</button>
<button type="button" class="btn btn-primary">Delete Product</button>
</div>
<div>
<div id="prod_view">
yo
</div>
</div>
</div>
</div>
</div>
Another way is with a single flexbox class. Add it to the row and col-md-6:
.flex {
display: flex;
}
<div class="container-fluid">
<div class="row flex">
<div class="col-md-6 flex" style="background-color: lightcyan">
<div class="btn-group-vertical btn-group-lg">
<button type="button" class="btn btn-primary">Quick Select</button>
<button type="button" class="btn btn-primary">Show in Depth</button>
<button type="button" class="btn btn-primary">Delete Product</button>
</div>
<div id="prod_view">
yo
</div>
</div>
</div>
</div>
http://www.codeply.com/go/wvCRJ0ufEB
In Bootstrap 4, flexbox is default so there is no need for the extra class.