I'm having trouble figuring out whats causing the extra gap between my divs that I am trying to use as cards. I want the columns of the 2 buttons to be more closer together. After finding some similar posts on SO, I tried removing the padding and looked up gutters as well in Bootstrap to see if that could fix the issue but I'm still having problems. Is there something else I should be using instead?
Here what the UI currently looks like, I'm trying to reduce the space in between the cards.
<div class="col-md-3 padding-0 no-gutters">
<i class=" align-middle fas fas fa-users fa-3x"></i><br /><br />Card 1
<i class="fas fa-users-cog fa-3x"></i><br /><br />Card 2
</div>
<div class="col-md-3">
<i class="fas fa-building fa-3x"></i><br /><br />Card 3
<i class="fas fa-user-tag fa-3x"></i><br /><br />Card 4
</div>
Related
I'm having a problem with the alignment of two "buttons" (links) on the right in bootstrap.
My goals are two:
To make them as right-aligned as possible.
To always have a small margin between them.
Although at first the separation between them is more or less correct and I can get them to be aligned to the right without an excessive margin of the last element on the right side, as I reduce the size of the page, both end up overlapping.
I've managed to prevent this from happening by putting mr-x, mr-sm-x,... classes on them, but I can see that it doesn't make any sense because in order for it to work more or less well, I have to put an excessive amount of classes on them. Something like:
ml-3 ml-sm-1 ml-md-1 mr-4 mr-sm-2 mr-md-2 mr-lg-1 mr-xl-0
And the result is not optimal either.
I have tried to make it work with offset classes, with align-items-end and with justify-content-end. Also with float-right, but I always have problems with margins and overlap.
Here are some images that show the problem and the example in jsfiddle
Example on jsfiddle
Seems like you want to use Bootstrap's button groups:
<div class="container">
<nav class="navbar heading-title">
<span class="navbar-brand mb-0 h1">TÃtulo</span>
</nav>
<nav class="navbar row justify-content-end">
<div class="btn-group" role="group" aria-label="Basic example">
<a class="btn" href="#" role="button">
<i class="fa fa-user"></i>
</a> <a class="btn" href="#" role="button">
<i class="fa fa-user"></i>
</a>
</div>
</nav>
</div>
jsFiddle example
How can I have both my search box and badge horizontally in single row in the navbar ? I'm using materialize CSS
<nav class="orange" role="navigation">
<div class="nav-wrapper container">
<a id="logo-container" href="/" class="brand-logo white-text">C.U.P.S</a>
<ul class="right">
<a class="waves-effect waves-light btn-small indigo" href="cart"> <i class="material-icons left">add_shopping_cart</i> Cart <span class="badge white-text" data-badge-caption={{ count((array) session('cart')) }}></span></a>
<form class="col s12">
<div class="inline">
<div class="input-field col s6">
<input id="search" type="text" class="validate" placeholder="Search...">
</div>
<div class="input-field col s6">
<button class="waves-effect waves-light btn-small indigo" type="submit" name="action">Search</button>
</div>
</div>
</form>
</ul>
</div>
</nav>
If you upload your problem into a CodePen, it is easier for people to try out your code, adapt it and help you. It doesn't take long, I added your stuff in around 5 minutes, with taking care of scripts and links, but it will be a great help for people who want to help you solve your problem.
So, some general stuff about the materialize grid:
To make text fields inline, you need to add the inline class to the input-field-div (can be found in the examples of Materialize Text Inputs). Adding an enclosing div does not work
Columns only work with an enclosing row, which the <form> does not have. This is also part of your problem, more down below
The grid is based on 12 columns. So the form with col s12 will take up the complete row
If you want to split the form 50:50, you need to put the form in their own container. If not, the col will assume, that it is referencing the container around the whole navbar (more about Grids in Materialize
An unordered list (ul-tags) should always have list-items (li-tags) for each individual part of the unordered list
So, regarding your problem: Add list items to your unordered list, one for the badge, one for the search form. Then, you also need to add a div with the row-class to your form, as well as a container for the elements to get back into a local context. Add the inline-class to the right element, and you are good to go. Here's a CodePen with a working example. Hope it helps and you understand why it didn't work before!
edit: update codepen link
Try by this way
<nav class="orange" role="navigation">
<div class="nav-wrapper container">
<a id="logo-container" href="/" class="brand-logo white-text">C.U.P.S</a>
<ul class="right">
<a class="waves-effect waves-light btn-small indigo" href="cart"> <i class="material-icons left">add_shopping_cart</i> Cart <span class="badge white-text" data-badge-caption={{ count((array) session('cart')) }}></span></a>
<form class="col s12">
<div class="row">
<div class="input-field col s6">
<input id="search" type="text" class="validate" placeholder="Search...">
</div>
<div class="input-field col s6">
<button class="waves-effect waves-light btn-small indigo" type="submit" name="action">Search</button>
</div>
</div>
</form>
</ul>
</div>
</nav>
Add row class instead of inline
I am dynamically printing bootstrap columns divs as follows using angular2
[col-md-6][col-md-12][col-md-6][col-md-12][col-md-6][col-md-12][col-md-6][col-md-12]
but the actual grid is appearing as
[col-md-6]
[col-md-12]
[col-md-6]
[col-md-12]
[col-md-6]
[col-md-12]
[col-md-6]
[col-md-12]
I want to arrange columns like
[col-md-6][col-md-6]
[col-md-12]
[col-md-12]
[col-md-6][col-md-6]
[col-md-12]
[col-md-12]
Here is the code
<div class="row">
<span *ngFor="let serviceItem of dashboardServicesList">
<div class="col-md-6 {{serviceItem.service}}-service">
<div class="service">
<a *ngIf="serviceItem.categoryHashmap" (click)="showSegments($event,serviceItem.service)">
<span class="service-title">{{serviceItem.displayName}}</span>
<i class="fa {{serviceItem.chevron}}" aria-hidden="true"></i>
</a>
</div>
</div>
<div *ngIf="serviceItem.categoryHashmap" class="col-md-12 segments {{serviceItem.is_active}} {{serviceItem.service}}">
<ul class="segments-boxes">
<li *ngFor="let item of serviceItem.serviceSegments">
<a target="_blank" href="{{item.url}}">{{item.displayName}}</a>
</li>
</ul>
</div>
</span>
</div>
How to arrange this ? thank you.
The reason why this is happening is because of the sequence you're using.
col-md-6 + col-md-12 = col-md-18
This won't fit on one row and thats why it isn't working.
Fix your sequence and add row's to it, output as example below:
[row][col-md-6][col-md-6][row][row][col-md-12][row][row][col-md-12][row][row][col-md-6][col-md-6][row][row][col-md-12][row]
Hope this helps!
I have a bootstrap button group with two buttons and I want some text to span across the two of them.
They are Decrease and Increase buttons. So I have the text "Contrast" across the two buttons with a "-" on one button and a "+" on the other button.
I have overlayed(?) a div with the required text on top and used "pointer-events:none" to get it working - BUT I need it to work on older browsers (IE 10) that do not support pointer-events.
Is there an alternative/better way of doing it??
<div class="btn-group">
<div style="position:absolute;top:5px;left:3px;text-align:center;width:100%;color:white;z-index:300;pointer-events: none;">
<i style="left-padding:2px;vertical-align: middle;" class="fa fa-adjust fa-2x"></i>
<div style="display:inline;top: 2px;position: relative;">Contrast</div>
</div>
<button type="button" class="btn">
<br> <br>-
</button>
<button type="button" class="btn">
<br> <br>+
</button>
</div>
In the end I changed the design so that there were separate buttons and did not use a word spanning the two buttons.
I am currently trying to place an icon to be beside the header. However, I tried but it kept not being aligned. May I know why?
Here's the code I've tried
<div class="row">
<div class="col-lg-1">
</div>
<div class="col-lg-8">
<div class="row">
<h2 id="ContentPlaceHolder1_courseDetail" class="col-lg-11">Course Details</h2>
<span class="glyphicon glyphicon-exclamation-sign "></span>
</div>
<h5 id="lblLastModifiedDate" class="col-lg-12">Last Modified Date: 21/10/2016 3:02:35 PM</h5>
</div>
</div>
The span is allowed to be inside your h2 tag, so that it displays next to the text
<h2 id="ContentPlaceHolder1_courseDetail" class="col-lg-11">Course Details <span class="glyphicon glyphicon-exclamation-sign "></span></h2>
Also if you don't actually want them attached as such, you have already set yourself up to display them side by side in other ways
<h2 id="ContentPlaceHolder1_courseDetail" class="col-lg-11">Course Details</h2>
<span class="glyphicon glyphicon-exclamation-sign col-md-1"></span>
Though that's not advised because the first option is much nicer looking as the latter choice will give a gap between them due to bootstrap's column system
If you do not wish for them to display next to each other, you can also do things like this
<h2 class="col-lg-11"><span id="ContentPlaceHolder1_courseDetail">Course Details</span><span class="glyphicon glyphicon-exclamation-sign col-md-1"></span></h2>