user3386779
Reputation: 7175
bootstrap column not aligned
I want to list 3 column in a row I have added bootstrap for responsive.but I display only one column in single row.what I did wrong in my code.I have added row.I have created carousel which I want to display 3 column.but it shows only one column
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="suggested_content" class="row">
<div class="view view-suggested-content view-id-suggested_content view-display-id-block suggested-content view-dom-id-1fc7487dcb5039856b57c03c2939611b col-md-12">
<h2>Suggested Content</h2>
<!-- col-md-1 col-sm-1-->
<div class="view-content carousel slide" id="myCarousel">
<div id="previous_arrow" class=""><span><img src="/test/sites/default/files/arrow-prev.png"></span></div>
<div id="views-bootstrap-grid-1" class="views-bootstrap-grid-plugin-style carousel-inner">
<div class="item active">
<div class="responsive-grid-1 col-lg-4 col-xs-4 col-md-4 col-sm-4">
<div class="suggestedContent">
<div class="field-content"><img typeof="foaf:Image" src="http://localhost/test/sites/default/files/styles/inner_perspective/public/_MG_7359_5.JPG?itok=3ublCCMm" width="320" height="220" alt=""></div> <div class="perspective-title">Blog</div>
<div class="sug-ontent">
<div class="suggested-title"><span class="field-content">test content 2</span></div>
<div class="suggested-url">
<a href="http://localhost/casestudies/A%20Manpower%20Firm%20engages%20with%20Aspire%20to%20Align%20their%20Business%20Process%20with%20Oracle%20Cloud%20Solutions.pdf" target="_blank">Know More</a>
</div>
</div>
</div>
</div>
</div>
<div class="item ">
<div class="responsive-grid-2 col-lg-4 col-xs-4 col-md-4 col-sm-4">
<div class="suggestedContent">
<div class="field-content"><img typeof="foaf:Image" src="http://localhost/test/sites/default/files/styles/inner_perspective/public/_MG_7277_2.JPG?itok=g-BQKDH3" width="320" height="220" alt=""></div> <div class="perspective-title">Blog</div>
<div class="sug-ontent">
<div class="suggested-title"><span class="field-content">test content 1</span></div>
<div class="suggested-url">
<a href="http://localhost/casestudies/A%20Manpower%20Firm%20engages%20with%20Aspire%20to%20Align%20their%20Business%20Process%20with%20Oracle%20Cloud%20Solutions.pdf" target="_blank">Know More</a>
</div>
</div>
</div>
</div>
</div>
<div class="item ">
<div class="responsive-grid-3 col-lg-4 col-xs-4 col-md-4 col-sm-4">
<div class="suggestedContent">
<div class="field-content"><img typeof="foaf:Image" src="http://localhost/test/sites/default/files/styles/inner_perspective/public/Manpower%20Firm.jpg?itok=_bYBf1j1" width="320" height="220" alt=""></div> <div class="perspective-title">Case Study</div>
<div class="sug-ontent">
<div class="suggested-title"><span class="field-content">A Manpower Firm engages with Aspire to Align their Business Process with Oracle...</span></div>
<div class="suggested-url">
<a href="http://localhost/casestudies/A%20Manpower%20Firm%20engages%20with%20Aspire%20to%20Align%20their%20Business%20Process%20with%20Oracle%20Cloud%20Solutions.pdf" target="_blank">Read More</a>
</div>
</div>
</div>
</div>
</div>
<div class="item ">
<div class="responsive-grid-4 col-sm-4 col-md-4 col-lg-4">
<div class="suggestedContent">
<div class="field-content"><img typeof="foaf:Image" src="http://localhost/test/sites/default/files/styles/inner_perspective/public/Manpower%20Firm.jpg?itok=_bYBf1j1" width="320" height="220" alt=""></div> <div class="perspective-title">Case Study</div>
<div class="sug-ontent">
<div class="suggested-title"><span class="field-content">A Manpower Firm engages with Aspire to Align their Business Process with Oracle...</span></div>
<div class="suggested-url">
<a href="http://localhost/casestudies/A%20Manpower%20Firm%20engages%20with%20Aspire%20to%20Align%20their%20Business%20Process%20with%20Oracle%20Cloud%20Solutions.pdf" target="_blank">Read More</a>
</div>
</div>
</div>
</div>
</div>
<div class="item">
<div class="responsive-grid-5 col-sm-4 col-md-4 col-lg-4">
<div class="suggestedContent">
<div class="field-content"><img typeof="foaf:Image" src="http://localhost/test/sites/default/files/styles/inner_perspective/public/Seasonal%20Merchandise.jpg?itok=nBDMdUIz" width="320" height="220" alt=""></div> <div class="perspective-title">Article</div>
<div class="sug-ontent">
<div class="suggested-title"><span class="field-content">Seasonal Merchandise Planning to focus on Customer Centricity and Inventory...</span></div>
<div class="suggested-url">
<a href="http://localhost/articles/customer-centricity-merchandise-planning-and-inventory-optimization/" target="_blank">Read More</a>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="next_arrow" class=""><span><img src="/test/sites/default/files/arrow-next.png"></span></div> <!-- col-md-1 col-sm-1-->
<a class="left carousel-control" href="#myCarousel" data-slide="prev"><i class="glyphicon glyphicon-chevron-left"></i></a>
<a class="right carousel-control" href="#myCarousel" data-slide="next"><i class="glyphicon glyphicon-chevron-right"></i></a>
</div></div>
</div>Upvotes: 1
Views: 72
Answers (2)
Lakindu Gunasekara
Reputation: 4271
I have used another div tag inside the items and added a column-gap in the css. Note that this is a minimal representation of the slide. I tried the bootstrap grid layouts but for some reason it does not work inside the carousel. But I suggest that if grid can get work, that is a the best option.
Try the snippet
.carousel{
background: grey;
}
#myid {
column-count: 3;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet" />
<body>
<div id="text-carousel" class="carousel slide" data-ride="carousel">
<!-- Wrapper for slides -->
<div class="row">
<div class="col-xs-offset-3 col-xs-6">
<div class="carousel-inner">
<div class="item active">
<div class="carousel-content">
<div id=myid>
<p>Sapiente, ducimus, voluptas, mollitia voluptatibus nemo explicabo sit blanditiis laborum dolore illum fuga veniam quae expedita libero accusamus quas harum ex numquam necessitatibus provident deleniti tenetur iusto officiis recusandae corporis culpa quaerat?</p>
</div>
</div>
</div>
<div class="item">
<div class="carousel-content">
<div id=myid>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi, sint fuga temporibus nam saepe delectus expedita vitae magnam necessitatibus dolores tempore consequatur dicta cumque repellendus eligendi ducimus placeat! </p>
</div>
</div>
</div>
<div class="item">
<div class="carousel-content">
<div id=myid> <img src="https://png.pngtree.com/thumb_back/fw800/back_pic/03/77/45/0657c00b43e2a66.jpg" width="250px" height="20px;">
<p>Sapiente, ducimus, voluptas, mollitia voluptatibus nemo explicabo sit blanditiis laborum dolore illum fuga veniam quae expedita libero accusamus quas harum ex numquam necessitatibus provident deleniti tenetur iusto officiis recusandae corporis culpa quaerat?</p>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Controls --> <a class="left carousel-control" href="#text-carousel" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" href="#text-carousel" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>
</body>Upvotes: 0
Habib
Reputation: 938
You have to use col-xs-12 class to show the single column in a line.
So I have edited you code.
If you follow my code, you will have single element/column in one line.
HTML:
<div id="suggested_content" class="row">
<div class="view view-suggested-content view-id-suggested_content view-display-id-block suggested-content view-dom-id-1fc7487dcb5039856b57c03c2939611b col-md-12">
<h2>Suggested Content</h2>
<!-- col-md-1 col-sm-1-->
<div class="view-content carousel slide" id="myCarousel">
<div id="previous_arrow" class=""><span><img src="/test/sites/default/files/arrow-prev.png"></span></div>
<div id="views-bootstrap-grid-1" class="views-bootstrap-grid-plugin-style carousel-inner">
<div class="item active">
<div class="responsive-grid-1 col-lg-4 col-xs-12 col-md-4 col-sm-4">
<div class="suggestedContent">
<div class="field-content"><img typeof="foaf:Image" src="http://localhost/test/sites/default/files/styles/inner_perspective/public/_MG_7359_5.JPG?itok=3ublCCMm" width="320" height="220" alt=""></div> <div class="perspective-title">Blog</div>
<div class="sug-ontent">
<div class="suggested-title"><span class="field-content">test content 2</span></div>
<div class="suggested-url">
<a href="http://localhost/casestudies/A%20Manpower%20Firm%20engages%20with%20Aspire%20to%20Align%20their%20Business%20Process%20with%20Oracle%20Cloud%20Solutions.pdf" target="_blank">Know More</a>
</div>
</div>
</div>
</div>
</div>
<div class="item ">
<div class="responsive-grid-2 col-lg-4 col-xs-12 col-md-4 col-sm-4">
<div class="suggestedContent">
<div class="field-content"><img typeof="foaf:Image" src="http://localhost/test/sites/default/files/styles/inner_perspective/public/_MG_7277_2.JPG?itok=g-BQKDH3" width="320" height="220" alt=""></div> <div class="perspective-title">Blog</div>
<div class="sug-ontent">
<div class="suggested-title"><span class="field-content">test content 1</span></div>
<div class="suggested-url">
<a href="http://localhost/casestudies/A%20Manpower%20Firm%20engages%20with%20Aspire%20to%20Align%20their%20Business%20Process%20with%20Oracle%20Cloud%20Solutions.pdf" target="_blank">Know More</a>
</div>
</div>
</div>
</div>
</div>
<div class="item ">
<div class="responsive-grid-3 col-lg-4 col-xs-12 col-md-4 col-sm-4">
<div class="suggestedContent">
<div class="field-content"><img typeof="foaf:Image" src="http://localhost/test/sites/default/files/styles/inner_perspective/public/Manpower%20Firm.jpg?itok=_bYBf1j1" width="320" height="220" alt=""></div> <div class="perspective-title">Case Study</div>
<div class="sug-ontent">
<div class="suggested-title"><span class="field-content">A Manpower Firm engages with Aspire to Align their Business Process with Oracle...</span></div>
<div class="suggested-url">
<a href="http://localhost/casestudies/A%20Manpower%20Firm%20engages%20with%20Aspire%20to%20Align%20their%20Business%20Process%20with%20Oracle%20Cloud%20Solutions.pdf" target="_blank">Read More</a>
</div>
</div>
</div>
</div>
</div>
<div class="item ">
<div class="responsive-grid-4 col-sm-4 col-xs-12 col-md-4 col-lg-4">
<div class="suggestedContent">
<div class="field-content"><img typeof="foaf:Image" src="http://localhost/test/sites/default/files/styles/inner_perspective/public/Manpower%20Firm.jpg?itok=_bYBf1j1" width="320" height="220" alt=""></div> <div class="perspective-title">Case Study</div>
<div class="sug-ontent">
<div class="suggested-title"><span class="field-content">A Manpower Firm engages with Aspire to Align their Business Process with Oracle...</span></div>
<div class="suggested-url">
<a href="http://localhost/casestudies/A%20Manpower%20Firm%20engages%20with%20Aspire%20to%20Align%20their%20Business%20Process%20with%20Oracle%20Cloud%20Solutions.pdf" target="_blank">Read More</a>
</div>
</div>
</div>
</div>
</div>
<div class="item">
<div class="responsive-grid-5 col-sm-4 col-xs-12 col-md-4 col-lg-4">
<div class="suggestedContent">
<div class="field-content"><img typeof="foaf:Image" src="http://localhost/test/sites/default/files/styles/inner_perspective/public/Seasonal%20Merchandise.jpg?itok=nBDMdUIz" width="320" height="220" alt=""></div> <div class="perspective-title">Article</div>
<div class="sug-ontent">
<div class="suggested-title"><span class="field-content">Seasonal Merchandise Planning to focus on Customer Centricity and Inventory...</span></div>
<div class="suggested-url">
<a href="http://localhost/articles/customer-centricity-merchandise-planning-and-inventory-optimization/" target="_blank">Read More</a>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="next_arrow" class=""><span><img src="/test/sites/default/files/arrow-next.png"></span></div> <!-- col-md-1 col-sm-1-->
<a class="left carousel-control" href="#myCarousel" data-slide="prev"><i class="glyphicon glyphicon-chevron-left"></i></a>
<a class="right carousel-control" href="#myCarousel" data-slide="next"><i class="glyphicon glyphicon-chevron-right"></i></a>
</div>
</div>
Upvotes: 1
Related Questions
- bootstrap - aligning columns within a div
- bootstrap columns not on aligned within row
- Bootstrap4 aligned column
- Evenly sized Bootstrap columns are not aligning correctly
- Bootstrap columns not aligning correctly
- Columns won't horizontally align with Bootstrap
- Aligning the bootstrap column
- Column misalignment with text & image in Bootstrap
- Bootstrap columns does not align correctly
- Content in column not aligned properly