I have used the following style inside the element of my html to get rid of the extra white space on the right side of the screen:
<style>
html,body{
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
overflow-x: hidden;
}
</style>
And it worked perfectly fine. However, it sets the visibility of some of the content on of the pages to be "hidden" and I have tried using the !important attribute to overwrite but no matter what I do, they remain invisible.
<div class="col-lg-3 col-md-6 wow fadeInUp" data-wow-delay="0.2s">
<div class="box">
<div class="icon"><a href=""><i>
<img class="featurette-image img-fluid mx-auto" data-src="holder.js/500x500/auto" src="/img/yusufImg/slope%20design.png" alt="Generic placeholder image">
</i></a></div>
<h4 class="title">Slope Design</h4>
<a id="slopeButton" class="btn btn-lg btn-outline-success" style="font-weight: 900;color: white;">Read More</a>
</div>
</div>
<div style=" visibility:visible !important;" class="col-lg-3 col-md-6 wow fadeInUp" data-wow-delay="0.2s">
<div class="box">
<div class="icon"><a href=""><i>
<img class="featurette-image img-fluid mx-auto" data-src="holder.js/500x500/auto" src="/img/yusufImg/taş%20duvar.png" alt="Generic placeholder image">
</i></a></div>
<h4 class="title">Tas Duvar</h4>
<a id="tasduvarButton" class="btn btn-lg btn-outline-
success" style="font-weight: 900;color: white;">Read More</a>
</div>
Ones with the inline style for visibility have the same exact attributes and classes as the ones that don't. However, they are always rendered to be invisible when I load the page.
How can I fix this?
Related
When I use display:block it doesn't want to work which was working before. When I inspect it shows me strike through on display:block. Now the buttons are positioned on the right side of the col, I'd need them to be positioned in the middle under the image.
html
<div class="sectionLight">
<div class="row">
<div class="col-sm-12">
<div class="row">
<div class="col-sm-12 col-lg-4">
<img class="img-fluid imgCenter" src="images/square.png">
<div class="row">
<div class="col-sm-12">
<button type="button" class="btn btn-danger btn-lg btnCenter" data-toggle="modal" data-target=".square-modal-lg">Prime</button>
</div>
</div>
</div>
<div class="col-sm-12 col-lg-4">
<img class="img-fluid imgCenter" src="images/fibo.png">
<div class="row">
<div class="col-sm-12">
<button type="button" class="btn btn-danger btn-lg btnCenter" data-toggle="modal" data-target=".fibo-modal-lg">Fibo</button>
</div>
</div>
</div>
<div class="col-sm-12 col-lg-4">
<img class="img-fluid imgCenter" src="images/square_copy.png">
<div class="row">
<div class="col-sm-12">
<button type="button" class="btn btn-danger btn-lg btnCenter" data-toggle="modal" data-target=".prime-modal-lg">Square</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
CSS
.btnCenter {
display: block;
margin: auto;
margin-top: 15px;
margin-bottom: 20px;
width: 50%;
}
You probably have included another css script that overwrites your current one.
You can try to make it !important. If that doesnt work, you might have to make your selector more spesific than the one currently overwriting it.
.btnCenter {
display: block !important;
margin: auto;
margin-top: 15px;
margin-bottom: 20px;
width: 50%;
}
You can debug this in the dev-tools. See the example image below:
In this example, primary.css is higher in the css hierarchy (meaning the file primary.css is included later than stacks.css) Therefore, it will overwrite the selector.
This question already has answers here:
Bootstrap - align button to the bottom of card
(9 answers)
Closed 4 years ago.
Using Bootstrap 4, I have created a card-deck with two cards. Although both cards are the same height, elements are not in the same spot due to the length of text from other elements.
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<div class="card-deck">
<div class="card" style="margin-top: 0px">
<div class="card-body">
<a>
<img class="card-img" src="{{banner.FeatureImage0.Url}}" alt="Card image cap" style="width:200px; height: 132.531; float: right; margin-left:10px;">
</a>
<h5 class="card-title">Get to Know...FirstName LastName</h5>
<p class="card-text" style="margin-bottom: 20px;">In this interview we feature FirstName LastName, Community Relations and Social Responsibility Officer, Executive Vice President.</p>
<a class="btn btn-primary" style="color:white !important;">Read More</a>
</div>
</div>
<div class="card" style="margin-top: 0px">
<div class="card-body">
<a>
<img class="card-img" src="{{banner.FeatureImage0.Url}}" alt="Card image cap" style="width:200px; height: 132.531; float: right; margin-left:10px;">
</a>
<h5 class="card-title">Questions are more important than answers - August ethics message</h5>
<p class="card-text" style="margin-bottom: 20px;">The August ethics message comes from FirstName LastName, Wisconsin Region CEO.</p>
<a class="btn btn-primary" style="color:white !important;">Read More</a>
</div>
</div>
</div>
How can I make sure my "Read More" buttons are aligned with each other?
You can use d-flex flex-column to make the card-body flex-direction column, and then mt-auto (margin-top:auto) to push the buttons to the bottom of each card...
<div class="container">
<div class="card-deck">
<div class="card" style="margin-top: 0px">
<div class="card-body d-flex flex-column align-items-start">
<a>
<img class="card-img" src="{{banner.FeatureImage0.Url}}" alt="Card image cap" style="width:200px; height: 132.531; float: right; margin-left:10px;">
</a>
<h5 class="card-title">Get to Know...FirstName LastName</h5>
<p class="card-text" style="margin-bottom: 20px;">In this interview we feature FirstName LastName, Community Relations and Social Responsibility Officer, Executive Vice President.</p>
<a class="btn btn-primary mt-auto" style="color:white !important;">Read More</a>
</div>
</div>
<div class="card" style="margin-top: 0px">
<div class="card-body d-flex flex-column align-items-start">
<a>
<img class="card-img" src="{{banner.FeatureImage0.Url}}" alt="Card image cap" style="width:200px; height: 132.531; float: right; margin-left:10px;">
</a>
<h5 class="card-title">Questions are more important than answers - August ethics message</h5>
<p class="card-text" style="margin-bottom: 20px;">The August ethics message comes from FirstName LastName, Wisconsin Region CEO.</p>
<a class="btn btn-primary mt-auto" style="color:white !important;">Read More</a>
</div>
</div>
</div>
</div>
https://www.codeply.com/go/nxTqqN1uWC
This solution doesn't require altering the structure of the card as all content should remain in the card-body.
The content of your cards are not taking the same height. If you see, one of the headers take up 2 lines in a small window compared to the other. There are multiple ways to solve this. One way is to assign the width to the title and then put an ellipsis for the overflow. Similarly you can do this for the body. After controlling the height of everything before the button, your content will then align.
For ellipsis:
p {
width: 200px;
white-space: nowrap;
overflow: hidden;
display: inline-block;
text-overflow: ellipsis;
border: 1px solid #ddd;
margin: 0;
}
Card already has a flex so you may have to add a "text container" to padd the bottom (the button height plus some extra margin: like 2.5rem) and make the button positioned absolute to card-body bottom (same distance/size as the card-body margin : 1.5rem)
.card-body {
position: relative;
}
.card-body .emp-container {
padding-bottom: 2.5rem;
}
.card-body .btn {
position: absolute;
bottom: 1.25rem;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<div class="card-deck">
<div class="card" style="margin-top: 0px">
<div class="card-body">
<div class="emp-container">
<a>
<img class="card-img" src="https://picsum.photos/200/300" alt="Card image cap" style="width:200px; height: 132.531; float: right; margin-left:10px;">
</a>
<h5 class="card-title">Get to Know...FirstName LastName</h5>
<p class="card-text" style="margin-bottom: 20px;">In this interview we feature FirstName LastName, Community Relations and Social Responsibility Officer, Executive Vice President., Community Relations and Social Responsibility Officer, Executive Vice President., Community Relations and Social
Responsibility Officer, Executive Vice President.</p>
</div> <a class="btn btn-primary" style="color:white !important;">Read More</a>
</div>
</div>
<div class="card" style="margin-top: 0px">
<div class="card-body">
<div class="emp-container">
<a>
<img class="card-img" src="https://picsum.photos/200/300" alt="Card image cap" style="width:200px; height: 132.531; float: right; margin-left:10px;">
</a>
<h5 class="card-title">Questions are more important than answers - August ethics message</h5>
<p class="card-text" style="margin-bottom: 20px;">The August ethics message comes from FirstName LastName, Wisconsin Region CEO.</p>
</div>
<a class="btn btn-primary" style="color:white !important;">Read More</a>
</div>
</div>
</div>
This question already has answers here:
Bootstrap columns stacking vertically on mobile device
(2 answers)
Closed 4 years ago.
I'm trying to get content within a Bootstrap row to scale down rather than break into single columns on mobile. How would I go about this?
Here is an example of what I have so far:
<div class="row justify-content-center">
<div class="col-xs-4" style="padding:0!important;">
<a class="btn btn-light" style="width: 200px; height: 200px;>
<h2> title </h2>
<img src="" style="width:100px; height:100px;">
</a>
</div>
<div class="col-xs-4" style="padding:0!important;">
<a class="btn btn-light" style="width: 200px; height: 200px;>
<h2> title </h2>
<img src="" style="width:100px; height:100px;">
</a>
</div>
<div class="col-xs-4" style="padding:0!important;">
<a class="btn btn-light" style="width: 200px; height: 200px;>
<h2> title </h2>
<img src="" style="width:100px; height:100px;">
</a>
</div>
</div>
When I open this up on my phone, each column is displayed as a single line on the page. I'd like all three to be on the same row on mobile.
Bootstrap-4 has removed all the variants of *-xs-* classes.
col-xs- have been dropped in Bootstrap 4 in favor of col-.
So in order to have three equal width columns on all kinds of devices, use col-4 or just col instead of col-xs-4.
https://getbootstrap.com/docs/4.1/layout/grid/#grid-options
Use p-0 class instead of the inline padding style for the a tags.
https://getbootstrap.com/docs/4.0/utilities/spacing/
Use img-fluid class instead of the inline css style for the img elements to make it responsive.
https://getbootstrap.com/docs/4.0/content/images/#responsive-images
As you may know, mobile devices have less than 414px width. But the sum of the a tags' width is more than 414px. Therefore, you should use a max-width to set their maximum width and use width: 100% or w-100 also.
The max-width CSS property sets the maximum width of an element. It prevents the used value of the width property from becoming larger than the value specified by max-width. https://developer.mozilla.org/en-US/docs/Web/CSS/max-width
In this case, since the row has exactly 12 columns, it is unnecessary to use justify-content-center. Therefore, you better remove it.
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css">
<div class="container">
<div class="row">
<div class="col-4 p-0">
<a class="btn btn-light" style="max-width: 200px; width:100%; height: 200px;">
<h2> title </h2>
<img src="http://via.placeholder.com/100" class="img-fluid">
</a>
</div>
<div class="col-4 p-0">
<a class="btn btn-light" style="max-width: 200px; width:100%; height: 200px;">
<h2> title </h2>
<img src="http://via.placeholder.com/100" class="img-fluid">
</a>
</div>
<div class="col-4 p-0">
<a class="btn btn-light" style="max-width: 200px; width:100%; height: 200px;">
<h2> title </h2>
<img src="http://via.placeholder.com/100" class="img-fluid">
</a>
</div>
</div>
</div>
https://codepen.io/anon/pen/djWZJj
You need to make changes in your col structure. Bootstrap 4 has changed the breakpoints.
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css" rel="stylesheet" />
<div class="row justify-content-center">
<div class="col-4" style="padding:0!important;">
<a class="btn btn-light" style="width: 200px; height: 200px;">
<h2> title </h2>
<img src="" style="width:100px; height:100px;">
</a>
</div>
<div class="col-4" style="padding:0!important;">
<a class="btn btn-light" style="width: 200px; height: 200px;">
<h2> title </h2>
<img src="" style="width:100px; height:100px;">
</a>
</div>
<div class="col-4" style="padding:0!important;">
<a class="btn btn-light" style="width: 200px; height: 200px;">
<h2> title </h2>
<img src="" style="width:100px; height:100px;">
</a>
</div>
</div>
More than likely this has to do with height and width of the images your using. I would suggest just using a max-height and max-width and allow the images to scale to the screen size.
<div class="row justify-content-center">
<div class="col-xs-4" style="padding:0!important;">
<a class="btn btn-light" style="width: 200px; height: 200px;>
<h2> title </h2>
<img src="" style="max-width:100px; max-height:100px;">
</a>
</div>
I have various images of different dimensions that need to be the same height within a bootstrap grid.
How can I replicate this equal size display in Bootstrap? I have tried "flex 1" on the child items with no joy and "flex: 1 0 0%;" used at source and a few other equal height tutorials on the web with no joy.
I think the solution here is making equal sized rectangle divs, but interested in the way of getting equal height divs with flexbox of all proportions too.
If you control the image files, your best option is probably going to be manually cropping the images into the correct dimensions.
If you don't control the source images (if you're loading from a remote service such as instagram as in the demo), then you'll get the best results by setting an explicit height on your divs and then loading the images as backgrounds with background-size: cover;.
https://developer.mozilla.org/en-US/docs/Web/CSS/background-size
They basically have a wrapper that has all those rows inside it with a fixed responsive width (media queries they define a fixed width for each screen size) and display:flex/flex-direction:column to those rows stack on top of each other, then those rows are also flexed, with flex-direction:row unlike your code each row has 3 divs those div has flex:1 0 0% so they split the width evenly,and of them each have an img inside each img has a set of defined sizes in the srcset attribute which have equal heights.
So you see the fixed width on the wrapper is divided between the children, and the height is defined by the images.
example below
I splitted your example into two rows each with 3 images, instead of doing the same thing they did with srceset attribute to make the images responsive, i'm just gonna give them a fixed height, for the sake of this explanation.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.container {
display: flex;
flex-direction: column;
max-width: 935px !important;
/* Because in here bootsrtap comes after the editor css*/
}
.container>.row {
display: flex;
flex-direction: row;
}
.container>.row>div {
flex: 1 0 0%;
}
.container>.row>div img {
max-width: 100%;
height: 293px;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css">
<div class="container">
<h1 class="my-4 text-center text-lg-left"></h1>
<div id="" class="row text-center text-lg-left">
<div class="col-lg-4 col-sm-6">
<a href="" class="d-block mb-4 h-100" target="_blank">
<img class="img-fluid img-thumbnail" src="https://www.instagram.com/p/BjiCy5uDPHp/media/?size=l" alt="">
</a>
</div>
<div class="col-lg-4 col-sm-6">
<a href="" class="d-block mb-4 h-100" target="_blank">
<img class="img-fluid img-thumbnail" src="https://www.instagram.com/p/Bjhw_0DDAKB/media/?size=l" alt="">
</a>
</div>
<div class="col-lg-4 col-sm-6">
<a href="" class="d-block mb-4 h-100" target="_blank">
<img class="img-fluid img-thumbnail" src="https://www.instagram.com/p/BjhXUb5DVo4/media/?size=l" alt="">
</a>
</div>
</div>
<div id="" class="row text-center text-lg-left">
<div class="col-lg-4 col-sm-6">
<a href="" class="d-block mb-4 h-100" target="_blank">
<img class="img-fluid img-thumbnail" src="https://www.instagram.com/p/BjhF2fDjc6E/media/?size=l" alt="">
</a>
</div>
<div class="col-lg-4 col-sm-6">
<a href="" class="d-block mb-4 h-100" target="_blank">
<img class="img-fluid img-thumbnail" src="https://www.instagram.com/p/Bjgz6KJDw2S/media/?size=l" alt="">
</a>
</div>
<div class="col-lg-4 col-sm-6">
<a href="" class="d-block mb-4 h-100" target="_blank">
<img class="img-fluid img-thumbnail" src="https://www.instagram.com/p/Bjggi3mjTxf/media/?size=l" alt="">
</a>
</div>
</div>
</div>
I need to style those elements from gentelella template:
https://colorlib.com/polygon/gentelella/contacts.html
and this is my implementation
<div class="col-md-4 col-sm-4 col-xs-12 profile_details">
<div class="well profile_view">
<div class="col-sm-12 col-xs-12">
<div class="crop col-md-4 col-sm-12 col-xs-12 text-center ">
<img src= "https://media-cdn.tripadvisor.com/media/photo-s/0d/bf/07/9b/post-card-view.jpg" alt="" class="img-icon-template img-fluid ">
</div>
<div class=" col-md-8 col-sm-8 col-xs-12">
<div class="">
<h4 class="brief titolo_template"><i>TITLE</i></h4>
<div><i class="fa fa-user"><strong> user XXX </i> </div>
<p class="descr_p"><i class="fa fa-file-text-o"> <strong> descr: </strong> </i>something</p>
</div>
</div>
</div>
<div class="col-xs-12 bottom text-center">
<div class="col-xs-12 col-sm-12 emphasis text-left">
<p class="">
<a>relase date </a><i>dd/mm/aaaaa #endif</i>
</p>
<div class="col-md-6 col-sm6">
<a class="btn-block btn-success btn-xs text-center"
role="button" id="btnT2"
href="/templateGraphic/idxxx"
<i class="fa fa-sort-amount-asc "></i>view tamplate
</a>
</div>
<div class="col-md-6 col-sm-6">
<a class="btn-block btn-info btn-xs text-center"
role="button" id="btnT1"
href="alo/oo"
class="btn btn-info btn-xs">
<i class="fa fa-comments-o"></i> get replies
</a>
</div>
</div>
</div>
</div>
</div>
as you can see there are no fixed height, and if there is long description, as for example in the last box, the box is going to be bigger and bigger.
The problem is if fix max-height for the container that's will not work, same thing for the things inside because it makes all responsive rules and media query not working after.
the only solution that I've found is cutting text inside <p> with
.descr_p{
max-height: 90px;
text-overflow: ellipsis;
/* white-space: nowrap; */
overflow: hidden;
}
but if uncomment white space: nowrap a mess like this happens:
so the questions are 2 :)
which one is the best way to fix maximum dimension and keep the whole thing responsive.
how can I make otherwise "whitespace: nowrap" working;
apologize if I've asked silly things but I'm very newbie in CSS styling.
You need to apply max-width property in descr_p according to what you want. max-height would not work.
.descr_p{
max-width: 105px;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
Also , you can use flexbox to design your layout. You would not need to worry about size of text then.
Your structure is wrong. If you reduce width of the screen to below 1180px. There is not space to Address and mobile number.
you can use 'Media Object' and simplify your structure. Media Object
And for height issue you can use below jquery:
jQuery(function($) {
var tallest = 0;
$('.profile_view .col-sm-12').each(function() {
var height = $(this).height();
if (height > tallest) {
tallest = height;
}
});
$('.profile_view .col-sm-12').height(tallest);
});