i want to show 3 tiles in a one row. 3 tiles should come in one row in the mobile view also.now im able to see only 3 tiles in one row but in mobile its showing two tiles in a row. how to make 3 tiles should cover complete row and same 3 tiles i need to show mobile also .im using adminlte theme for the design
code pen
https://codepen.io/krishnakernel/pen/VQQyaV
<div class="row">
<div class="col-lg-3 col-xs-6">
<!-- small box -->
<div class="small-box bg-green">
<div class="inner">
<h3>64 ℃<sup style="font-size: 20px"></sup></h3>
<p><span>Oil Temperature</span></p>
</div>
<div class="icon">
<i class="fa fa-thermometer-3"></i>
</div>
<a href="#" class="small-box-footer">
More info <i class="fa fa-arrow-circle-right"></i>
</a>
</div>
</div>
<div class="col-lg-3 col-xs-6">
<!-- small box -->
<div class="small-box bg-yellow">
<div class="inner">
<h3>88<span style="font-size:30px">Amp</span></h3>
<p>R Current </p>
</div>
<div class="icon">
<i class="fa fa-flash"></i>
</div>
<a href="" class="small-box-footer">
More info <i class="fa fa-arrow-circle-right"></i>
</a>
</div>
</div>
<div class="col-lg-3 col-xs-6">
<!-- small box -->
<div class="small-box bg-red">
<div class="inner">
<h3>233 <span style="font-size:20px">⚡</span> </h3>
<p>R Voltage in kva</p>
</div>
<div class="icon">
<i class="fa fa-bolt"></i>
</div>
<a href="#" class="small-box-footer">
More info <i class="fa fa-arrow-circle-right"></i>
</a>
</div>
</div>
</div>
You didnt close the div properly
Change <div class="col-lg-3 col-xs-4">
Try changing the classes to col-xs-4 for all the elements you want to have displayed in a row.
In bootstrap, the grid summ need to be equal 12. Then if you want the xs to be a row, you need to change to col-xs-4 because you only have 3 div.
Check more info here: https://www.w3schools.com/bootstrap/bootstrap_grid_system.asp
If you want your layout to always be three columns use the xs breakpoint. The different breakpoints are designed to change the layout based on screen size.
Related
I have this code
<div class="row">
<h3><b>We've got you covered</b></h3>
<h6>Find things to do in cities around the world</h6>
<div class="col-md-4">
<div class="div-icon col">
<i class="fas fa-info h1"></i>
</div>
<div class="div-content col">
<b>Explore top attractions</b>
<p><small>Experience the best of your destination with attractions, tours, activities, and more</small></p>
</div>
</div>
<div class="col-md-4">
</div>
<div class="col-md-4">
</div>
</div>
I want the icon and text to align like this
The icon and text code
<div class="col-md-4">
<div class="div-icon col">
<i class="fas fa-info h1"></i>
</div>
<div class="div-content col">
<b>Explore top attractions</b>
<p><small>Experience the best of your destination with attractions, tours, activities, and more</small></p>
</div>
</div>
Using col and col does not divide the col-md-4 into two. Is there a way i can display icon and content side by side using only bootstrap classes?
you have to wrap your inner cols with div class="row" and give cols specific size
<div class="col-md-4">
<div class="row">
<div class="div-icon col-md-1">
<i class="fas fa-info h1"></i>
</div>
<div class="div-content col-md-11">
<b>Explore top attractions</b>
<p><small>Experience the best of your destination with attractions, tours, activities, and more</small></p>
</div>
</div>
</div>
I am working an Angular 4 application ,In this I have a navigation bar with text and font awesome icons .
It's UI is fine in web view but when it comes to mobile view (minimized screen) it is not aligned how I expect .
I have tried my best but I can't fix it .
In Minimized view :
How I expect :(example)
Here I have attached the stackblitz file : https://stackblitz.com/edit/angular-bootstrap-carousel-dynamic2-w1qhj4?file=app%2Fapp.component.html
xs applies to every screen size if nothing else is provided, sm doesn't apply to mobile screens.
<div class="col-md-3 col-xs-12"> <!-- Changes -->
<div class="container">
<div class="row">
<div class="col-xs-2"> <!-- Changes -->
<i class="fas fa-phone text-white" style="font-size:40px"></i>
</div>
<div class="col-xs-10"> <!-- Changes -->
<div class="container">
<div class="row">
<span class="text-white text-uppercase col-sm-12">Demo 1</span>
<span class="text-white col-sm12" style="margin-left: 14px">Text Text</span>
</div>
</div>
</div>
</div>
</div>
</div>
I am working on a layout using bootstrap 4 alpha (really like the cards feature btw).
So, I have this area within the layout where I want the phone and email info to be placed on the same line. I'm no css guru and know barely enough to be dangerous. So, I'm unsure how to achieve the effect I'm after and do so correctly. Any tips or advice is greatly appreciated.
Here is the code I currently have:
<div class="media">
<div class="media-left">
<a href="#">
<img class="media-object" src="img/avatars/adelle.jpg" alt="Generic placeholder image">
</a>
</div>
<div class="media-body">
<span class="favorite"><i class="fa fa-star"></i></span>
<h6 class="media-heading">Jacqueline Perry</h6>
<span class="company">Domino Technologies</span>
<div class="row">
<div class="col-xs-12 col-sm-6 col-md-8">
<ul class="details">
<li class="phone"><i class="fa fa-mobile fa-lg fa-lg"></i> (123) 786-4533 </li>
<li class="email"><i class="fa fa-paper-plane-o"></i> jacqueline.perry#smithcorporation.com</li>
<li class="address"><i class="fa fa-map-marker"></i> 338 West 23rd Street New York, NY 10011, USA </li>
</ul>
</div>
</div> <!-- ./row -->
</div>
</div>
What I'm trying to achieve is this (see image below)
http://jsfiddle.net/hamzanisar/d1mdm2tk/3
Maybe this will work for you. Just re-size the view port and it will be one line for responsive you can adjust as you want. I'm using row and col-*-* because with row and col-*-* its possible otherwise you need to make custom css
I want the three div containers to line up side by side with a max-width of 1044px. I tried using col-md-4, because I have margin:20px, it pushed the third div container to the second row. I read up online, some people suggested using a div class="row", I tried that, end result is the same.
Here is my HTML:
<div class="engineering-section col-xs-12">
<div class="engineering-section-title title-text text-center">Engineering</div>
<div class="row">
<div class="card-container">
<div class="card-section col-md-4">
<div class="mdl-card__media">
<img src="img/engineer-1.jpg">
</div>
<div class="mdl-card__supporting-text">
<span class="mdl-typography--font-light mdl-typography--subhead">V8.8 aspenONE Enginnering Suite (May 2015)</span>
<div class="checksum">
<a class="info_checksum" href="#">Checksum</a>
</div>
</div>
<div class="card_actions">
<a class="card-links" href="#">
Download Now
<i class="fa fa-chevron-right"></i>
</a>
</div><!--end card_actions-->
</div><!--end mdl-cell-->
<div class="card-section col-md-4">
<div class="mdl-card__media">
<img src="img/engineer-2.jpg">
</div>
<div class="mdl-card__supporting-text">
<span class="mdl-typography--font-light mdl-typography--subhead">V8.8 aspenONE Process Manuals and Process Tools</span>
<div class="checksum">
<a class="info_checksum" href="#">Checksum</a>
</div>
</div>
<div class="card_actions">
<a class="card-links" href="#">
Download Now
<i class="fa fa-chevron-right"></i>
</a>
</div><!--end card_actions-->
</div><!--end mdl-cell-->
<div class="card-section col-md-4">
<div class="mdl-card__media">
<img src="img/engineer-3.jpg">
</div>
<div class="mdl-card__supporting-text">
<span class="mdl-typography--font-light mdl-typography--subhead">Aspen License Deployment Assistant</span>
<div class="checksum">
<a class="info_checksum" href="#">Checksum</a>
</div>
</div>
<div class="card_actions">
<a class="card-links" href="#">
Download Now
<i class="fa fa-chevron-right"></i>
</a>`enter code here`
</div><!--end card_actions-->
</div><!--end mdl-cell-->
</div><!--end row-->
</div><!--end card-container-->
Remove custom styles of margin from card-section class. It will work
You have to follow these 3 rules :
Rows must be placed within a .container (fixed-width) or
.container-fluid (full-width) for proper alignment and padding.
Use rows to create horizontal groups of columns.
Content should be placed within columns, and only columns may be immediate children of rows.
It should look like this :
<div class="container-fluid"><!--<div class="container">-->
<div class="row">
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4">.col-md-4</div>
</div>
</div>
See this link for more information about the Bootstrap responsive design :
http://getbootstrap.com/css/
You are doing wrong here
<div class="card-section col-md-4">
Put card-section inside col-md-4
<div class="col-md-4">
<div class="card-section">
it can give you the space between 3 cols and you can style the content too
and remove margin: 20px; it's unnecessary now.
Fiddle example
I'm trying to add the image unikafront.jpg on the right-hand side of the page. For some reason, the image is not displayed. Please note this section used to have a contact form which I removed to make space for the image. This is the bootstrap theme being used: http://authenticgoods.co/wrapbootstrap/themes/sparks/
<!-- contact section begins -->
<section id="contact-section">
<div class="container contact-section">
<div class="row">
<div class="col-md-offset-1 col-md-4 col-xs-12 contact-info">
<h3>Contact Info</h3>
<p><i class="fa fa-map-marker"></i> 101 some street </p>
<p><i class="glyphicon glyphicon-time"></i> Monday - Friday 9AM - 7PM PST</p>
<p><i class="fa fa-envelope-o"></i> info#domain.com</p>
<p><i class="fa fa-external-link"></i> www.domain.com</p>
<h3>We love what we do and we’d love to talk with you about how we can help you grow your business!</h3>
<div class="social-icons">
Privacy Policy<br>
Terms of Use<br>
Disclaimers<br>
Compensation Disclosure<br>
</div>
</div>
<div class="col-md-offset-1 col-md-5 col-xs-12">
<img src="images/unikafront.jpg alt="" />
</div>
</div><!-- End row -->
</div>
Please close the src="" attribute like
<img src="images/unikafront.jpg" alt="" />
As i test it with the firebug tool with your relevant theme "sparks".
when i placed the image tag like
<img src="http://lorempixel.com/300/300/" alt="" />
it display the image without any problem. Kindly cross check that you are referring the correct path for the image in your src attribute.