I am using Bootstrap 5's flexbox grid to design a responsive mobile-first Angular web application.
I would like the home screen of my app to have these 3 elements :
The name of the app at the top of the screen
A row of buttons in the middle of the screen
A footer at the bottom of the screen
What would be the best responsive way to position these elements at the top, middle and bottom of the screen respectively, while keeping them horizontally centered.
My code at the moment looks like this :
<div class="container-fluid">
<div class="row">
<div class="col-12 d-flex justify-content-center">
<h1>App name</h1>
</div>
</div>
<div class="row">
<div class="col-12 col-sm-6 col-lg-3 d-flex">
<button type="button" class="btn btn-outline-primary flex-fill">First button</button>
</div>
<div class="col-12 col-sm-6 col-lg-3 d-flex">
<button type="button" class="btn btn-outline-primary flex-fill">Second button</button>
</div>
<div class="col-12 col-sm-6 col-lg-3 d-flex">
<button type="button" class="btn btn-outline-primary flex-fill">Third button</button>
</div>
<div class="col-12 col-sm-6 col-lg-3 d-flex">
<button type="button" class="btn btn-outline-primary flex-fill">Fourth button</button>
</div>
</div>
<div class="row">
<div class="col-12 d-flex justify-content-center">
<p>Footer</p>
</div>
</div>
Thank you!
The same way as with any flexbox vertical alignment in Bootstrap. For example, auto-margins in flexbox container...
<div class="container-fluid vh-100 d-flex flex-column">
<div class="row">
<div class="col-12 d-flex justify-content-center">
<h1>App name</h1>
</div>
</div>
<div class="row my-auto">
<div class="col-12 col-sm-6 col-lg-3 d-flex">
<button type="button" class="btn btn-outline-primary flex-fill">First button</button>
</div>
<div class="col-12 col-sm-6 col-lg-3 d-flex">
<button type="button" class="btn btn-outline-primary flex-fill">Second button</button>
</div>
<div class="col-12 col-sm-6 col-lg-3 d-flex">
<button type="button" class="btn btn-outline-primary flex-fill">Third button</button>
</div>
<div class="col-12 col-sm-6 col-lg-3 d-flex">
<button type="button" class="btn btn-outline-primary flex-fill">Fourth button</button>
</div>
</div>
<div class="row">
<div class="col-12 d-flex justify-content-center">
<p>Footer</p>
</div>
</div>
</div>
Demo
Related
I have some HTML/CSS where I am trying to make use of Bootstrap 5.2 and justify-content-between to push 2 buttons out to the edges of the container.
<div class="container">
<div class="row">
<div class="col-12">
<ul class="d-flex justify-content-center align-items-center bg-grey">
<li>Test</li>
</ul>
</div>
<div class="col-12">
<div class="row justify-content-between">
<div class="col-2 text-start">
<button class="btn btn-primary btn-lg">LEFT</button>
</div>
<div class="col-2 text-end">
<button class="btn btn-primary btn-lg">RIGHT</button>
</div>
</div>
</div>
</div>
</div>
This is how I want it to look - with the LEFT and RIGHT buttons aligned to the edges.
It's fine until the viewport reaches anything under 768px wide (sm or xs), at which point the RIGHT button sticks out.
I can tweak the margin at the relevant responsive break points but it seems like I've got something wrong and shouldn't have to do that.
Is there a correct / better way to achieve this?
With your second attempt, you had rows inside of rows. The rows need to be direct children of the container.
I'd probably just use some explicit flex boxes here if you don't need the column collapsing provided by Bootstrap grids:
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.0.2/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-12">
<div class="d-flex flex-column">
<ul style='background:grey' class="d-flex justify-content-center align-items-center bg-grey">
<li>Test</li>
</ul>
</div>
<div class="d-flex justify-content-between">
<button class="btn btn-primary btn-lg">LEFT</button>
<button class="btn btn-primary btn-lg">RIGHT</button>
</div>
</div>
</div>
</div>
A flex-box column to stack them, then a flex-box row for the buttons. The current .container element isn't really necessary, but it maintains the padding you had.
You can try this :
<div class="container">
<div class="row">
<div class="col-12">
<ul class="d-flex justify-content-center align-items-center bg-dark">
<li>Test</li>
</ul>
</div>
<div class="col-12">
<div class="row justify-content-between">
<div class="col text-start">
<button class="btn btn-primary btn-lg">LEFT</button>
</div>
<div class="col text-end">
<button class="btn btn-primary btn-lg">RIGHT</button>
</div>
</div>
</div>
</div>
</div>
I am using Bootstrap 5.1.3 and trying to get a button to center in the footer of a card. Here's the code I'm using:
CSS
.btnStandard {
min-width: 10vw;
}
HTML
<div class="card-footer justify-content-center">
<button type="button" class="btn btn-labeled btn-success d-flex justify-content-between btnStandard">
<div class="col-10 text-start">Tell Me</div>
<div class="col-2 text-center"><i class="fa-solid fa-square-info"></i></div>
</button>
</div>
Nothing I've tried will let me center the button in the card footer. Any thoughts?
Try this as well:
<div class="card-footer mx-auto justify-content-center">
<button type="button" class="btn btn-labeled btn-success d-flex justify-
content-center btnStandard">
<div class="col-10 text-center">Tell Me</div>
<div class="col-2 text-center"><i class="fa-solid fa-square-info"></i>
</div>
</button>
</div>
Here you go... You forgot to add d-flex.
Change this...
<div class="card-footer justify-content-center">
<button type="button" class="btn btn-labeled btn-success d-flex justify-content-between btnStandard">
<div class="col-10 text-start">Tell Me</div>
<div class="col-2 text-center"><i class="fa-solid fa-square-info"></i></div>
</button>
</div>
...to this.
<div class="card-footer d-flex justify-content-center">
<button type="button" class="btn btn-labeled btn-success d-flex justify-content-between btnStandard">
<div class="col-10 text-start">Tell Me</div>
<div class="col-2 text-center"><i class="fa-solid fa-square-info"></i></div>
</button>
</div>
When i collapse section its stuck at half but its work at my friends pc with chrome 74.
I have tried update my windows and reinstall chrome and its still stuck.
But when i downgrade my chrome to 73 its work
<div class="row accordian-row">
<div class="col-lg-12 col-md-12 px-0">
<p class="my-0">
<a class="btn btn-link btn-collapse card-header" data-toggle="collapse"
href="#itemInfo" role="button" aria-expanded="false"
aria-controls="itemInfo" th:text="#{feature.material.item-store-maintenance-page.accordian-row.itemInfo}" ></a>
</p>
</div>
<div class="col-lg-12 col-md-12 collapse show py-3 accordian-border" id="itemInfo">
<form th:action="#{/material-item-store-maintenance/validate}" method="post" id="form1" >
<div class="row">
<div class="col-xl-9 col-lg-6 col-md-8 col-sm-9">
<div class="form-group-xs form-row">
<label class="col-xl-3 col-lg-5 col-md-6 col-sm-2 col-form-label col-form-label-xs"
for="item"><span class="text-danger" th:text="#{feature.material.item-store-maintenance-page.label.item} + '*'"></span></label>
<div class="col-xl-9 col-lg-7 col-md-6 col-sm-10">
<input type="text" name="itemInfoExt" id="itemInfoExt"
placeholder=""
class="validate[required] form-control form-control-xs" />
</div>
</div>
</div>
<div class="col-xl-3 col-lg-6 col-md-4 col-sm-3">
<div class="btn-group-sm float-right">
<button type="reset" class="btn btn-secondary" th:text="#{feature.material.item-store-maintenance-page.button.clearAll}" onclick="clearAllForm()" ></button>
</div>
</div>
</div>
</form>
</div>
</div>
Not able to reproduce it on Chrome Version 74.0.3729.157 (Official Build) (64-bit) running on MS Windows 10 Pro - 2 changes to the code
added background color to the collapsible area
added OPEN/CLOSE label to the toggle button
#itemInfo {
background: lightpink
}
<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.0/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="container">
<h2>Collapsible</h2>
<div class="row accordian-row">
<div class="col-lg-12 col-md-12 px-0">
<p class="my-0">
<a class="btn btn-link btn-collapse card-header" data-toggle="collapse" href="#itemInfo" role="button" aria-expanded="false" aria-controls="itemInfo" th:text="#{feature.material.item-store-maintenance-page.accordian-row.itemInfo}"> OPEN/CLOSE</a>
</p>
</div>
<div class="col-lg-12 col-md-12 collapse show py-3 accordian-border" id="itemInfo">
<form th:action="#{/material-item-store-maintenance/validate}" method="post" id="form1">
<div class="row">
<div class="col-xl-9 col-lg-6 col-md-8 col-sm-9">
<div class="form-group-xs form-row">
<label class="col-xl-3 col-lg-5 col-md-6 col-sm-2 col-form-label col-form-label-xs" for="item"><span class="text-danger" th:text="#{feature.material.item-store-maintenance-page.label.item} + '*'"></span></label>
<div class="col-xl-9 col-lg-7 col-md-6 col-sm-10">
<input type="text" name="itemInfoExt" id="itemInfoExt" placeholder="" class="validate[required] form-control form-control-xs" />
</div>
</div>
</div>
<div class="col-xl-3 col-lg-6 col-md-4 col-sm-3">
<div class="btn-group-sm float-right">
<button type="reset" class="btn btn-secondary" th:text="#{feature.material.item-store-maintenance-page.button.clearAll}" onclick="clearAllForm()"></button>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
Can anyone help me figure out what's wrong with my layout? I am adding some controls to a card and the content overflows. I want the card to be as wide as the widest row...
<div class="container">
<div class="row">
<div class="col-auto p-4 ">
<div class="card">
<div class="card-header"><h4>Find a contact</h4></div>
<div class="card-body">
<div class="row flex-nowrap">
<div class="col-4 p-1 text-right">First:</div>
<div class="col-8 p-1"><input type="text">
</div>
</div>
<div class="row p-1 flex-nowrap">
<div class="col-4 p-1 text-right">Last:</div>
<div class="col-8 p-1"><input type="text">
</div>
</div>
<div class="row p-1 flex-nowrap">
<div class="col-4 p-1 text-right">Compnay:</div>
<div class="col-8 p-1"><input type="text">
</div>
</div>
<div class="row p-1">
<div class="col-8 p-1 offset-4 text-nowrap"><input type="submit" value="Search" class="btn btn-sm m-2"/>My contacts only: <input id="checkBox" type="checkbox[enter link description here][1]"></div>
</div>
</div>
<div class="card-footer">
<div class="row ">
<div class="col">more search</div>
</div>
</div>
</div>
</div>
</div>
Here is the jsfiddle: https://jsfiddle.net/msz2ndkr/21/
The problem with your html is the following line:
<div class="row p-1">
<div class="col-8 p-1 offset-4 text-nowrap"><input type="submit" value="Search" class="btn btn-sm m-2"/>My contacts only: <input id="checkBox" type="checkbox"/></div>
</div>
Bootstrap assumes 12 columns and you have specified 8 columns (col-8). All your other rows have 12. Also, get rid of the offset-4. Here is my solution:
<div class="row p-1">
<div class="col-12 p-1 text-nowrap"><input type="submit" value="Search" class="btn btn-sm m-2"/>My contacts only: <input id="checkBox" type="checkbox"/></div>
</div>
Here is a fiddle
There seems to be a problem with how 'width: auto' is calculated and set on certain elements and their parents. Try making your nowrap container a flexbox and set some width for it's children like:
`
.nowrap-elems-container {
display: flex;
flex-wrap: nowrap;
white-space: nowrap;
}
`
https://jsfiddle.net/a0godL7b/25/
it's not too elegant but it should work
I am using bootstrap 3 and have a my data coming from a service. I am using ng-repeat to render the design,I need two buttons to appear in one row and if we are using mobile then one button in a row. The Buttons should be center on the screen as indicated below.
Button Text 1 Button Text 2
Button Tex 3 Button Text 4
This is my html code
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-sm-4 col-md-offset-2"><button type="button" class="btn btn-default btn-block">Here sits text 1</button></div>
<div class="col-sm-4"><button type="button" class="btn btn-default btn-block">Here sits text 2</button></div>
</div>
<div class="row">
<div class="col-sm-4 col-md-offset-2"><button type="button" class="btn btn-default btn-block">Here sits text 3</button></div>
<div class="col-sm-4">
<button type="button" class="btn btn-default btn-block" style="word-wrap: break-word;">Here sits text 4 </button></div>
</div>
</div>
How would I avoid using multiple rows in order to force two columns?
I am asking for that to make my ng-repeat just render some columns because, it would not work with this design?
Update For Question:
I have updated using the answer suggested below, its working now:
<div class="container">
<div class="row">
<div class="col-sm-4 col-md-offset-2 col-sm-offset-2 col-lg-offset-2 col-lg-4 col-md-4 col-sm-4 col-xs-12" style="text-align:center;">
<button type="button" class="btn btn-primary btn-block">Button text 1</button>
</div>
<div class="col-sm-4 col-lg-4 col-md-4 col-sm-4 col-xs-12" style="text-align:center;">
<button type="button" class="btn btn-primary btn-block">Button text 2</button>
</div>
<div class="col-sm-4 col-md-offset-2 col-sm-offset-2 col-lg-offset-2 col-lg-4 col-md-4 col-sm-4 col-xs-12" style="text-align:center;">
<button type="button" class="btn btn-primary btn-block">Button text 1</button>
</div>
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12" style="text-align:center;">
<button type="button" class="btn btn-primary btn-block">Button text 4</button>
</div>
</div>
Is it possible to use the same styling for cols and and make it work (there are offsets on alternate cols.
I thinkyou should take a look at this: https://jsfiddle.net/2zu0oksc/
You can have a div with class row and many col-*
Setting the col-xs-12 to the div, you are saying taht in small devices it will take all the row width.
This is the code:
<div class="row">
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12" style="text-align:center;">
<button type="button" class="btn btn-primary">Button text 1</button>
</div>
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12" style="text-align:center;">
<button type="button" class="btn btn-primary">Button text 2</button>
</div>
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12" style="text-align:center;">
<button type="button" class="btn btn-primary">Button text 3</button>
</div>
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12" style="text-align:center;">
<button type="button" class="btn btn-primary">Button text 4</button>
</div>
</div>
<div class="container-fluid">
<div class="row">
<div class="col-xs-8 col-xs-offset-2">
<div class="col-xs-2 col-xs-offset-4">
<button class="btn btn-primary">
Text 1
</button>
</div>
<div class="col-xs-2 col-xs-offset-1">
<button class="btn btn-primary">
Text 1
</button>
</div>
</div>
</div>
<div class="row">
<div class="col-xs-8 col-xs-offset-2">
<div class="col-xs-2 col-xs-offset-4">
<button class="btn btn-primary">
Text 1
</button>
</div>
<div class="col-xs-2 col-xs-offset-1">
<button class="btn btn-primary">
Text 1
</button>
</div>
</div>
</div>
</div>
https://jsfiddle.net/wuy235f9/
This works but you'll have to adjust the offset and col size you want for it!