Seems like I can't get that image to be aligned with the Text.
I am trying to get that logo aligned with those two sentences.
Also, There was no style setting. Just the default Bootstrap.css file.
<div class="box-padding-md grey-bg">
<div class="jumbotron jumbotron-fluid">
<div class="container">
<img src="../img/bg.png" style="float:left;width:150px;height:150px;margin-left:20px;margin-right:20px;margin-bottom:20px;">
<h3 class="display-5">"Espher Information Assocation"</h3>
<p class="lead">제16세대 프로젝트</p>
</div>
</div>
</div>
You can do that with bootstrap media object, no need to use any css for that.
Check that link you can have a better idea
https://getbootstrap.com/docs/4.0/layout/media-object/
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Bootstrap Media</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
</head>
<body>
<div class="box-padding-md grey-bg">
<div class="jumbotron jumbotron-fluid">
<div class="container">
<div class="media p-3">
<img src="https://i.imgur.com/v9f1nS2.jpg" alt="John Doe" class="mr-3 mt-3 rounded-circle" style="width:60px;">
<div class="media-body">
<h3 class="display-5">"Espher Information Assocation"</h3>
<p class="lead">제16세대 프로젝트</p>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
You can use something like this
<style>
.align{
width:150px;
height:150px;
margin-left:20px;
margin-right:20px;
margin-bottom:20px;
}
<style>
In HTML use this
<a class="align"><img src="../img/bg.png" alt=""></a>
Use the grid system: https://jsfiddle.net/wwWaldi/3xy4woq7/13/
<div class="box-padding-md grey-bg">
<div class="jumbotron jumbotron-fluid">
<div class="row">
<div class="col-1"></div>
<div class="col-4 text-right">
<img src="../img/bg.png" id="myImg" >
</div>
<div class="col-6">
<h3 class="display-5">"Espher Information Assocation"</h3>
<p class="lead">제16세대 프로젝트</p>
</div>
<div class="col-1"></div>
</div>
</div>
</div>
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;
}
I have two bootstrap columns with col-xs-8 and col-xs-4. Both contain image of same height. When I try to reduce the width of browser the second image is becoming shorter compare to first. I want both in same height. Code is shown below. Thanks in advance.
.offer-row .col-xs-8{padding-right: 8px;}
.offer-row .col-xs-4{padding-left:7px;}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="row offer-row">
<div class="col-xs-8">
<img src="http://via.placeholder.com/825x500" class="img img-responsive">
</div>
<div class="col-xs-4">
<img src="http://via.placeholder.com/410x500" class="img img-responsive">
</div>
</div>
The size will reduce, as the screen size reduces, for preventing that you have to write media-query and make your web page responsive.For example in how to write media query, go through given link.
How to write media query for maiking reponsive websites
This will make height fixed.
.img-fix{
max-width:100%;
height:100%;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<body>
<div class="row offer-row">
<div class="col-xs-8">
<img src="http://via.placeholder.com/825x500" class="img img-fix">
</div>
<div class="col-xs-4">
<img src="http://via.placeholder.com/410x500" class="img img-fix">
</div>
</div>
</body>
I solve the problem by adding the following css
.row-eq-height {display: -webkit-box;display: -webkit-flex;display: -ms-flexbox;display: flex;}.offer-row .col-sm-4{padding-left:7px;overflow-y: hidden;}
.offer-row .col-sm-4 img{min-height:100%; }
.offer-row .col-xs-8{padding-right: 8px;}
.offer-row .col-xs-4{padding-left:7px;}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<body>
<div class="row offer-row row-eq-height">
<div class="col-xs-8">
<img src="http://via.placeholder.com/825x500" class="img img-fix">
</div>
<div class="col-xs-4">
<img src="http://via.placeholder.com/410x500" class="img img-fix">
</div>
</div>
</body>
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>
I am trying to make below layout using bootstrap grid. There is a container <div class="row"> and half width two divs in that (<div1> and <div2>). The <div1>'s height would be changeable as content size. And again, the <div2> should have two child divs(<div2-1>, <div2-2>) that half height of <div1> each. How can I make this layout with Bootstrap grid?
I tried like that, but not working. :
<div class="row">
<div class="col-md-6" id="div1">
Some content...
</div>
<div class="col-md-6" id="div2">
<div id="div2-1" style="height:50%;">
</div>
<div id="div2-2" style="height:50%;">
</div>
</div>
</div>
Try this...
div {
border: 1px solid black;
}
#div2-1,
#div2-2 {
height: 50%;
border: 1px solid red !important;
}
#div1,#div2{
height:50px;
}
#div2.col-xs-6
{
padding:0px !important;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row">
<div class="col-xs-6" id="div1">
Some content...
</div>
<div class="col-xs-6" id="div2">
<div id="div2-1">
</div>
<div id="div2-2">
</div>
</div>
</div>
</div>
Using Bootstrap 4
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<div class="row">
<div class="col-md-6 bg-primary" style="min-height: 500px;"></div>
<div class="col-md-6">
<div class="row h-100 flex-column">
<div class="col-md-6 mw-100 bg-danger"></div>
<div class="col-md-6 mw-100 bg-success"></div>
</div>
</div>
</div>
<style>
/* just for displaying correctly without content */
[class*='col'] {
min-height: 200px;
}
</style>
you can use jQuery if you want height of colunmn to be auto and also the inside divs to be half of it.
But you might want to keep the divs overflow-y to auto if one div has content more than it can hold.
$(document).ready(function() {
var totHeight = $("#col").height();
$("#div-1").css("height", totHeight / 2);
$("#div-2").css("height", totHeight / 2);
})
body * {
color: #ccc;
}
#div-1,
#div-2 {
overflow-y: auto;
}
<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>
<body>
<div class="row">
<div class="col-sm-6" id="col">
<div id="div-1" style="background-color:red;">
Content
<br>Content
</div>
<div id="div-2" style="background-color:blue;">
Content
<br>Content
<br>Content
<br>Content
<br>Content
<br>Content
<br>Content
<br>Content
</div>
</div>
<div class="col-sm-6"></div>
</div>
</body>
hello try the below fiddle hope it helps also add the custom style if you want to
<div class="container">
<div class="row">
<div class="col-xs-6 col-sm-6">
<div id="navigation">
<label>side Column</label>
</div>
</div>
<div class="col-xs-6 col-sm-6">
<div id="text1">
<label>First Divider</label>
</div>
<div id="text2">
<label>second Divider</label>
</div>
</div>
</div>
</div>
fiddle demo
//Try this one...
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/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.4.0/js/bootstrap.min.js"></script>
</head>
<body>
<section>
<div class="col-md-12 bg-warning" border="1">
<div class="row" border="1">
<div class="col-md-6" border="1">
<h3>First Column</h3>
</div>
<div class="col-md-6" border="1">
<div class="row bg-danger">
<h3>Second Column First Row<h3>
</div>
<div class="row bg-success">
<h3>Second Column Second Row</h3>
</div>
</div>
</div>
</div>
</section>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<script src="shared/jquery.js" type="text/javascript"></script>
<script src="shared/shiny.js" type="text/javascript"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="shared/shiny.css"/>
</head>
<style>
.cn {
background-color: antiquewhite;
height: 50%;
top: 50%;
position: relative;
}
.video-player-container{
height: 500px;
background-color: gray;
}
.video-container{
min-height: 350px;
}
</style>
<body>
<h1>HTML UI</h1>
<div class="col-lg-12 video-player-container">
<div class="cn"></div>
</div>
</body>
</html>
Suprisingly super easy with Bootstrap 5 flex
Probably i am missing something
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<div class="row">
<div class="col-md-6 bg-primary" style="min-height: 500px;">Some main content</div>
<div class="col-md-6">
<div class="row h-100 flex-column">
<div class="flex-fill bg-danger">Part 1</div>
<div class="flex-fill bg-success">Part 2</div>
</div>
</div>
</div>
I have this page structure
<div class="pictures-page">
<div class="col-md-6"><img src="/assets/components/phpthumbof/cache/27.71c8b506d35dd3f2df6e61c93e7bb2973.jpg"></div>
<div class="col-md-6">TEXT</div>
<div class="col-md-6"><img src="/assets/components/phpthumbof/cache/27.71c8b506d35dd3f2df6e61c93e7bb2973.jpg"></div>
<div class="col-md-6">TEXT</div>
<div class="col-md-6"><img src="/assets/components/phpthumbof/cache/27.71c8b506d35dd3f2df6e61c93e7bb2973.jpg"></div>
<div class="col-md-6">TEXT</div>
<div class="col-md-6"><img src="/assets/components/phpthumbof/cache/27.71c8b506d35dd3f2df6e61c93e7bb2973.jpg"></div>
<div class="col-md-6">TEXT</div>
<div class="col-md-6"><img src="/assets/components/phpthumbof/cache/27.71c8b506d35dd3f2df6e61c93e7bb2973.jpg"></div>
<div class="col-md-6">TEXT</div>
</div>
All elements here are floating left, what i need is that every second picture element float right?
I have tried with div:nth-child(odd) but then all picture are floating right, i need every second picture to float right? Is there solution with simple CSS??
the following does what you are asking for :
.pictures-page *:nth-child(4n+1) img{float:right;}
.pictures-page div:nth-child(2n+1){clear:left;}
but I'm guessing you are really wanting are the images alternating at the left and right edges of the page:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<title></title>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<style>
html, body{
box-sizing:border-box;
}
body * {box-sizing:inherit;}
.pictures-page{width:100%;overflow:hidden;}
.pictures-page img{max-height:150px width:auto;}
.pictures-page .row:nth-child(2n+1) .col-md-6:nth-child(1){float:right;text-align:right;}
</style>
</head>
<body>
<div class="container">
<div class="pictures-page">
<div class="row">
<div class="col-md-6"><img src="/assets/components/phpthumbof/cache/27.71c8b506d35dd3f2df6e61c93e7bb2973.jpg"></div>
<div class="col-md-6">TEXT</div>
</div>
<div class="row">
<div class="col-md-6"><img src="/assets/components/phpthumbof/cache/27.71c8b506d35dd3f2df6e61c93e7bb2973.jpg"></div>
<div class="col-md-6">TEXT</div>
</div>
<div class="row">
<div class="col-md-6"><img src="/assets/components/phpthumbof/cache/27.71c8b506d35dd3f2df6e61c93e7bb2973.jpg"></div>
<div class="col-md-6">TEXT</div>
</div>
<div class="row">
<div class="col-md-6"><img src="/assets/components/phpthumbof/cache/27.71c8b506d35dd3f2df6e61c93e7bb2973.jpg"></div>
<div class="col-md-6">TEXT</div>
</div>
<div class="row">
<div class="col-md-6"><img src="/assets/components/phpthumbof/cache/27.71c8b506d35dd3f2df6e61c93e7bb2973.jpg"></div>
<div class="col-md-6">TEXT</div>
</div>
</div>
</div>
</body>
</html>