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>
Related
Good day. Tell me please. Taught django, and took the template html, css, js. There is used bootstrap. Few adapted it for myself. He worked on a 17 '' monitor. Actually, when the 21 'monitor began to look, the blocks ran over each other. Besides, on 15'6, through the phone everything is in order. Tried to attribute in addition to col-sm as col-lg - the result did not. Tell me, please, how can I solve this problem.
It should be - https://i.stack.imgur.com/usEMI.png
How it happened - https://i.stack.imgur.com/UvUfX.png
Right-sidebar code:
<div class="col-md-9 col-lg-9">
<div class="col-md-12 col-lg-12 page-body">
<div class="row">
<div class="sub-title">
<h2>Some Notes</h2>
<i class="icon-envelope"></i>
</div>
<div class="col-md-12 col-lg-12 content-page">
<div class="col-md-12 col-lg-12 blog-post">
<div class="post-title">
<h1>джанго код</h1>
</div>
<div class="post-info">
<span>джанго код / by джанго код</span>
</div>
<p style="word-break: break-all"> джанго код</p>
<span>Read More</span>
</div>
<div class="col-md-12 col-lg-12 text-center">
Load
<div id="post-end-message"></div>
</div>
</div>
</div>
Left-sidebar code:
<div id="main">
<!-- about(left sidebar) -->
<div class ="col-md-3 col-lg-3">
<div class="about-fixed">
<div class="my-pic">
<img src="{% static 'images/pic/av-pic.png' %}" alt="av-pic">
</div>
<div class="my-detail">
<div class="white-spacing">
<h1></h1>
<span>Learning Web Development</span>
</div>
<ul class="social-icon">
<li><i class="fa fa-github"></i></li>
<li><i class="fa fa-vk"></i></li>
</ul>
</div>
P.S. Sorry for english.
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.
I'm trying to make my cards (panels) set next to each other and I'm using the templates at mdbootstrap.com.
My code:
<div class="row">
<div class="col-md-12">
<div class="card mdb-color lighten-2 text-center z-depth-2">
<div class="card-body">
<p class="white-text mb-0"> <?php echo convertCurrency("1.00", "POUND", "DOLLAR");
?>.</p>
</div>
</div>
<Br>
<div class="card mdb-color lighten-2 text-center z-depth-2">
<div class="card-body">
<p class="white-text mb-0">btc<i class="fa fa-bitcoin" aria-hidden="true">
</i> = <?php echo $info['rate'];
?></p>
</div>
</div>
</div>
</div>
I tried to give it a class of d-inline but it's not working...
The cards I'm using https://mdbootstrap.com/components/panels/
Just in case someone is looking at this, an easy way to do it is to use the card-deck class. So, for example:
<div class=card-deck>
<!-- First Card -->
<div class="card">
<div class="card-title">Title here</div>
<div class="card-body">Body here</div>
</div>
<!-- Second Card -->
<div class="card">
<div class="card-title">Title here</div>
<div class="card-body">Body here</div>
</div>
</div>
Just remember that all the cards go in the card-deck div. A drawback of this is if you have lets say 6 cards, it'll put all of the cards on the same line instead of breaking them up in multiple lines. Whenever I want cards to be on multiple lines I just use another card-deck. Hope this helps someone, cheers.
One way of doing what you want is to put both cards in two separate columns, each, i.e each box card should be inside a div with class col-md-6.
The following code shows two cards, side by side in desktop browser window size.
<div class="row">
<div class="col-md-6">
<div class="card mdb-color lighten-2 text-center z-depth-2">
<div class="card-body">
<p class="white-text mb-0">واحد جنيه سوداني = <?php echo convertCurrency("1.00", "SDG", "USD")." دولار امريكي";?>.</p>
</div>
</div>
</div>
<div class="col-md-6">
<div class="card mdb-color lighten-2 text-center z-depth-2">
<div class="card-body">
<p class="white-text mb-0">بتكوين <i class="fa fa-bitcoin" aria-hidden="true"></i> = <?php echo $info['rate']." جنيه سوداني";?></p>
</div>
</div>
</div>
</div>
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 am currently using bootstrap on a website which is displaying an ecommerce store.
The current layout is 3 columns of items within 4 rows, but I am wanting to implement a button which will change it to 2 columns.
I have done so, however the code seems to be causing some issues in that the layout changes to
Two Items
One Item
Two Items
One Item
Each one Item row has a large area of white space where an item could go.
The Code below shows one "Row" which is in the three column layout. I have used javascript which changes the class 'col-sm-4' to 'col-sm-6'. Where is my mistake here?
<div class="row"><!-- row 2 -->
<div class="col-sm-4 product-category-display">
<div class="row">
<img src="assets/img/products/women/jackets_coats/raina_parka.png" class="product-image">
</div>
<div class="row product-status">
<span class="products-status-sale">Sale</span>
</div>
<div class="row">
<p class="product-name col-sm-12"<p>Raina Waterproof Parka</p>
</div>
<div class="row product-price">
<span>£99.00</span>
</div>
</div>
<div class="col-sm-4 product-category-display">
<div class="row">
<img src="assets/img/products/women/jackets_coats/april_jacket.png" class="product-image">
</div>
<div class="row product-status">
<span></span>
</div>
<div class="row">
<p class="product-name col-sm-12">April Waterproof Front Pocket Jacket</p>
</div>
<div class="row product-price">
<span>£99.95</span>
</div>
</div>
<div class="col-sm-4 product-category-display">
<div class="row">
<img src="assets/img/products/women/jackets_coats/free_delivery.png" class="product-image">
</div>
<div class="row product-status">
<span></span>
</div>
<div class="row">
<p></p>
</div>
<div class="row product-price">
<span></span>
</div>
</div>
</div><!-- end row 2 -->
The columns should only add upto 12. When you change 4 to 6 its becomes 18.
<div class="row">
<div class="col-lg-4"></div><div class="col-lg-4"></div><div class="col-lg-4"></div>
</div>
Problem solved. I just had to remove all of the rows and tweak the JS to add the class