I have the following code using bootstrap 3:
<div class="row">
<div class="col-lg-12">
<div class="row">
<div id="test1" style="text-align:center; border-style:double; font-size:14px" class="col-lg-6">
JVM Infotech is a multifunctional company that can serve many of your educational needs.
</div>
<div id="test2" style=" border-style:double" class="col-lg-6" >
<img style="margin:auto" src="cinq1.jpg" class="img-responsive">
</div>
</div>
</div>
</div>
The size of div test1 is based on the amount of text and fontsize of test1. So the bottom border does not automatically align with div test2. I am able to fix this by changing padding values of test1. But that means each change of text to test1 will require change of padding values as well which is not good stable coding. I thought the grid system of Bootstrap 3 would adjust for this so is there something I'm missing?
There is no default way in Bootstrap 3 (There will be in 4) to make to columns of dynamic data equal height... but you could use jQuery. Here I made your two columns "sm" so they show up side by side here in the snippet, and changed the broken image to some short text:
$(function() {
var leftHeight = $('#test1').height();
var rightHeight = $('#test2').height();
if (leftHeight > rightHeight) {
$('#test2').height(leftHeight);
} else {
$('#test1').height(rightHeight);
}
});
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
<div class="col-lg-12">
<div class="row">
<div id="test1" style="text-align:center; border-style:double; font-size:14px" class="col-sm-6">
JVM Infotech is a multifunctional company that can serve many of your educational needs.
</div>
<div id="test2" style=" border-style:double" class="col-sm-6">
Less text
</div>
</div>
</div>
</div>
Without javascript you can achieve it--
It's a bootstrap experiment--the official experiment
you just need to add .row-eq-height with row class.
and add the following css.
.row-eq-height {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
}
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="row">
<div class="col-lg-12">
<div class="row row-eq-height" >
<div id="test1" style="text-align:center; border-style:double; font-size:14px;" class="col-lg-6 ">
JVM Infotech is a multifunctional company that can serve many of your educational needs.
</div>
<div id="test2" style=" border-style:double; " class="col-lg-6 " >
<img style="margin:auto" src="cinq1.jpg" class="img-responsive">
</div>
</div>
</div>
</div>
</body>
</html>
Note: it uses flex.
Related
I'm working on a page (Angular) that dynamically displays bootstrap cards that looks as follows:
<div class="row">
<div class="card border-primary p-0 mb-2 col-md-4 col-sm-6 colxs-12" *ngFor="let m of myVals">
<h4 class="card-header text-center">{{m.Title}}</h4>
<div class="card-body">
<h5>{{m.Year}}</h5>
<img [src]="m.Poster" [alt]="m.Title" class="card-img-top">
</div>
</div>
</div>
The issue I'm facing is with the element <h4 class="card-header text-center">{{m.Title}}</h4>
The challenge is that sometimes the title gets displayed on 2 lines, other times on 1 (but never more than 2) and, so, the cards aren't looking uniform.
What I'm wondering is if there's a Bootstrap / CSS way to always make the card-header display as 2 lines high regardless of the text within it. I've tried setting a CSS style of line-height: 2, but it's not affecting it at all. Any correct / better way to accomplish this?
Thanks!
You can add the custom CSS to do it. check working fiddle below -
.card-header-custom {
min-height:80px;
display:flex;
justify-content:center;
align-items:center;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Card Header and Footer</h2>
<div class="row">
<div class="col-sm-6">
<div class="card">
<div class="card-header card-header-custom">Header big content Header big content </div>
<div class="card-body">Content</div>
<div class="card-footer">Footer</div>
</div>
</div>
<div class="col-sm-6">
<div class="card">
<div class="card-header card-header-custom">Header</div>
<div class="card-body">Content</div>
<div class="card-footer">Footer</div>
</div>
</div>
</div>
</div>
</body>
</html>
HTML:
<div>
<h4>
<span>One line heading</span>
</h4>
<h4>
<span>Assume this heading has two lines</span>
</h4>
</div>
CSS:
h4 {
height: 2.5em;
}
h4 span {
line-height: 1.25em;
}
in my case i have to use 5 col-md for one row and another col-md needs to go next row without open row.
i tried with nth:child and its not help for me please help me to fix this issue
Please click full page on snippet to better view
.col-md:nth-child(5){
display: block;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<title>Document</title>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md">hi my name is</div>
<div class="col-md">hi my name is</div>
<div class="col-md">hi my name is</div>
<div class="col-md">hi my name is</div>
<div class="col-md">hi my name is</div>
<div class="col-md">this is next row</div>
<div class="col-md">this is next row</div>
<div class="col-md">this is next row</div>
</div>
</div>
</body>
</html>
You can simply do it by set flex-basis to 20%.
.col-md {
flex: 0 0 20%;
}
The issue is that you are using seven containers. You need six. The next thing, you have to attach the correct class for the last container (100%). Which is col-md-12. You won't need any additional CSS. Everything you need is supported by Bootstrap. Please revisit the Bootstrap documentation on how layouting works!
As an additional information col-md occupies as much space in width as is available (evenly distributed between all elements/containers in a row).
The below example demonstrates how you can do that.
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div class="container">
<div class="row">
<div style="background: red" class="col-md">
hi my name is
</div>
<div style="background: red" class="col-md">
hi my name is
</div>
<div style="background: red" class="col-md">
hi my name is
</div>
<div style="background: red" class="col-md">
hi my name is
</div>
<div style="background: red" class="col-md">
hi my name is
</div>
<div style="background: green" class="col-md-12">
this is next row
</div>
</div>
</div>
</body>
</html>
Update: You can also do it like that without col-md-12.
.col-md:nth-child(5){
flex: 0 0 100%;
}
To stretch the col-md at position 5 to 100%.
You need to allow the wrap then control the flex-basis
.col-md:nth-child(n + 6) {
flex-basis:100%;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row flex-wrap">
<div class="col-md">
hi my name is
</div>
<div class="col-md">
hi my name is
</div>
<div class="col-md">
hi my name is
</div>
<div class="col-md">
hi my name is
</div>
<div class="col-md">
hi my name is
</div>
<div class="col-md">
this is next row
</div>
<div class="col-md">
this is next row
</div>
<div class="col-md">
this is next row
</div>
</div>
</div>
On mobile device the the sidebar is shown above my products. I want that it should go down the my products.
The side bar is on the left and content on the right. Also is there a better way to create a sidebar than what I did here.
https://jsfiddle.net/3pLnc4y1/
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<title>Hello, world!</title>
</head>
<body>
<div class="row">
<div class="col-md-2">
Home/Categories
</div>
<div class="col-md-10">
<h2>My shop</h2>
<div class="row">
<div class="col-md-3">
sdsd
</div>
<div class="col-md-3">
sdsd
</div>
<div class="col-sm-3">
sdsd
</div>
<div class="col-sm-3">
sdsd
</div>
</div>
</div>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
The easiest way to do this would be with Flexbox. I created a sample Codepen for you here: https://codepen.io/CWSites/pen/pqGowo
The code itself can be however you like, for simplicity I just made a few divs.
<div class="container">
<div class="sidebar">
Sidebar Here
</div>
<div class="content">
Hello World
</div>
</div>
The CSS is where the magic happens. You will need a containing div with some flex styles applied in order to use flexbox. Your sidebar and your content divs will also need some flexbox code of their own. In my sample I have the media query set for screens 600px and smaller but you can adjust that to whatever you like.
Starting off you'll want your sidebar order to be 1 so it displays first going left to right, however on a smaller screen I flip the flexbox order so sidebar is now 2 and content is 1.
.container {
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
.sidebar {
width: 30%;
order: 1;
}
.content {
width: 70%;
order: 2;
}
#media only screen and (max-width: 600px) {
.container {
flex-direction: column;
}
.sidebar {
order: 2;
}
.content {
order: 1;
}
}
When working with Flexbox, I find this guide extremely helpful.
Use have to use use the order class utility :
Doc : https://getbootstrap.com/docs/4.2/layout/grid/#reordering
JsFiddle : https://jsfiddle.net/b9ejhstw/1/
HTML:
<div class="row">
<div class="col-xs-12 col-md-10 order-md-last"> <!-- <--- HERE --->
<h2>My shop</h2>
<div class="row">
<div class="col-md-3">
sdsd
</div>
<div class="col-md-3">
sdsd
</div>
<div class="col-sm-3">
sdsd
</div>
<div class="col-sm-3">
sdsd
</div>
</div>
</div>
<div class="col-xs-12 col-md-2">
Home/Categories
</div>
</div>
I am new to the bootstrap. I have following bootstrap code:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div style="padding-top: 25px; ">
<div class="col-md-10 col-md-offset-1" style="background-color: #F0F8FF;">
<div class="col-md-3">
<img src="{{URL::asset('/images/car.png')}}" alt="profile Pic" height="50" width="50">Car
</div>
</div>
</div>
Now, I need the first image and then under the image 'car' word in the center to the div and under word some discription about the car. like image of this. how can I do this?
See image here:
Based on the code you've provided I assume you are using Bootstrap 3.x and so the below code reflects that. The two main classes you might rely on here (because there are multiple methods to achieve your desired outcome) would be .text-center and .center-block. The first simply applies text-align: center to the element while the latter alters the display and left/right margin to force centering.
.your-custom-background {
background: #F0F8FF;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="container-fluid">
<div class="row">
<div class="col-md-10 col-md-offset-1">
<div class="your-custom-background text-center">
<img src="https://placehold.it/50/50/" alt="profile Pic" height="50" width="50" class="center-block">
<p>Car</p>
<p>Some additional description goes here.</p>
</div>
</div>
</div>
</div>
A couple of additional notes as you mention you are new to Bootstrap:
(1) Because Bootstrap's Grid applies padding to the column wrapper, you should avoid applying backgrounds directly to this element unless your desire is to re-color both the content area AND the gutter.
(2) It's not clear why you're using .col-md-3 inside your .col-md-10 but columns must always be wrapped within a .row, even when nested.
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet" />
<div class="row">
<div class="col-md-3 text-center">
<img class="d-block m-auto" src="https://placehold.it/50x50"/>
<div>Car</div>
<div>62.3333</div>
<div>text text text texttext texttext texttext text</div>
</div>
<div class="col-md-3">
</div>
<div class="col-md-3">
</div>
<div class="col-md-3">
</div>
</div>
I'm working with Angular (v4.3.1) and Bootstrap (v4.0.0-alpha.6). A template contains two subcomponents like so:
<div class="card-deck">
<comp1></comp1>
<comp2></comp2>
</div>
Both subcomponent's templates have as root element's class the .card Bootstrap class.
<div class="card">
...
</div>
This, once compiled results in the following HTML
<div class="card-deck">
<comp1 _nghost-c3="">
<div _ngcontent-c3="" class="card">
...
</div>
</comp1>
<comp2 _nghost-c4="">
<div _ngcontent-c4="" class="card">
...
</div>
</comp2>
</div>
The problem is that the .card-deck styling doesn't get applyed properly if there is an element wrapping the .card elements.
A Bootstrap only example, the problem is strictly related to Bootstrap css and not Angular obviously.
<!DOCTYPE html>
<html>
<head>
<link data-require="bootstrap#4.0.5" data-semver="4.0.5" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" />
<script data-require="bootstrap#4.0.5" data-semver="4.0.5" src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body>
<!-- Displayed properly -->
<div id="deck-without-wrapper" class="card-deck">
<div class="card">
<div class="card-block">
<p>Card1</p>
</div>
</div>
<div class="card">
<div class="card-block">
<p>Card2</p>
</div>
</div>
</div>
<br>
<!-- NOT displayed properly -->
<div id="deck-with-wrapper" class="card-deck">
<div id="wrapper1">
<div class="card">
<div class="card-block">
<p>Card1</p>
</div>
</div>
</div>
<div id="wrapper2">
<div class="card">
<div class="card-block">
<p>Card2</p>
</div>
</div>
</div>
</div>
</body>
</html>
Anyone knows a way to get both the components structure and the styling working?
The wrappers are causing trouble because a div doesn't have any flex css properties, While the .card classes are using flex:1 0 0;
Option 1 (preferred): Apply the .card class to the angular host element wrapper, instead of the first child element.
I've not used angular, going by these docs you could set a class on the host element. Using #Component.host.
Or define some rules using angulars custom renderer.
I can't advice you on the best approach, I lack the knowledge on angular.
In the end you would want to end up with <comp1 _nghost-c3="" class="card">
Option 2 (not very sane): Pretend that the wrappers are cards,
and style them like a card would be styled.
I would advice against this.
It can cause troubles in the long run. IE newer bootstrap versions could change the css styling, and you might forget to update these custom rules.
.card-deck > div {
display: flex;
flex: 1 0 0;
flex-direction:column;
}
.card-deck > div:not(:last-child){
margin-right:15px;
}
.card-deck > div:not(:first-child)
{
margin-left:15px;
}
<!DOCTYPE html>
<html>
<head>
<link data-require="bootstrap#4.0.5" data-semver="4.0.5" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" />
<script data-require="bootstrap#4.0.5" data-semver="4.0.5" src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body>
<!-- Displayed properly -->
<div id="deck-without-wrapper" class="card-deck">
<div class="card">
<div class="card-block">
<p>Card1</p>
</div>
</div>
<div class="card">
<div class="card-block">
<p>Card2</p>
</div>
</div>
</div>
<br>
<!-- NOT displayed properly -->
<div id="deck-with-wrapper" class="card-deck">
<div id="wrapper1">
<div class="card">
<div class="card-block">
<p>Card1</p>
</div>
</div>
</div>
<div id="wrapper2">
<div class="card">
<div class="card-block">
<p>Card2</p>
</div>
</div>
</div>
</div>
</body>
</html>