I have a video that is in a row. I want it to stay to the right of the page as a 2nd column of the row. But it keeps appearing under the first column as if it is a second row.
here's my code:
<section class="container-fluid aboutus">
<div classs="row">
<div class="col-sm-5">
<h1>Our Mission</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.Lorem ipsum dolor sit amet, consectetuer adipiscing elit.Lorem ipsum dolor sit amet, consectetuer adipiscing elit.Lorem ipsum dolor sit amet, consectetuer adipiscing elit. </p>
<div class="button">
<button type="button" class="btn btn-outline-primary btn-lg">Read more</button>
</div>
</div>
<div class="col-sm-7 video">
<div>
<video autoplay muted loop width="550">
<source src="video/Markcard.m4v" type="video/mp4" />
</video>
</div>
</div>
</div>
</section>
First issue: change <div classs="row"> to <div class="row">
Second issue: col-sm-* will only work with small devices you are going to want to handle other devices as well. In the example below I simply used col-*
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<section class="container-fluid aboutus">
<div class="row">
<div class="col-5">
<h1>Our Mission</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.Lorem ipsum dolor sit amet, consectetuer adipiscing elit.Lorem ipsum dolor sit amet, consectetuer adipiscing elit.Lorem ipsum dolor sit amet, consectetuer adipiscing elit. </p>
<div class="button">
<button type="button" class="btn btn-outline-primary btn-lg">Read more</button>
</div>
</div>
<div class="col-7 video">
<div>
<iframe width="560" height="315" src="https://www.youtube.com/embed/xcJtL7QggTI" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
</video>
</div>
</div>
</div>
</section>
The easiest way to accomplish that would be with the CSS Flex-Box layout. Here is a link to a tutorial in case you don't know where to start.
https://www.w3schools.com/css/css3_flexbox.asp
Related
I've an HTML like below
<div id="PanelLevel" class="panel-body">
<div class="container">
<div class="row">
<div class="col-md-3">
Very Important
<div id="maindiv1" class="ui-widget-vi">
<div class='column'>
<div class='portlet' >
<div class='portlet-header'>Energy_Efficiency</div>
<div class='portlet-content'>Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>
</div>
<div class='portlet' >
<div class='portlet-header'>Maintenance_Ease</div>
<div class='portlet-content'>Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>
</div>
<div class='portlet' >
<div class='portlet-header'>Cold_Weather_Operation</div>
<div class='portlet-content'>Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>
</div>
</div>
</div>
</div>
<div class="col-md-3">
Important
<div id="maindiv2" class="ui-widget-i">
<div class='column'>
<div class='portlet'>
<div class='portlet-header'>First_Cost</div>
<div class='portlet-content'>Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>
</div>
<div class='portlet'>
<div class='portlet-header'>Operating_Cost</div>
<div class='portlet-content'>Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>
</div>
<div class='portlet'>
<div class='portlet-header'>Footprint</div>
<div class='portlet-content'>Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>
</div>
<div class='portlet'>
<div class='portlet-header'>Height</div>
<div class='portlet-content'>Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>
</div>
<div class='portlet'>
<div class='portlet-header'>Sound</div>
<div class='portlet-content'>Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>
</div>
<div class='portlet'>
<div class='portlet-header'>Corrosion_Resistance</div>
<div class='portlet-content'>Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>
</div>
</div>
</div>
</div>
<div class="col-md-3">
Somewhat Important
<div id="maindiv3" class="ui-widget-si">
<div class='column'>
<div class='portlet'>
<div class='portlet-header'>Weight</div>
<div class='portlet-content'>Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>
</div>
<div class='portlet'>
<div class='portlet-header'>Installation_Ease</div>
<div class='portlet-content'>Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>
</div>
<div class='portlet'>
<div class='portlet-header'>Redundancy</div>
<div class='portlet-content'>Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>
</div>
</div>
</div>
</div>
<div class="col-md-3">
Not Important
<div id="maindiv4" class="ui-widget-ni">
<div class='column'>
<div class='portlet'>
<div class='portlet-header'>Indor_Ducted_Installation</div>
<div class='portlet-content'>Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>
</div>
<div class='portlet'>
<div class='portlet-header'>Water_Usage</div>
<div class='portlet-content'>Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
My desired output is that I need to extract all 'Portlet-header' class contents only from 4 divs like "maindiv1", "maindiv2", "maindiv3", "maindiv4" as below
"maindiv1" - Energy_Efficiency,Maintenance_Ease, Cold_Weather_Operation
"maindiv2" - First_Cost, Operating_cost, Footprint, Height, Corrosion_Resistance
"maindiv3" - Weight, Installation-Ease, Redundancy
"maindiv4" - Indor_Ducted_Installation, Water_Usage
I've tried the below code but not getting the desired result:
$(document).ready(function() {
$('div').each(function () {
var i = $(this).attr('id');
alert(i);
});
var text = $( '.portlet-header' ).map(function() {
return $( this ).text();
})
.get()
.join( ',' );
});
You can use map() to build an array of the output you require:
let output = $('.col-md-3 > div').map((i, c) => ({
[c.id]: $(c).find('.portlet-header').map((i, p) => $(p).text()).get()
})).get();
console.log(output);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="PanelLevel" class="panel-body">
<div class="container">
<div class="row">
<div class="col-md-3">
Very Important
<div id="maindiv1" class="ui-widget-vi">
<div class='column'>
<div class='portlet'>
<div class='portlet-header'>Energy_Efficiency</div>
<div class='portlet-content'>Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>
</div>
<div class='portlet'>
<div class='portlet-header'>Maintenance_Ease</div>
<div class='portlet-content'>Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>
</div>
<div class='portlet'>
<div class='portlet-header'>Cold_Weather_Operation</div>
<div class='portlet-content'>Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>
</div>
</div>
</div>
</div>
<div class="col-md-3">
Important
<div id="maindiv2" class="ui-widget-i">
<div class='column'>
<div class='portlet'>
<div class='portlet-header'>First_Cost</div>
<div class='portlet-content'>Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>
</div>
<div class='portlet'>
<div class='portlet-header'>Operating_Cost</div>
<div class='portlet-content'>Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>
</div>
<div class='portlet'>
<div class='portlet-header'>Footprint</div>
<div class='portlet-content'>Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>
</div>
<div class='portlet'>
<div class='portlet-header'>Height</div>
<div class='portlet-content'>Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>
</div>
<div class='portlet'>
<div class='portlet-header'>Sound</div>
<div class='portlet-content'>Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>
</div>
<div class='portlet'>
<div class='portlet-header'>Corrosion_Resistance</div>
<div class='portlet-content'>Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>
</div>
</div>
</div>
</div>
<div class="col-md-3">
Somewhat Important
<div id="maindiv3" class="ui-widget-si">
<div class='column'>
<div class='portlet'>
<div class='portlet-header'>Weight</div>
<div class='portlet-content'>Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>
</div>
<div class='portlet'>
<div class='portlet-header'>Installation_Ease</div>
<div class='portlet-content'>Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>
</div>
<div class='portlet'>
<div class='portlet-header'>Redundancy</div>
<div class='portlet-content'>Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>
</div>
</div>
</div>
</div>
<div class="col-md-3">
Not Important
<div id="maindiv4" class="ui-widget-ni">
<div class='column'>
<div class='portlet'>
<div class='portlet-header'>Indor_Ducted_Installation</div>
<div class='portlet-content'>Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>
</div>
<div class='portlet'>
<div class='portlet-header'>Water_Usage</div>
<div class='portlet-content'>Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Note that the .col-md-3 > div isn't a very robust selector, but it will work in the example HTML. I'd suggest adding another specific common class to all those #maindivN elements to make the selection of them more accurate and reliable.
The following may be easier to convert to json format.
$(document).ready(function() {
var result = {};
$('[id^=maindiv]').each(function () {
var key = $(this).attr('id');
result[key] = $(this).find('.portlet-header').map(function() {
return $( this ).text();
})
.get()
.join( ',' );
});
console.log(result);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="PanelLevel" class="panel-body">
<div class="container">
<div class="row">
<div class="col-md-3">
Very Important
<div id="maindiv1" class="ui-widget-vi">
<div class='column'>
<div class='portlet' >
<div class='portlet-header'>Energy_Efficiency</div>
<div class='portlet-content'>Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>
</div>
<div class='portlet' >
<div class='portlet-header'>Maintenance_Ease</div>
<div class='portlet-content'>Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>
</div>
<div class='portlet' >
<div class='portlet-header'>Cold_Weather_Operation</div>
<div class='portlet-content'>Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>
</div>
</div>
</div>
</div>
<div class="col-md-3">
Important
<div id="maindiv2" class="ui-widget-i">
<div class='column'>
<div class='portlet'>
<div class='portlet-header'>First_Cost</div>
<div class='portlet-content'>Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>
</div>
<div class='portlet'>
<div class='portlet-header'>Operating_Cost</div>
<div class='portlet-content'>Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>
</div>
<div class='portlet'>
<div class='portlet-header'>Footprint</div>
<div class='portlet-content'>Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>
</div>
<div class='portlet'>
<div class='portlet-header'>Height</div>
<div class='portlet-content'>Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>
</div>
<div class='portlet'>
<div class='portlet-header'>Sound</div>
<div class='portlet-content'>Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>
</div>
<div class='portlet'>
<div class='portlet-header'>Corrosion_Resistance</div>
<div class='portlet-content'>Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>
</div>
</div>
</div>
</div>
<div class="col-md-3">
Somewhat Important
<div id="maindiv3" class="ui-widget-si">
<div class='column'>
<div class='portlet'>
<div class='portlet-header'>Weight</div>
<div class='portlet-content'>Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>
</div>
<div class='portlet'>
<div class='portlet-header'>Installation_Ease</div>
<div class='portlet-content'>Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>
</div>
<div class='portlet'>
<div class='portlet-header'>Redundancy</div>
<div class='portlet-content'>Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>
</div>
</div>
</div>
</div>
<div class="col-md-3">
Not Important
<div id="maindiv4" class="ui-widget-ni">
<div class='column'>
<div class='portlet'>
<div class='portlet-header'>Indor_Ducted_Installation</div>
<div class='portlet-content'>Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>
</div>
<div class='portlet'>
<div class='portlet-header'>Water_Usage</div>
<div class='portlet-content'>Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Hello friends
I will try to adjust bootstrap grid like this but not successful is there any option to do like in the image this.
Below is my code:
<div class="row">
<div class="col-md-4">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod</p>
</div>
<div class="col-md-4">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod</p>
</div>
<div class="col-md-4">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod</p>
</div>
<div class="col-md-4">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod</p>
</div>
<div class="col-md-4" style="height: 400px;">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod</p>
</div>
<div class="col-md-4">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod</p>
</div>
<div class="col-md-4">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod</p>
</div>
<div class="col-md-4">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod</p>
</div>
</div>
Use two md4 in single parent div of md4 and then use md12 md12 in that. I have provide you snippet you can check that. Run full page snippet beacuse you have just used md-4 so it will work in desktop screen like this. or use xs-4 if you want same structure in mobile screen too
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style type="text/css">
div p{
background: black;
}
</style>
<div class="row">
<div class="col-md-4">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod</p>
</div>
<div class="col-md-4">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod</p>
</div>
<div class="col-md-4" style="">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod</p>
</div>
<div class="col-md-4">
<div class="col-md-12">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod</p>
</div>
<div class="col-md-12">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod</p>
</div>
</div>
<div class="col-md-4" style="height: 100px;">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod</p>
</div>
<div class="col-md-4">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod</p>
</div>
<div class="col-md-4">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod</p>
</div>
</div>
This is the image I want:
How can I make a fixed bootstrap panel height for all my panels?
<div class="col-md-3 padding-0">
<div class="panel panel-default">
<div class="panel-body" style="min-height: 10px; max-height: 10px;">
<img class="img-responsive" src="images/artgram.png" alt="">
<p>Have you ever been in a company’s reception area that is so impressively stylish that your concept of their professionalism or importance changed for the better? Have you ever been in a company’s reception area that is so impressively stylish that
your concept of their professionalism or importance changed for the better?</p>
</div>
</div>
</div>
<div class="col-md-3 padding-0">
<div class="panel panel-default">
<div class="panel-body" style="min-height: 10px; max-height: 10px;">
<img class="img-responsive" src="images/artgram.png" alt="">
<p>Have you ever been in a company’s reception area that is so impressively stylish that your concept of their professionalism or importance changed for the better?</p>
</div>
</div>
</div>
Either use fixed height with hidden overflow
.panel-body {
height: 100px; // or whatever
overflow: hidden;
}
or assign max rendered height to all panels dynamically using JS after load. See my answer for a quite similar question here. The snippet is copied below
var panels = document.getElementsByClassName('panel-body');
var maxHeight = Array.prototype.map.call(panels, function(panel) {
return parseInt(getComputedStyle(panel).height, 10);
})
.reduce(function(a, b) {
return Math.max(a, b);
});
for (var i = panels.length; i-- > 0;) {
panels[i].style.height = maxHeight + 'px';
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" type="text/css">
<div class="row">
<div class="col-md-6">
<div class="panel panel-default">
<div class="panel-heading">Panel Heading</div>
<div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</div>
<div class="panel-footer">Panel Footer</div>
</div>
</div>
<div class="col-md-6">
<div class="panel panel-default col">
<div class="panel-heading">Panel Heading</div>
<div class="panel-body">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit
amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur
adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit.
</div>
<div class="panel-footer">Panel Footer</div>
</div>
</div>
</div>
I want to position my image button to the bottom-right in a table cell but when I insert more/less text I don't want the button to change position. How do I do that?
I don't really know how to do it but I'll post my current html code.
<table>
<tr>
<td>
<div>
<%--<umbraco:Item field="nyhet-1-text" runat="server" />--%>
<p><img src=""/></p>
<p><strong>News</strong></p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<img src="../media/testImage.png" alt="test"/>
</div>
</td>
</tr>
/Kristian
You can use float:right; on the the .readMoreButton which will mean the button will always be stuck to the right had side of its parent container. It will be pushed down the page when the content grows.
.readMoreButton{
float:right;
}
<table>
<tr>
<td>
<div>
<p><img src=""/></p>
<p><strong>News</strong></p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<img src="../media/testImage.png" alt="test"/>
</div>
</td>
</tr>
</table>
For the life of me I am unable to get these twitter bootstrap buttons to text wrap onto multiple lines, they appearing like so.
I cannot post images, so this is what it is doing...
[This is the bu] tton text
I would like it to appear like
[This is the ]
[button text ]
<div class="col-lg-3"> <!-- FIRST COL -->
<div class="panel panel-default">
<div class="panel-body">
<h4>Posted on</h4>
<p>22nd September 2013</p>
<h4>Tags</h4>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>
</div>
</div>
Any help would be much appreciated.
Edit. I have tried adding word-wrap:break-word; but it is not making any difference.
Edit. JSFiddle http://jsfiddle.net/TTKtb/ - You will need it expand the right column so the panels sit next to one another.
Try this: add white-space: normal; to the style definition of the Bootstrap Button or you can replace the code you displayed with the one below
<div class="col-lg-3"> <!-- FIRST COL -->
<div class="panel panel-default">
<div class="panel-body">
<h4>Posted on</h4>
<p>22nd September 2013</p>
<h4>Tags</h4>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>
</div>
</div>
I have updated your fiddle here to show how it comes out.
You can simply add this class.
.btn {
white-space:normal !important;
word-wrap: break-word;
}
FWIW, in Boostrap 4.4, you can add .text-wrap style to things like buttons:
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
https://getbootstrap.com/docs/4.4/utilities/text/#text-wrapping-and-overflow
You can add these style's and it works just as expected.
.btn {
white-space:normal !important;
word-wrap: break-word;
word-break: normal;
}