I'm trying to find a css solution for my problem. I want to have a header and three columns below where the header has a fixed height and the three columns below fills the rest of the space.
---------------------------------------------
| Header |
|---------------------------------------------|
|Col 1 | Col 2 | Col 3 |
| | | |
| | | |
| | | |
| | | |
| 100% height minus header for all 3 columns |
---------------------------------------------
Here is a js-fiddle of the problem.
I know this has been asked before but I can't get those answers working for me.
I have tried all these similar problems with no luck:
Bootstrap 3 - 100% height of custom div inside column
Setting 100% height to columns in Twitter Bootstrap
and some other ones
Any suggestions?
Bootstrap is fine, to get the similar result like in figure. You can move your headings and news post in new DIV like below
<body>
<div class="container">
<div class="row header">
<div class="col-xs-3" style="height: 100px; background: black;">
</div>
<div class="col-xs-9 header-line" style="height: 100px; background: black;">
<ul>
<li><i class="fa fa-home fa-2x"></i>
</li>
<li><i class="fa fa-envelope fa-2x"></i>
</li>
<li><i class="fa fa-print fa-2x"></i>
</li>
<li><i class="fa fa-facebook-square fa-2x"></i>
</li>
<li><i class="fa fa-search fa-2x"></i>
</li>
</ul>
</div>
</div>
<div class="main">
<div class="col-xs-3 main-menu">
<h4>Subheading</h4>
<p>Donec id elit non mi porta gravida at eget metus. Maecenas faucibus mollis interdum.</p>
<h4>Subheading</h4>
<p>Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Cras mattis consectetur purus sit amet fermentum.</p>
<h4>Subheading</h4>
<p>Maecenas sed diam eget risus varius blandit sit amet non magna.</p>
</div>
<div class="col-xs-6 main-content">
<h1>Willkommen</h1>
<p><strong>Der tcbe.ch - ICT Cluster Bern, Switzerland ist ein Zusammenschluss von Unternehmen, Ausbildungsinstitutionen, Verbänden und Behörden mit dem Ziel, das Thema und den Sektor Telekommunikation- und Informatik (ICT) unseres Wirtschaftsraumes zu stärken.</strong>
</p>
<div>Er koordiniert seine Aktivitäten mit der Clusterpolitik des Kantons Bern und fördert die nachhaltige und solide Entwicklung dieses Schwerpunktes. Mit seiner breiten Abstützung und den zielgerichteten Aktivitäten ist der tcbe.ch Ihr attraktiver und starker Partner in der Telekommunikation und Informatik. </div>
<h1>Veranstaltungen</h1>
<div class="headlines_content">
<p class="date"><b>18.06.2014</b>
</p>
tcbe.ch-Quartalsanlass: tcbe.ch goes Solothurn
</div>
<div class="headlines_content">
<p class="date"><b>25.06.2014</b>
</p>
tcbe.ch-Frühstücks-TRAEFF im Novotel
</div>
<div class="headlines_content">
<p class="date"><b>26.06.2014</b>
</p>
GEVER#ÖV2014 - Konferenz zur elektronischen Geschäftsverwaltung in der Öffentlichen Verwaltung
</div>
<div class="headlines_content">
<p class="date"><b>26.06.2014</b>
</p>
Online-Marketing in der Praxis
</div>
<div class="headlines_content">
<p class="date"><b>27.08.2014</b>
</p>
GetTogether bei der Jost Druck AG, Hünibach
</div>
<div class="headlines_content">
<p class="more">[Weitere Termine]
</p>
</div>
</div>
<div class="col-xs-3 main-list">
<h4>Subheading</h4>
<p>Donec id elit non mi porta gravida at eget metus. Maecenas faucibus mollis interdum.</p>
<h4>Subheading</h4>
<p>Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Cras mattis consectetur purus sit amet fermentum.</p>
<h4>Subheading</h4>
<p>Maecenas sed diam eget risus varius blandit sit amet non magna.</p>
</div>
</div>
</div>
<!-- /container -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
</body>
</html>
Here is a fiddle:
http://jsfiddle.net/sagarawasthi/Kv572/2/
Related
This question already has answers here:
How to vertically align an image inside a div
(37 answers)
How can I vertically align elements in a div?
(28 answers)
Closed 2 years ago.
The Bulma documentation on media objects gives this example:
<article class="media">
<figure class="media-left">
<p class="image is-64x64">
<img src="https://bulma.io/images/placeholders/128x128.png">
</p>
</figure>
<div class="media-content">
<div class="content">
<p>
<strong>John Smith</strong> <small>#johnsmith</small> <small>31m</small>
<br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor vestibulum ut. Maecenas non massa sem. Etiam finibus odio quis feugiat facilisis.
</p>
</div>
<nav class="level is-mobile">
<div class="level-left">
<a class="level-item">
<span class="icon is-small"><i class="fas fa-reply"></i></span>
</a>
<a class="level-item">
<span class="icon is-small"><i class="fas fa-retweet"></i></span>
</a>
<a class="level-item">
<span class="icon is-small"><i class="fas fa-heart"></i></span>
</a>
</div>
</nav>
</div>
<div class="media-right">
<button class="delete"></button>
</div>
</article>
How can I vertically center the image 128x128.png on the left side?
What I checked already:
Discussion in the Bulma issue queue on how to vertically center elements
SO question about centering columns
My box shadow added to this div element is appearing weirdly below the element for some reason. Below I have linked a codepen.io file in which my source is located. I'm having trouble using the UiKit slider while also retaining a box shadow around the elements
<!DOCTYPE html>
<html>
<head>
<title>Title</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- UIkit CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-rc.21/css/uikit.min.css" />
<!-- UIkit JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-rc.21/js/uikit.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-rc.21/js/uikit-icons.min.js"></script>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous">
</head>
<body>
<div class="uk-hidden#s uk-padding uk-padding-remove-vertical uk-slider" data-uk-slider="center: true; autoplay: true;">
<div class="uk-position-relative">
<div class="uk-slider-container">
<ul class="uk-slider-items uk-child-width-1-1 uk-grid" style="transform: translateX(0px);">
<li class="" style="order: 1;">
<div class="uk-card uk-box-shadow-medium uk-box-shadow-hover-large hvr-icon-forward example-card-poppin-orange example-border-1">
<div class="uk-card-media-top"><img class="" data-src="https://44u8552epjw3rivfs1yfikr1-wpengine.netdna-ssl.com/wp-content/uploads/2017/11/young-man-2939344_1280.jpg" alt="" data-uk-img="true" src="http://example-react-frontend-staging.herokuapp.com/3dffbae1ff8fe1724b31625be32c5810.jpg"
width="uk-width-1-1" height=""></div>
<div class="uk-card-body undefined">
<h3 class="uk-card-title">School</h3>
<p>Fusce placerat sem rutrum nisl gravida feugiat. Sed lacinia efficitur leo sed vestibulum. Maecenas scelerisque, nulla eget bibendum fermentum, velit ante consectetur ante, tempus egestas lacus urna quis mauris.</p>
</div>
<div class="uk-card-footer uk-text-center example-text-white example-background-accent-blue uk-text-uppercase example-letter-spacing-5-10">
<div class="uk-flex uk-flex-middle uk-flex-center">Read More <span class="fas fa-chevron-right hvr-icon uk-margin-small-left"></span></div>
</div>
</div>
</li>
<li class="" style="order: 1;">
<div class="uk-card uk-box-shadow-medium uk-box-shadow-hover-large hvr-icon-forward example-card-poppin-orange example-border-1">
<div class="uk-card-media-top"><img class="" data-src="https://edit.co.uk/uploads/2016/12/Image-2-Alternatives-to-stock-photography-Thinkstock.jpg" alt="" data-uk-img="true" src="http://example-react-frontend-staging.herokuapp.com/8d33aa933fda49caa52009cb16c128cd.jpg"
width="uk-width-1-1" height=""></div>
<div class="uk-card-body undefined">
<h3 class="uk-card-title">Hospital</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
<div class="uk-card-footer uk-text-center example-text-white example-background-accent-blue uk-text-uppercase example-letter-spacing-5-10">
<div class="uk-flex uk-flex-middle uk-flex-center">Read More <span class="fas fa-chevron-right hvr-icon uk-margin-small-left"></span></div>
</div>
</div>
</li>
<li class="uk-active">
<div class="uk-card uk-box-shadow-medium uk-box-shadow-hover-large hvr-icon-forward example-card-poppin-orange example-border-1">
<div class="uk-card-media-top"><img class="" data-src="http://www.apimages.com/Images/Ap_Creative_Stock_Header.jpg" alt="" data-uk-img="true" src="http://example-react-frontend-staging.herokuapp.com/bce5341a66f87afdb5120b52b0e6c0ab.jpeg" width="uk-width-1-1" height=""></div>
<div
class="uk-card-body undefined">
<h3 class="uk-card-title">Community</h3>
<p>Aliquam facilisis lectus nec ipsum finibus luctus. Praesent in facilisis felis. Ut varius malesuada accumsan. Nullam consectetur rhoncus metus eu rhoncus. Etiam lacinia pharetra urna, non volutpat ex suscipit
in. Nunc eu porta ex. </p>
</div>
<div class="uk-card-footer uk-text-center example-text-white example-background-accent-blue uk-text-uppercase example-letter-spacing-5-10">
<div class="uk-flex uk-flex-middle uk-flex-center">Read More <span class="fas fa-chevron-right hvr-icon uk-margin-small-left"></span></div>
</div>
</div>
</li>
</ul>
</div><span class="uk-position-center-left-out example-text-black uk-icon" data-uk-slider-item="previous" data-uk-icon="icon: chevron-left; ratio: 2;"><svg width="40" height="40" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"> <polyline fill="none" stroke="#000" stroke-width="1.03" points="13 16 7 10 13 4"></polyline></svg></span>
<span
class="uk-position-center-right-out example-text-black uk-icon" data-uk-slider-item="next" data-uk-icon="icon: chevron-right; ratio: 2;"><svg width="40" height="40" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"> <polyline fill="none" stroke="#000" stroke-width="1.03" points="7 4 13 10 7 16"></polyline></svg></span>
</div>
</div>
</body>
</html>
https://codepen.io/kadenlnelson/pen/GwZENQ
I think I got it, you need to add the box shadow classes to the button div, not the father div, for example
<!-- Delete .uk-box-shadow-medium .uk-box-shadow-hover-large from here -->
<div class="uk-card uk-box-shadow-medium uk-box-shadow-hover-large hvr-icon-forward example-card-poppin-orange example-border-1">
and paste it here, in the button div
<div class="uk-flex uk-flex-middle uk-flex-center uk-box-shadow-medium uk-box-shadow-hover-large ">Read More <span class="fas fa-chevron-right hvr-icon uk-margin-small-left"></span></div>
that should do the trick, let me know if that help you!
this is my code:
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="row">
<div style={{border: 'solid black 0.5px'}} class="col-md-3">
<h2>Heading 1</h2>
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus,</p>
<p><a className="btn btn-secondary" href="#" role="button">View details »</a></p>
</div>
<div style={{border: 'solid black 0.5px'}} class="col-md-3 offset-md-4">
<h2>Heading 2</h2>
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, </p>
<p><a className="btn btn-secondary" href="#" role="button">View details »</a></p>
</div>
<div style={{border: 'solid black 0.5px'}} class="col-md-3 offset-md-1">
<h2>Heading 2</h2>
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, </p>
<p><a className="btn btn-secondary" href="#" role="button">View details »</a></p>
</div>
</div>
I have used offset on heading 2, the one in the center but it doesn't skip some space unlike in the docs? what I wanted to do is add some margin on them but when I try to, it pushes the last one on the bottom or it doesn't occupy all the space, if I don't use 4? how do I add margin here?
It's col-md-offset-4 and not offset-md-4
read better the docs again https://getbootstrap.com/docs/3.3/css/#grid-offsetting
So my confusion is that the Scrollspy is targeting the outer div instead of the actual element it is modifying. I'm trying to understand why that is the case?
The code in question is line 12 and 89-90 here:
http://4f7ba83874222b00ae84-8c55136fa379d9b2d1adde446f45d068.r28.cf2.rackcdn.com/scrollspy.html
Tried my best to include relevant part here:
<body data-spy="scroll" data-target="#myScrollspy">
<div class="container">
<div class="row">
<div class="col-xs-10 col-sm-10 col-md-10 col-lg-10">
<h1 id="p_1">Part 1</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut et felis consequat velit sollicitudin fermentum....
</p>
<h1 id="p_2">Part 2</h1>
<p>
Maecenas massa eros, aliquam id nisi ut, venenatis eleifend diam....
</p>
<h1 id="p_3">Part 3</h1>
<p>
Quisque id luctus tortor, a scelerisque nulla....
</p>
<h1 id="p_4">Part 4</h1>
<p>
Nam sed volutpat sapien....
</p>
</div>
<div class="col-xs-2 col-sm-2 col-md-2 col-lg-2" id="myScrollspy">
<ul class="nav nav-pills nav-stacked affix">
<li class="active">Part 1</li>
<li>Part 2</li>
<li>Part 3</li>
<li>Part 4</li>
</ul>
</div>
</div>
</div>
</body>
It actually target parent element of any Bootstrap navigation component.
It'd work too if u put the data-target to the ul nav class..
I am using a CSS Slider that utilises two sub tabs in each slide.
The slider's sub tabs use Bootstrap's 'Active' Class on the li that then changes the inactive li's class to active when the inactive tab's navigation arrow (< or >) is clicked.
The sub tabs work correctly on the first slide but do not work on the second slide, or any slide thereafter.
My JS Fiddle
JS Fiddle
The Problematic Code
<div class="profile-thumbnail">
<div class="profile-image">
<div class="overlay-profile"></div>
</div>
<!-- Sub Tabs -->
<ul class="nav nav-tabs" id="myTab">
<li class="active"><a class="hvr-border-fade" href="#tab1" data-toggle="tab"><</a></li>
<li><a class="hvr-border-fade" href="#tab2" data-toggle="tab">></a></li>
</ul>
</div>
<!-- END Player Profile Thumbnail-->
Refer to the below link (the MEET THE TEAM section) for a more accurate idea as the pasted code doesn't seem work as well.
Your tab's href's location need to be unique. Right now you are repeating the same href="tab1", href="tab2" for each slider. You can change it to:
href="tab1-a", href="tab2-a" for gallery 1.
href="tab1-b", href="tab2-b" for gallery 2.
Also, make sure you follow the same process for the id's. I cannot paste full code here due to character limits.
See JsFiddle
<!------------ Sean Peens ------------>
<article>
<!-- Player Profile Thumbnail-->
<div class="profile-thumbnail">
<div class="profile-image">
<div class="overlay-profile"></div>
</div>
<!-- Sub Tabs -->
<ul class="nav nav-tabs" id="myTab">
<li class="active">
<a class="hvr-border-fade" href="#tab1-a" data-toggle="tab"><</a>
</li>
<li><a class="hvr-border-fade" href="#tab2-a" data-toggle="tab">></a>
</li>
</ul>
</div>
<!-- END Player Profile Thumbnail-->
<!-- Start Player's Profile -->
<div class="player-profile">
<!-- First Tab -->
<div class="tab-pane fade in active" id="tab1-a">
<div class="player-profile-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas neque diam, luctus at laoreet in, auctor ut tellus. Etiam enim lacus, ornare et tempor, rhoncus rhoncus sem. Aliquam volutpat arcu et nibh mollis eleifend pharetra lorem scelerisque.
Donec vel enim purus, id viverra neque. Cras in velit ante, eget pellentesque sem. Duis tincidunt erat quam. Etiam placerat sapien elit.
</div>
</div>
<!-- Second Tab -->
<div class="tab-pane fade in" id="tab2-a">
<div class="gun-profile">
<img src="http://roxyprinsloo.co.za/tst/_include/img/profile-guns/richard-gun.png">
</div>
<div class="gun-profile-text"><span class="gun-title">KWA SR5</span>
<br>NC STAR Red Dot
<br>Underslung Grenade Launcher
<br>Extended Barrel
<br>Mock Suppressor
</div>
</div>
</div>
<!-- END Start Player's Profile -->
<!-- Start Player's Title -->
<div class="player-details">
<h3>Sean Peens</h3>
<ul>
<li><span class="aka">AKA 'SNOWMAN'</span>
<br>Team Captain
</li>
</ul>
</div>
<!-- END Start Player's Title -->
</article>
<!------------ END Sean Peens ------------>
<!------------ Richard Bradley ------------>
<article>
<!-- Player Profile Thumbnail-->
<div class="profile-thumbnail">
<div class="profile-image">
<div class="overlay-profile"></div>
<!-- Thumb Image -->
<img src="http://roxyprinsloo.co.za/tst/_include/img/work/thumbs/image-01.jpg">
</div>
<!-- Sub Tabs -->
<ul class="nav nav-tabs" id="myTab">
<li class="active">
<a class="hvr-border-fade" href="#tab1-b" data-toggle="tab"><</a>
</li>
<li><a class="hvr-border-fade" href="#tab2-b" data-toggle="tab">></a>
</li>
</ul>
</div>
<!-- END Player Profile Thumbnail-->
<!-- Start Player's Profile -->
<div class="player-profile">
<!-- First Tab -->
<div class="tab-pane fade in active" id="tab1-b">
<div class="player-profile-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas neque diam, luctus at laoreet in, auctor ut tellus. Etiam enim lacus, ornare et tempor, rhoncus rhoncus sem. Aliquam volutpat arcu et nibh mollis eleifend pharetra lorem scelerisque.
Donec vel enim purus, id viverra neque. Cras in velit ante, eget pellentesque sem. Duis tincidunt erat quam. Etiam placerat sapien elit.
</div>
</div>
<!-- Second Tab -->
<div class="tab-pane fade in" id="tab2-b">
<div class="gun-profile">
<img src="http://roxyprinsloo.co.za/tst/_include/img/profile-guns/richard-gun.png">
</div>
<div class="gun-profile-text"><span class="gun-title">KWA SR10</span>
<br>NC STAR Red Dot
<br>PEQ Box
<br>Magpul Furniture
<br>Noveske KX3 Flash Enhancer
</div>
</div>
</div>
<!-- END Start Player's Profile -->
<!-- Start Player's Title -->
<div class="player-details">
<h3>Richard Bradley</h3>
<ul>
<li><span class="aka">AKA 'DEADLEE'</span>
<br>Team Co-Captain
</li>
</ul>
</div>
<!-- END Start Player's Title -->
</article>