<div class="cursor-pointer" (click)="goBack()">
<i class="fa fa-arrow-left my-arrow ml-3 mb-1"> </i>
<a class="ml-1 go-back">Go Back</a>
</div>
I created go back button, but it is clickable on entire row, to solve this I tried:
<div class="row">
<div class="col-sm-2 cursor-pointer" (click)="goBack()">
<i class="fa fa-arrow-left my-arrow ml-3 mb-1"> </i>
<a class="ml-1 go-back">Go Back</a>
</div>
But now col-sm-2 width also is more and it is clickable, I want to make only button clickable. Is there any proper way to do the same?
try this way
<div class="row">
<div class="col-sm-2">
<a class="ml-1 go-back cursor-pointer" (click)="goBack()">
<i class="fa fa-arrow-left my-arrow ml-3 mb-1"> </i>
Go Back
</a>
</div>
</div>
Related
This question already has an answer here:
Wrapping bootstrap columns in extra div
(1 answer)
Closed 3 years ago.
I am building a small dashboard, with bootstrap 4. The structure is two columns (5 - 7), inside of which we have different rows and columns.
I have two rows that won't fit the columns inside of them even though the sum is 12.
I tried to wrap all columns inside a row div but it didn't change anything. I tried removing every padding through the developper console and I still get the same issue.
<div class="col-12 leg_planches">
<div class="col-2">
<h5 data-toggle="tooltip" data-placement="top" title="Référence" > <i class="fa fa-tint" aria-hidden="true"></i> <span>A1</span></h5>
<h5 title="Zone géographique"> <i class="fa fa-bolt" aria-hidden="true" ></i> <span></span></h5>
</div>
<div class="col-2">
<h5 data-toggle="tooltip" data-placement="top" title="Irrigation" > <i class="fa fa-tint" aria-hidden="true"></i> <span></span></h5>
<h5 title="Amendements"> <i class="fa fa-bolt" aria-hidden="true" ></i> <span></span></h5>
</div>
<div class="col-2">
<h5 title="Entretient"> <i class="fa fa-broom" aria-hidden="true" ></i> <span></span></h5>
<h5 title="Amendements"> <i class="fa fa-gem" aria-hidden="true" ></i> <span></span></h5>
</div>
<div class="col-2">
<h5 title="Estimation poids sur planche"> <i class="fa fa-hand-holding-usd" aria-hidden="true" ></i> <span></span></h5>
<h5 title="Exporté"> <i class="fa fa-fighter-jet" aria-hidden="true" ></i> <span></span></h5>
</div>
<div class="col-2">
<h5 title="Dépenses"> <i class="fa fa-credit-card" aria-hidden="true" ></i> <span></span></h5>
<h5 title="Temps de travail"> <i class="fa fa-clock" aria-hidden="true" ></i> <span></span></h5>
</div>
<div class="col-2">
<h5 title="Semé le"> <i class="fa fa-baby" aria-hidden="true" ></i> <span></span></h5>
<h5 title="Planté le"> <i class="fa fa-baby-carriage" aria-hidden="true" ></i> <span></span></h5>
</div>
</div>
I'd like for all the columns to fit on a single row as they are supposed to.
Instead of col-12, try with row. Like this
<div class="row leg_planches">
Just replace col-12 with row will resolve your issue. Thanks
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<div class="row leg_planches">
<div class="col-2">
<h5 data-toggle="tooltip" data-placement="top" title="Référence" > <i class="fa fa-tint" aria-hidden="true"></i> <span>A1</span></h5>
<h5 title="Zone géographique"> <i class="fa fa-bolt" aria-hidden="true" ></i> <span>B1</span></h5>
</div>
<div class="col-2">
<h5 data-toggle="tooltip" data-placement="top" title="Irrigation" > <i class="fa fa-tint" aria-hidden="true"></i> <span>A2</span></h5>
<h5 title="Amendements"> <i class="fa fa-bolt" aria-hidden="true" ></i> <span>B2</span></h5>
</div>
<div class="col-2">
<h5 title="Entretient"> <i class="fa fa-broom" aria-hidden="true" ></i> <span>A3</span></h5>
<h5 title="Amendements"> <i class="fa fa-gem" aria-hidden="true" ></i> <span>B3</span></h5>
</div>
<div class="col-2">
<h5 title="Estimation poids sur planche"> <i class="fa fa-hand-holding-usd" aria-hidden="true" ></i> <span>A4</span></h5>
<h5 title="Exporté"> <i class="fa fa-fighter-jet" aria-hidden="true" ></i> <span>B4</span></h5>
</div>
<div class="col-2">
<h5 title="Dépenses"> <i class="fa fa-credit-card" aria-hidden="true" ></i> <span>A5</span></h5>
<h5 title="Temps de travail"> <i class="fa fa-clock" aria-hidden="true" ></i> <span>B5</span></h5>
</div>
<div class="col-2">
<h5 title="Semé le"> <i class="fa fa-baby" aria-hidden="true" ></i> <span>A6</span></h5>
<h5 title="Planté le"> <i class="fa fa-baby-carriage" aria-hidden="true" ></i> <span>B6</span></h5>
</div>
</div>
I need some advice to make bootstrap panel header responsive. Panel has title with several buttons on the right side. It looks fine in large screen but looks ugly when browser size is small.
My full code here jsfiddle.
.panel {
margin: 15px;
}
.panel-title {
padding-top: 7px;
font-size: 20px;
}
.mr-10 {
margin-right: 10px;
}
<div class="panel panel-success panel-br-4">
<div class="panel-heading clearfix">
<h4 class="panel-title pull-left">
<i class="fa fa-file-text" aria-hidden="true"></i> <span>Documents</span>
</h4>
<a id="document-сreate-btn" class="btn btn-success pull-right">
<i class="fa fa-plus-circle"></i>
<span>Create new document</span>
</a>
<a class="btn btn-warning pull-right mr-10">
<i class="fa fa-chevron-circle-down" aria-hidden="true"></i>
</a>
<a class="btn btn-warning pull-right mr-10">
<span>Save new order</span>
</a>
</div>
<div class="panel-body">Some content</div>
</div>
When all items cannot fit in one line, I want to make header as in the next picture:
Is such things makes by flexbox or bootstrap grid system? Whats the better way? I will appreciate any examples! :)
This is just a quick example of how to use Bootstrap grid system. It's not gonna be as perfect as you want but it will give you an introduction to grid systems. Also, don't forget to read about media queries.
<div class="panel panel-success panel-br-4">
<div class="panel-heading">
<div class="row">
<div class="col-sm-6">
<h4 class="panel-title">
<i class="fa fa-file-text" aria-hidden="true"></i>
<span>Documents</span>
</h4>
</div>
<div class="col-sm-3" style="display: flex">
<a class="btn btn-warning mr-10">
<span>Save new order</span>
</a>
<a class="btn btn-warning">
<i class="fa fa-chevron-circle-down" aria-hidden="true"></i>
</a>
</div>
<div class="col-sm-3">
<a id="document-сreate-btn" class="btn btn-success mr-10" data-url="">
<i class="fa fa-plus-circle"></i>
<span>Create new document</span>
</a>
</div>
</div>
</div>
<div class="panel-body">Some content</div>
I have two div's sitting side by side, but are not centered inside of its div but rather stay on the left of its row. I am trying to make it responsive and centered as the screen size is being adjusted here is my code.
<div class="connectdiv">
<div class="row">
<div class="col-xs-6 text-center" "col-sm-6" >
<h2 id="connect"><u>Connect</u></h2>
<a target="_blank" href="https://www.instagram.com/balt_jitsu19/"><i class="fa fa-instagram fa-lg"></i></a>
<i class="fa fa-envelope fa-lg"></i>
<a target="_blank" href="https://www.freecodecamp.com/armbar1"><i class="fa fa-free-code-camp fa-lg"></i></a>
<a target="_blank" href="http://github.com/baltz1"><i class="fa fa-github fa-lg"></i></a>
</div>
<div class="col-xs-6 text-center" "col-sm-6">
<h2 id="connect"><u>Made With</u></h2>
<i class="fa fa-html5 fa-2x"></i>
<i class="fa fa-css3 fa-2x"></i>
<img src="https://png.icons8.com/icons8/ios7/32/" title="Icons8" width="32" height="32">
<img src="https://png.icons8.com/gimp/ios7/25/" title="GIMP" width="25" height="25">
</div>
</div>
</div>
My Css
#connect{
color:rgb(255, 255, 255);
font-family:'Oleo Script Swash Caps', cursive;
text-shadow:5px 1px 0px rgb(0, 0, 0);
font-size:35px;
}
.connectdiv{
padding:20px;
width:100%;
margin:5px auto;
}
if it helps i have here on codepen https://codepen.io/balt1/pen/VbYweZ?editors=0100
try this one ... it will work :
<div class="connectdiv">
<div class="row">
<div class="col-xs-6 text-center col-sm-6" >
<h2 id="connect"><u>Connect</u></h2>
<a target="_blank" href="https://www.instagram.com/balt_jitsu19/"><i class="fa fa-instagram fa-lg"></i></a>
<i class="fa fa-envelope fa-lg"></i>
<a target="_blank" href="https://www.freecodecamp.com/armbar1"><i class="fa fa-free-code-camp fa-lg"></i></a>
<a target="_blank" href="http://github.com/baltz1"><i class="fa fa-github fa-lg"></i></a>
</div>
<div class="col-xs-6 text-center col-sm-6">
<h2 id="connect"><u>Made With</u></h2>
<i class="fa fa-html5 fa-2x"></i>
<i class="fa fa-css3 fa-2x"></i>
<img src="https://png.icons8.com/icons8/ios7/32/" title="Icons8" width="32" height="32">
<img src="https://png.icons8.com/gimp/ios7/25/" title="GIMP" width="25" height="25">
</div>
</div>
You haven't applied the col-sm-6 class properly. Currently it's a quoted string precariously applied to the DIV.
Change
class="col-xs-6 text-center" "col-sm-6"
to
class="col-xs-6 col-sm-6 text-center
#import url('https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css');
<div class="connectdiv">
<div class="row">
<div class="col-xs-6 col-sm-6 text-center">
<h2 id="connect"><u>Connect</u></h2>
<a target="_blank" href="https://www.instagram.com/balt_jitsu19/"><i class="fa fa-instagram fa-lg"></i></a>
<i class="fa fa-envelope fa-lg"></i>
<a target="_blank" href="https://www.freecodecamp.com/armbar1"><i class="fa fa-free-code-camp fa-lg"></i></a>
<a target="_blank" href="http://github.com/baltz1"><i class="fa fa-github fa-lg"></i></a>
</div>
<div class="col-xs-6 col-sm-6 text-center">
<h2 id="connect"><u>Made With</u></h2>
<i class="fa fa-html5 fa-2x"></i>
<i class="fa fa-css3 fa-2x"></i>
<img src="https://png.icons8.com/icons8/ios7/32/" title="Icons8" width="32" height="32">
<img src="https://png.icons8.com/gimp/ios7/25/" title="GIMP" width="25" height="25">
</div>
</div>
</div>
You have too many quotes in your div tag after text-center. Change it to:
<div class="col-xs-6 text-center col-sm-6" >
you cot some of these " too much
try
<div class="col-xs-6 text-center col-sm-6">
instead of
<div class="col-xs-6 text-center" "col-sm-6">
About extra quotes already was written (class="col-xs-6 text-center" "col-sm-6")
But one more point, Bootstrap4 hasn't col-xs-* class, instead it's col-* class for extra small screens!
You need to write <div class="col-6 text-center">
class col-sm-6 nothing changes, because Bootstrap mobile first!
Bootstrap4 docs
Good day! I am trying to generate different boxes in my page and I'm planning to have a layout that is something like this:
4x1 layout
But what happens to my file is that it generates boxes like this:
1x4 layout
When I do this hard coded, there are no problems. However, when I use scriptlets to get the values from my MySQL Database the problem appears. Any ideas on what I should do? Thank you!!! This is my code BTW:
<div class="content-wrapper">
<% EmployeeDAO personalInfo = new EmployeeDAO();%>
<% for (int i = 0; i < personalInfo.getAllPersonalInfo().size(); i++) {%>
<!-- Content Header (Page header) -->
<div class="row">
<div class="col-md-4 col-sm-4 col-xs-12 profile_details">
<div class="box-body">
<div class="col-sm-12">
<h4 class="brief"><i>Digital Strategist</i></h4>
<div class="left col-xs-7">
<h2 id="applicantName<%=+i%>" id="applicantName<%=+i%>">
<%=personalInfo.getAllPersonalInfo().get(i).getFirstName() + " "%><%=personalInfo.getAllPersonalInfo().get(i).getLastName()%>
</h2>
<p><strong>About: </strong> Web Designer / UX / Graphic Artist / Coffee Lover </p>
<ul class="list-unstyled">
<li><i class="fa fa-building"></i> Address: </li>
<li><i class="fa fa-phone"></i> Phone #: </li>
</ul>
</div>
<div class="right col-xs-5 text-center"> <img src="dist/img/user2-160x160.jpg" alt="" class="img-circle img-responsive"> </div>
</div>
<div class="col-xs-12 bottom text-center">
<div class="col-xs-12 col-sm-6 emphasis">
<p class="ratings"> <a>4.0</a> <span class="fa fa-star"></span> <span class="fa fa-star"></span> <span class="fa fa-star"></span> <span class="fa fa-star"></span> <span class="fa fa-star-o"></span> </p>
</div>
<div class="col-xs-12 col-sm-6 emphasis">
<button type="button" class="btn btn-success btn-xs"> <i class="fa fa-user"> </i> <i class="fa fa-comments-o"></i> </button>
<button type="button" class="btn btn-primary btn-xs" data-toggle="modal" data-backdrop="static" data-keyboard="false" data-target="#AddTicket<%=+i%>"> <i class="fa fa-user"> </i> View Profile </button>
</div>
</div>
</div>
</div>
</div>
As I can see there are 2 issues in your code.
If you want to loop 4 profile_details divs you should place the loop after row div since in bootstrap, "row" class define an actual row. With your code, you will get separate row for each profile_details.
closing brackets for "for loop" is missing
Fix those things first and check
I'm currently using 2 Font Awesome icons. The problem is that I want to add text under each one that align with these icons. The problem is that the text is centered on the page but not under the corresponding icons.
Code:
<div class="container">
<div class="row">
<div class="col-md-8 col-md-offset-2">
<h1 class="brand-heading">Title</h1>
<p class="intro-text">description</p>
<a href="#about" class="btn btn-circle page-scroll btn-lg">
<i class="fa fa-angle-double-down animated"></i>
</a>
<a href="#contact" class="btn btn-circle page-scroll">
<i class="fa fa-angle-double-up animated"></i>
</a>
</div>
</div>About Contact
</div>
I think this is what you want to do. Here is the fiddle:
http://jsfiddle.net/plushyObject/02s7wnm8/
<div class="col-md-8 col-md-offset-2 text-center outline">
<h1 class="brand-heading">Title</h1>
<p class="intro-text">description</p>
<div class="col-sm-4 outline">
<a href="#about" class="btn btn-circle page-scroll btn-lg outline">
<i class="fa fa-angle-double-down fa-fw"></i>
</a>
<p class="outline">
Text is centered by 'text-center' class inherited from first
column.
</p>
</div>
</div>
If you text-align the parent element, it will be inherited by the picture.
CSS
.container {
text-align: center;
}
Line it up using an HTML <table>, and style it with CSS. That way it will stay on top of the icons correctly.
http://jsfiddle.net/vd6smL75/