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>
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 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 am creating a menu using Bootstrap 4. This is my current code:
<div class="row mx-2">
<div class="dropdown">
<div class="btn btn-info dropdown-toggle" data-toggle='dropdown'>
Option 1
</div>
<div class='dropdown-menu'>
<div class='dropdown-item' style="cursor:pointer;" onclick="dosomething()">
DDO11
</div>
<a href="abc.php" class='dropdown-item'>DDO12</a>
</form>
</div>
</div>
<div class="dropdown">
<div class="btn btn-info dropdown-toggle mx-3" data-toggle='dropdown'>
Option 2
</div>
<div class='dropdown-menu'>
<div class='dropdown-item' style="cursor:pointer;" onclick="dosomething()">DDO21</div>
<div class='dropdown-item' style="cursor:pointer;" onclick="dosomething()">DDO22</div>
</div>
</div>
<div class="btn btn-dark col mx-2" onclick="dosomething()">Option3</div>
<div class="dropdown">
<div class="btn btn-info dropdown-toggle" data-toggle='dropdown'>
Option 4
</div>
<div class='dropdown-menu'>
<div class='dropdown-item' style="cursor:pointer;" onclick="dosomething()">DDOP41</div>
</div>
</div>
<div class="btn btn-dark col mx-2">Option 5</div>
</div>
The problem is that the dropdown buttons are as wide as text, while the non-dropdown buttons are too wide and taking up all the left over space. I need all the option buttons to be of same width.
I tried assigning width:20% and also tried col-*-* on all of the parent option buttons, but nothing worked.
What else can be done to achieve equal width for all option buttons?
You need add CSS like below in your CSS file
.dropdown-menu {
min-width: unset !important; // add width as per your need
}
Live Demo
Hope it will solve your problem
Using the Bootstrap approach, I suggest you to made a grid (a grid have 12 columns) with one row and five columns with class col-sm-2 (On XS screens the layout should be different because of the small total width you have). To make this centered, just add a offset-sm-1 class to the first col-sm-2 item. And to make buttons have the full-width of the column that wraps it, just use the btn-block class. I made changes to your example to make this work:
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<div class="container-fluid">
<div class="row">
<div class="offset-sm-1 col-sm-2 mb-1">
<div class="dropdown">
<div class="btn btn-info btn-block dropdown-toggle" data-toggle='dropdown'>
Option 1
</div>
<div class='dropdown-menu'>
<div class='dropdown-item' style="cursor:pointer;" onclick="dosomething()">
DDO11
</div>
<a href="abc.php" class='dropdown-item'>DDO12</a>
</div>
</div>
</div>
<div class="col-sm-2 mb-1">
<div class="dropdown">
<div class="btn btn-info btn-block dropdown-toggle" data-toggle='dropdown'>
Option 2
</div>
<div class='dropdown-menu'>
<div class='dropdown-item' style="cursor:pointer;" onclick="dosomething()">
DDO21
</div>
<div class='dropdown-item' style="cursor:pointer;" onclick="dosomething()">
DDO22
</div>
</div>
</div>
</div>
<div class="col-sm-2 mb-1">
<div class="btn btn-dark btn-block" onclick="dosomething()">Option3</div>
</div>
<div class="col-sm-2 mb-1">
<div class="dropdown">
<div class="btn btn-info btn-block dropdown-toggle" data-toggle='dropdown'>
Option 4
</div>
<div class='dropdown-menu'>
<div class='dropdown-item' style="cursor:pointer;" onclick="dosomething()">
DDOP41
</div>
</div>
</div>
</div>
<div class="col-sm-2 mb-1">
<div class="btn btn-dark btn-block">
Option 5
</div>
</div>
</div>
</div>
In Bootstrap 4, the row class should only be used to contain col* and not other elements like btn and dropdown. The other elements are placed inside the columns. From the Bootstrap docs...
"Rows are wrappers for columns. Each column has horizontal padding
(called a gutter) for controlling the space between them... In
a grid layout, content must be placed within columns and only columns
may be immediate children of rows."
Put the dropdown and btn in columns. Use the auto-layout grid (col or col-auto) to control the equal widths. For buttons that fill the width of their parent use btn-block.
For full equal width use col...
<div class="row mx-2">
<div class="col">
<div class="dropdown">
<div class="btn btn-info btn-block dropdown-toggle" data-toggle="dropdown">
Option 1
</div>
<div class="dropdown-menu">
...
</div>
</div>
</div>
<div class="col">
<div class="btn btn-dark btn-block mx-2">Option3</div>
</div>
...
</div>
</div>
For "shrink to fit" content width use col-auto...
<div class="row mx-2">
<div class="col-auto">
<div class="dropdown">
<div class="btn btn-info btn-block dropdown-toggle" data-toggle="dropdown">
Option 1
</div>
<div class="dropdown-menu">
...
</div>
</div>
</div>
<div class="col-auto">
<div class="btn btn-dark btn-block mx-2">Option3</div>
</div>
...
</div>
</div>
Demo of both options
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>