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/
Related
I want to add the Back and Next buttons at the bottom of the screen with a fixed position. For my code, the button moves to the top/bottom of the screen if I change the screen size (I have attached the screenshot for both). Please check my code and help me solve this.
Code
<div id="text-area">
<p class="mb-4">
<strong>Textarea</strong>
</p>
<textarea></textarea>
<p class="d-flex justify-content-between">
<button class="btn btn-link button" id="back">
<i class="fa fa-long-arrow-alt-left me-3"></i>
Back
</button>
<button class="btn btn-link button" id="next">
Next
<i class="fa fa-long-arrow-alt-right ms-3"></i>
</button>
</p>
</div>
This solved my problem. Thanks all for your time. Happy coding.
<div class="d-flex flex-column flex-grow-1" id="text-area">
<div class="flex-grow-1">
<p class="mb-4">
<strong>Textarea</strong>
</p>
<textarea></textarea>
</div>
<p class="d-flex justify-content-between">
<button class="btn btn-link button" id="back">
<i class="fa fa-long-arrow-alt-left me-3"></i>
Back
</button>
<button class="btn btn-link button" id="next">
Next
<i class="fa fa-long-arrow-alt-right ms-3"></i>
</button>
</p>
</div>
I am creating an angular application in which i have an detail page with a cardheader which consist of two buttons namely back and edit and both sides and a text in between.
I have used bootstap and set the columns like below.
But when i see the screen in mobile view the header is not aligned properly
Below is the code i am using. How could i fix it to view in a single line in mobile view
<div class="card-header">
<div class="row">
<div class="col-sm-3 col-lg-3 text-left">
<button size="sm" class="btn btn-primary" (click)="goBack()">
<i class="fa fa-chevron-left"></i> Back
</button>
</div>
<div class="col-sm-6 col-lg-6 text-center">
<h4>Switch Detail</h4>
</div>
<div class="col-sm-3 col-lg-3 text-right">
<button size="sm" class="btn btn-primary" (click)="gotoEdit()">
<i class="fa fa-pencil"></i> Edit
</button>
</div>
</div>
</div>
There is a couple of approach you can follow.
You could force the width of the container to stay constant on all views. Note that this can cause your text to overflow.
<div class="card-header">
<div class="row">
<div class="col-3 text-left">
<button size="sm" class="btn btn-primary" (click)="goBack()">
<i class="fa fa-chevron-left"></i> <span class="button-text"> Back
</span>
</button>
</div>
<div class="col-6 text-center">
<h4>Switch Detail</h4>
</div>
<div class="col-3 text-right">
<button size="sm" class="btn btn-primary" (click)="gotoEdit()">
<i class="fa fa-pencil"></i> <span class="button-text"> Edit </span>
</button>
</div>
</div>
</div>
You could use #media Query to hide the text on the buttons leaving only the icons on a mobile view.
#media screen and (max-width: 560px) {
button-text {
display: none;
}
}
Alternatively, you could reduce the font size of the title on mobile using the same approach in case 2 above.
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've a bootstrap button group which includes a text between the buttons:
#import url('http://twitter.github.com/bootstrap/assets/css/bootstrap.css');
#import url('https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css');
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="btn-group">
<div class="btn btn-primary">
<i class="fa fa-chevron-left"></i>
</div>
<div>2016</div>
<div class="btn btn-primary">
<i class="fa fa-chevron-right"></i>
</div>
</div>
</div>
</div>
</div>
How to avoid the line breaks, such that the buttons and the text are aligned in one line?
You need to display them in-line like:
#import url('http://twitter.github.com/bootstrap/assets/css/bootstrap.css');
#import url('https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css');
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="btn-group">
<div class="btn btn-primary" style="display: inline-block;">
<i class="fa fa-chevron-left"></i>
</div>
<div style="display: inline-block;">2016</div>
<div class="btn btn-primary" style="display: inline-block;">
<i class="fa fa-chevron-right"></i>
</div>
</div>
</div>
</div>
</div>
Edit: Alternatively, as Turnip proposed in his answer, you can change the elements from divs to to another kind of element that is naturally displayed in-line. Either way, you will reach the same result.
divs are block elements. Change your buttons to <a>s and the text div to a <span> or any other inline/inline-block element.
#import url('http://twitter.github.com/bootstrap/assets/css/bootstrap.css');
#import url('https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css');
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="btn-group">
<a class="btn btn-primary">
<i class="fa fa-chevron-left"></i>
</a>
<span>2016</span>
<a class="btn btn-primary">
<i class="fa fa-chevron-right"></i>
</a>
</div>
</div>
</div>
</div>
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