Hi please look at this,
<div class="row">
<div class="col-lg-5"></div>
<div class="col-lg-15">
<div class="row">
<div class="col-lg-**2/3**"></div>
<div class="col-lg-**1/3**"></div>
</div>
</div>
How Can I do it without separator?
I would like to do something like that:
<div class="row">
<div class="col-lg-10"></div>
<div class="col-lg-5"></div>
</div>
This is Grid - 20 columns, 5 column sidebar 15 rest.
Bootstrap is based on a 12 column grid. If you want a column to be 2/3's of a page with a sidebar 1/3 I would do the following.
<div class="container>
<div class="row">
<div class="col-sm-8">
<p> This content is 2/3 of the page</p>
</div><!-- col-sm-8 -->
<div class="col-sm-4 -->
<p>This content is 1/3 of the page</p>
</div><!-- col-sm-4 -->
</div><!-- row -->
</div><!-- container -->
If you are wanting it to be responsive I would start with defining the smaller screen size "col-sm-?" and large screens will inherit this.
Otherwise, I'm not sure what you are trying to achieve and what you mean by separator. Could you clarify?
Hope this helps.
Related
My images wont stay on the same row once i put the <p> in, they both sit in there own row, not sure what im doing wrong here
<div class="container">
<div class="row">
<div class="image-fluid text-center">
<img class="bruno" src="resourcesnew/css/Img/bruno.jpg">
<p class="h6">Bruno</p>
<img class="anth" src="resourcesnew/css/Img/anth.jpg">
<p class="h6">Anthony</p>
</div>
</div>
</div>
I think whatever CSS you used in class="row" is not acting the way you expect, because that div has a single child.
I don't know what's in your css file, but the following HTML works as I expect you want:
<div class="container">
<div class="image-fluid text-center" style="display:flex">
<div>
<img class="bruno" src="resourcesnew/css/Img/bruno.jpg">
<p class="h6">Bruno</p>
</div>
<div>
<img class="anth" src="resourcesnew/css/Img/anth.jpg">
<p class="h6">Anthony</p>
</div>
</div>
</div>
Each image/text pair gets its own div, and what used to be your row div now has multiple children.
I'm not sure how to properly word this question, hence the sketchy title.
I'm using Bootstrap 5.2.3, two-column grid to display three cards. There is one card in the first column and two cards, one per row, in the second column.
Code
<div class="container-fluid ">
<!-- Content starts here-->
<div class="row mt-3 mb-3">
<div class="col-md-2 mb-3">
<div class="card shadow h-100 mb-3">
<div class="card-header">
<h6 class="m-0 font-weight-bold text-primary">Students</h6>
</div>
<div class="card-body">
Box C
</div>
</div>
</div>
<div class="col-md-10 mb-3">
<div class="card shadow h-100 mb-3 ">
<div class="card-header">
<h6 class="m-0 font-weight-bold text-primary">Tests</h6>
</div>
<div class="card-body">
content box a
</div>
</div>
<div class="card shadow h-100 mb-3">
<div class="card-header">
<h6 class="m-0 font-weight-bold text-primary">Questions</h6>
</div>
<div class="card-body">
content box b
</div>
</div>
</div>
</div>
</div>
<!-- /.container-fluid -->
</div>
https://jsfiddle.net/nbrvqmat/
I've used the h-100 successfully in other parts of my project when there is one on the left and one on the right.
In this scenario, the bottom of the left card, Students, is only extends to the bottom of the first card, Tests. It should be the bottom of the last card, Questions.
When I inspect the Row element, it does not contain the Questions card. The height ends at the bottom of the Students and Tests cards.
If I remove the h-100 from both cards, they are contained within the row.
How can I get bottom of the Student card to match the bottom of the Questions card?
In col-md-10 you set the first card as 100% height of its column, which causes the second card to overflow out of col-md-10 because there is no more vertical space left to allocate.
Try setting overflow:hidden on col-md-10 and you will see it be cut off.
Therefore row will only grow in height that of the first card in col-md-10. Understanding that, you should realize the only thing you need to do is making the Students card a 100% height of its parent; col-md-2 which' own height is determined by the height of row.
In the example below (or see JSFiddle) I set a min-height on .card to give the cards some height for demonstration purposes, but in the end the Students card will always grow/shrink to the combined height of its two neighboring cards, except of course when they wrap at the smaller screen size.
.card {
min-height: 10rem;
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>
<div class="container-fluid ">
<div class="row mt-3">
<div class="col-md-2 mb-3">
<div class="card shadow h-100">
<div class="card-header">
<h6 class="m-0 font-weight-bold text-primary">Students</h6>
</div>
<div class="card-body">
Box C
</div>
</div>
</div>
<div class="col-md-10 mb-3">
<div class="card shadow mb-3">
<div class="card-header">
<h6 class="m-0 font-weight-bold text-primary">Tests</h6>
</div>
<div class="card-body">
content box a
</div>
</div>
<div class="card shadow">
<div class="card-header">
<h6 class="m-0 font-weight-bold text-primary">Questions</h6>
</div>
<div class="card-body">
content box b
</div>
</div>
</div>
</div>
</div>
I have a bootstrap carousel on a page, where I have 3 game cards per one slide, but they are hardcoded. How can I make them dynamic? I need to take game cards from my db. This is what I have now:
<div id="carousel" class="carousel-inner thumb-inner">
<div class="active item">
<div class="col-lg-12 col-md-12 col-xs-12 slide1 slider-div">
<div class="game-card">Some content here</div>
<div class="game-card">Some content here</div>
<div class="game-card">Some content here</div>
</div>
</div>
<div class="item">
<div class="col-lg-12 col-md-12 col-xs-12 slide1 slider-div">
<div class="game-card">Some content here</div>
<div class="game-card">Some content here</div>
<div class="game-card">Some content here</div>
</div>
</div>
</div>
What is the right way to put a ruby code here? My thoughts were smth. like this:
<div class="active item">
<div class="col-lg-12 col-md-12 col-xs-12 slide1 slider-div">
<% Game.all.each_with_index do |game, index| %>
<div class="col-lg-4 col-md-4 col-sm-4">
<%= game.title %>
</div>
<% end %>
</div>
</div>
But this will give me all game card on a slide. What is the correct way to make 3 game card per one slide? Thanks.
You could make use of limit and offset here to get 3 records at a time. For example:
Game.offset(0).limit(3) # first 3 items
Game.offset(3).limit(3) # next 3 items
If the Game table only has a small number of records that fit comfortably in memory, you could also do something like this:
items = Game.all.to_a # do this once to load up all the records
items.shift(3) # call repeatedly to get the next 3 items
This has the advantage that you can randomise the items upfront e.g. Game.order("RANDOM()").to_a
Ex. Code below is represented as Blue Box, I want to expand 2 grid to Yellow one. But, the problem is; This .. need to be inside content but it always have margin left and right. I don't know how to solve this.
<div data-role="content" data-theme="d" >
<div class="ui-grid-a" >
<div class="ui-block-a"><strong>Time:</strong></div>
<div class="ui-block-b" id="price-order-timestamp">yyyy-mm-dd hh24:mi:ss</div>
</div>
<div style="width:100%;"> <!-- Here-->
<div class="ui-grid-d" id="data-table-header" >
<div class="ui-block-a">Label A</div>
<div class="ui-block-b">Label B</div>
<div class="ui-block-c">Label C</div>
<div class="ui-block-d">Label D</div>
<div class="ui-block-e">Label E</div>
</div>
<div class="ui-grid-d" id="data-table" >
<div class="ui-block-a">A</div>
<div class="ui-block-b">B</div>
<div class="ui-block-c">C</div>
<div class="ui-block-d">D</div>
<div class="ui-block-e">E</div>
</div>
</div>
</div>
If you want to remove the default padding added to the data-role=content tag, add the following override in your custom.css
#myPageId .ui-content{
padding-left:0;
padding​-right:0;
}​
http://jsfiddle.net/nirmaljpatel/LW5aC/
What would be the best way to do the list as in the image. When I tried doing as in the code text gets squashed into the image.
<div data-role="page" id="wrapper">
<div data-role="content">
<div class="stacked-list">
<img src="images/icon_s1.jpg" alt="Online Subscription" class="ui-li-thumb"/>
<div class="para">
<h3 class="ui-li-heading">Online Subscription</h3>
<p class="ui-li-desc">Online access to complete company profiles plus tools & analysis</p>
</p>
</div>
</div>
</div>
</div> <!-- /page -->
Image of End Result http://move.clanteam.com/images/stacked-list_08.jpg
Try list items with thumbnails?
Docs:
http://jquerymobile.com/demos/1.0a4.1/#docs/lists/lists-thumbnails.html
http://jquerymobile.com/demos/1.0a4.1/docs/lists/lists-readonly.html