Here is my header setup (bootstrap 4):
<div class="container">
<div class="row">
<div class="col-md-6">
<div class="navbar-brand"><img src="..."></div>
</div>
<div class="col-md-6 text-right">
<div class="header-btn-grp">
<div class="header-call-us">Get a Quote, Call Today!</div>
<a role="button" class="btn btn-danger btn-lg header-btn" href="tel:123">Ph : <strong>...</strong></a>
<div class="header-address">XXX</div>
</div>
</div>
</div>
As expected on desktop the logo sits on the left and the button sits on the right.
When on smaller devices I would like the logo and button to align in the center.
I have tried to add a .text-md-center class to both columns but this caused both elements to center in there columns at all widths (desktop and mobile).
What is the correct way to do this?
An alternate to #cwanjt answer is using the text-center. You just then need to use text-md-left and text-md-right to keep the desired alignment on larger widths.
<div class="container">
<div class="row">
<div class="col-md-6 text-md-left text-center">
<div class="navbar-brand"><img src="//placehold.it/140x30"></div>
</div>
<div class="col-md-6 text-md-right text-center">
<div class="header-btn-grp">
<div class="header-call-us">Get a Quote, Call Today!</div>
<a role="button" class="btn btn-danger btn-lg header-btn" href="tel:123">Ph : <strong>...</strong></a>
<div class="header-address">XXX</div>
</div>
</div>
</div>
</div>
https://www.codeply.com/go/Ijl31XHfRT
#TimothyAURA, if I'm understanding you question correctly, it's how to center the content of your header on smaller screens. If that's the case, you can look at the code in this codeply project to get an idea of how to do that. It seems like you have some familiarity with Bootstrap, but here's a reference to Bootstraps utilities for justifying content.
It uses a justify-content-center class for device sized medium and below, and a justify-content-lg-between on larger displays.
<header class="d-flex justify-content-center justify-content-lg-between">
<a class="navbar-brand" href="#">
<img src="http://via.placeholder.com/65x65" alt="">
</a>
<div class="header-btn-grp">
<div class="header-call-us">Get a Quote, Call Today!</div>
<a role="button" class="btn btn-danger btn-lg header-btn" href="tel:123">Ph : <strong>...</strong></a>
<div class="header-address">XXX</div>
</div>
</header>
Related
I would like to define a div that has the following characteristics:
It expands vertically to fit content.
It does not expand off screen but rather shows a scrollbar.
I'm using this "List Group" example here as a base:
https://getbootstrap.com/docs/5.2/examples/sidebars/
However, when I add something above the scrolling list, the list doesn't shrink down vertically to accommodate the header, it just pushes the scroll list down and now I have two scroll bars: one for the screen (since the whole list got pushed down) and another scroll bar for the list box (since its still the same size and has to scroll its internal elements).
<div class="d-flex flex-column">
<div>
<header class="mb-1 py-2 w-100">
<div class="align-items-center container-fluid d-grid gap-3" style="grid-template-columns: 1fr 2fr;">
<div class="m-0 p-0">
<div class="align-items-center d-flex mb-3 mb-md-0 me-md-auto text-dark text-decoration-none" href="/">
<span class="fs-4">Task Administration</span>
</div>
</div>
<div class="m-0 p-0">
<button class="btn btn-primary float-end">Save all changes</button>
<button class="btn btn-danger float-end me-4">Discard all changes</button>
</div>
</div>
</header>
<div class="bh-divider"></div>
</div>
<main class="d-flex flex-nowrap" >
<div class="d-flex flex-row" >
<div class="align-items-stretch bg-white d-flex flex-column flex-shrink-0" style="width: 380px;">
<a class="align-items-center border-bottom d-flex flex-shrink-0 link-dark p-3 text-decoration-none" href="/">
<span class="fs-5 fw-semibold">Categories</span>
<button class="btn" style="opacity: 0" type="button">Hidden for alignment</button>
</a>
<div class="border-bottom list-group list-group-flush scrollarea" id="contentArea">
<data-items-list></data-items-list>
</div>
</div>
</div>
</main>
</div>
If I don't fix the height on id="contentArea", to something like height:800px, then the list always bumps off the screen and creates 2 scrollbars.
I'd rather not fix the height since different people have different sized screens.
I've been racking my brains trying all sorts of css shenanigans, but nothing seems to work and writing my own javascript to do this seems like a bad idea.
Thanks all for your time and attention.
I have implemented a container in such a way that on extra small screen they should have assigned width.
<div class="container w-60 border border-secondary">
<h1 class="text-black-50 text-center mb-5 bg bg-light">Warenkorb</h1>
<hr/>
<div class="row mt-5">
<div class="col-xs-1">
<span>1x</span>
</div>
<div class="col-xs-6">
<small class="text-muted description">Some description</small>
</div>
<div class="col-xs-2">
<div class="btn-group" role="group" aria-label="quantity">
<button type="button" class="btn btn-default border border-success btn-sm align-bottom float-right" (click)="decreaseTheQuantity(item)"><span class="vertical-align: baseline;">-</span></button>
<button type="button" class="btn btn-default border border-success btn-sm align-bottom float-right" (click)="increaseTheQuantity(item)"><span class="vertical-align: baseline;">+</span></button>
</div>
</div>
<div class="col-xs-1 float-right">
40€
</div>
<div class="col-xs-2">
<button type="button" class="btn btn-default btn-sm float-right" (click)="deleteTheItem(i)">
<span class="glyphicon glyphicon-trash border border-success btn-sm align-top float-right btntrash"></span>
</button>
</div>
</div>
It looks okay on most of the screens
but on s5 it looks bit distorted.
I want trash button to be in a same row like in first picture.
I am using bootstrap and using class="col-xs-X" to split the columns on small screens.
Why its not working for s5 device ?
Second problem is:
<div class="col-xs-1 float-right">
40€
</div>
my css
.glyphicon.glyphicon-trash{
font-size: 10px;
top: -6px;
}
.btntrash{
height:20px;
top: -6px;
}
for above column i am using float-right and expect a very little space between price and trash button. I am not able to achieve that either.
Could you please give me some pointers ?
https://getbootstrap.com/docs/4.0/layout/grid/
Bootstrap 4 do not have xs grid. You should change col-xs-6 to col-6, but if you want to have different grid on desktop or tablet versions, you can use lg and md size.
A little late to the party, but I would suggest is using col-auto and col to adjust your layout for the small screen. I find that there's some situations where specifying a total of 12 columns reacts in weird ways when the content of the column doesn't fit it's width (like you have done).
And also make use of the breakpoints available in bootstrap to change your column sizing for different screens.
<div class="row mt-5">
<div class="col-auto col-sm-1">
<!-- Quantity -->
</div>
<div class="col col-sm-6">
<!-- Description -->
</div>
<div class="col-auto col-sm-2">
<!-- Plus/Minus buttons -->
</div>
<div class="col-auto col-sm-1 float-right">
<!-- Price -->
</div>
<div class="col-auto col-sm-2">
<!-- Delete Button -->
</div>
</div>
col-auto is used to size the column based on it's content.
col is used to fill up any left over space in the row.
I must be missing something really simple here:
<div class="row">
<div class="col-lg-12">
<a href="/add" class="btn btn-primary">
<span class="glyphicon glyphicon-plus" aria-hidden="true"></span> Add User
</a>
</div>
</div>
<div class="row">
<div class="col-lg-12" ng-show="users.busy">
<div class="spinner-loader center-block"></div>
</div>
</div>
I've used the bootstrap classes, including center-block. Yet it always looks like this:
Why isn't the spinner icon in the centre of the page?
There is a work around to your problem by changing some HTML as follows
<div class="row">
<div class="col-lg-12 text-center" ng-show="users.busy">
<span class="spinner-loader">Loading</span>
</div>
</div>
instead of <div> for spinner I took a <span> which will be centered horizontally because of text-center class to parent <div>.
You can try this:
<div class="row">
<div class="col-lg-12">
<a href="/add" class="btn btn-primary">
<span class="glyphicon glyphicon-plus" aria-hidden="true"></span> Add User
</a>
</div>
</div>
<center>
<div class="row">
<div class="col-lg-12" ng-show="users.busy">
<div class="spinner-loader"></div>
</div>
</div>
</center>
Instead of using center-block, add text-center class
I ve been using the bootstrap col-md-offset css to center my divs. For example:
<div class=container>
<div class=row>
<div class=form-horizontal>
<div class="col-md-offset-4 col-md-4">
<div class="your div">
</div>
</div>
</div>
</div>
Your div will be responsive, thus as you resize the window the div will remain in the center of the window.
I'm working on a project using Bootstrap 4. I have a row that consists of three columns. My code looks like this:
<div class="row">
<div class="col-md-4 center-block">
<div>
<i class="glyphicon glyphicon-time center-text"></i><br />
<h3>On Time</h3>
<h4>Just for you</h4>
</div>
</div>
<div class="col-md-4 center-block">
<i class="glyphicon glyphicon-star center-text"></i><br />
<h3>Excellent Service</h3>
<h4>When you need it</h4>
</div>
<div class="col-md-4 center-block">
<i class="glyphicon glyphicon-heart center-text"></i><br />
<h3>We want to be your favorite</h3>
<h4>Why not?</h4>
</div>
</div>
I need to center the content within each column. However, all of the content is left-aligned and I do not know why. As the code shows, I'm using the center-block and center-text classes. Yet, they do not seem to be working. What am I doing wrong?
You need to use text-center instead of center-block.
There is no default Bootstrap class such as center-text and the class needs to be used for the parent container, not along with any child element.
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
<div class="col-md-4 text-center">
<div>
<i class="glyphicon glyphicon-time"></i><br />
<h3>On Time</h3>
<h4>Just for you</h4>
</div>
</div>
<div class="col-md-4 text-center">
<i class="glyphicon glyphicon-star"></i><br />
<h3>Excellent Service</h3>
<h4>When you need it</h4>
</div>
<div class="col-md-4 text-center">
<i class="glyphicon glyphicon-heart"></i><br />
<h3>We want to be your favorite</h3>
<h4>Why not?</h4>
</div>
</div>
So I'm trying to have two jumbotrons indicating two portals into my site. On a medium-large screen they appear side by side with spacing in between. On a tablet or mobile device I would like the jumbotrons to be stacked. The docs on the bootstrap 3 make this automatically happen when I shrink the page, however this isn't happening to me. I'm not sure what i'm doing wrong, I'm really new to bootstrap. Right now when it becomes a medium sized screen the white space disappears and they get squeezed side by side.
My html looks like this:
<div class="container-fluid">
<div class="row">
<div class="container special">
<div class="clearfix visible-sx"></div>
<div class="jumbotron text-center col-md-5 col-md-offset-1">
<h1>Become a Screener</h1>
<p>Yahh a screener.</p>
<a class="btn btn-danger" href="{% url 'screener_info' %}">More Info</a>
</div>
<div class="jumbotron text-center col-md-5 col-md-offset-1">
<h1>Have your books screened</h1>
<p>yah an author.</p>
<a class="btn btn-success" href="{% url 'author_info' %}" role="button">More Info</a>
</div>
</div>
</div>
</div>
Try changing your code to this:
<div class="container-fluid">
<div class="row">
<div class="container special">
<div class="clearfix visible-sx"></div>
<div class="col-sm-5 col-md-offset-1">
<div class="jumbotron text-center">
<h1>Become a Screener</h1>
<p>Yahh a screener.</p>
<a class="btn btn-danger" href="{% url 'screener_info' %}">More Info</a>
</div>
</div>
<div class="col-sm-5 col-md-offset-1">
<div class="jumbotron text-center">
<h1>Have your books screened</h1>
<p>yah an author.</p>
<a class="btn btn-success" href="{% url 'author_info' %}" role="button">More Info</a>
</div>
</div>
</div>
</div>
</div>
Simply create a div around jumbotrons with md-5 and offset class.