Why does the Bootstrap container component size differently than a regular HTML Bootstrap, not sure if I am missing a prop or not?
This is what I get the output I get for both:
(the white space in the sides are from the container margin)
React code:
<Container>
<Row className="row">
<Col className="col-lg-3 col-md-4">
<div
style={{ width: "100%", height: "100vh", backgroundColor: "blue" }}
></div>
</Col>
<div className="col-lg-9 col-md-8 tab-container">
<div
style={{ width: "100%", height: "100vh", backgroundColor: "red" }}
></div>
</div>
</Row>
</Container>
Regular HTML code:
<div class="container">
<div class="row">
<div class="col-lg-3 col-md-4">
<div style="width: 100%; height: 100vh; background-color: blue"></div>
</div>
<div class="col-lg-9 col-md-8">
<div style="width: 100%; height: 100vh; background-color: red"></div>
</div>
</div>
</div>
Can someone help with the correct styling/fix for the React version to match the regular one please?
Related
I know it a bit strange to ask from the title, but I have a problem when changing the size of image inside the carousel. no matter what I did the height of my image doesn't change instead it looks like give an effect like object-fit: cover what I want is to show the image to have size around width: 30vw; and height: 30vh; but every time I change the width its work but when I change the height its not work.
I have some guess such as the container size, the col size, and the div that wrap my image will work if i change their size but in the end its not.
I already read some topic about this :
css-object-fit-contain-is-keeping-original-image-width-in-layout
scaling-centering-and-cropping-image-with-object-fit-and-object-position
but it still not work. Let's say I want to make my image size around width: 360px and height: 360px for example
this is my code:
import React from "react";
// CSS
import './klien.css'
const Klien = () => {
return (
<div className="klien">
<div className="klien-container">
<p className="section-title">Klien Kita</p>
<div className="carousel slide" data-ride="carousel">
<div className="carousel-item active">
<div className="col-12 col-sm-12 col-md-8 col-lg-8 card-center card-size">
<div className="mb-3">
<div className="text-center">
<img className="img-size" src="http://placehold.it/360x360" alt="klien-logo" />
</div>
</div>
</div>
</div>
<div className="carousel-item">
<div className="col-12 col-sm-12 col-md-8 col-lg-8 card-center card-size ">
<div className="mb-3">
<div className="text-center">
<img className="card-img-top img-size" src="http://placehold.it/360x360" alt="klien-logo" />
</div>
</div>
</div>
</div>
<div className="carousel-item">
<div className="col-12 col-sm-12 col-md-8 col-lg-8 card-center card-size">
<div className="mb-3">
<div className="text-center">
<img className="card-img-top img-size" src="http://placehold.it/360x360" alt="klien-logo" />
</div>
</div>
</div>
</div>
<div className="carousel-item">
<div className="col-12 col-sm-12 col-md-8 col-lg-8 card-center card-size">
<div className="mb-3">
<div className="text-center">
<img className="card-img-top img-size" src="http://placehold.it/360x360" alt="klien-logo" />
</div>
</div>
</div>
</div>
</div>
</div>
</div>
);
}
export default Klien;
and this is my css:
.klien{
background-color: #f6f7fd;
min-height: 50vh;
}
.klien .klien-container{
overflow: hidden;
padding-top: 10vh;
}
.klien .section-title{
color: #3b73c5;
font-size: 3em;
font-weight: 500;
text-align: center;
}
.klien .carousel-size{
/* height: 20vh; */
}
.klien .card-center{
margin: 0% auto;
}
.klien .text-center{
text-align: center;
}
.klien .card-size{
max-height: 20vh;
}
.klien .img-container{
height: 20vh;
width: 20vh;
}
.klien .img-size{
width: 30vw;
height: 30vh;
/* object-fit: contain; */
}
can someone help and give explanation about my problem? in first I thought maybe it is because of object-fit: contain but it seems my guess about it is wrong
this is the screenshot:
I would recommend to use a div with a background image, that way you have control of the responsiveness of your list. It requires almost nothing to perform that change.
You need to change your img tags to div
<div
className="img-size"
style={{ backgroundImage: `url(${"http://placehold.it/360x360"})`}}
/>
Your css
.klien .img-size{
width: 30vw;
height: 30vh;
margin: 0 auto;
background-position: center;
background-size: cover;
/* object-fit: contain; */
}
I made a codepen with this. Hope it helps, if you want another approach you can tell me.
Have you tried to change the image size using inline css? For example<img src="url" width="specified with in px or %">
I am trying to make three buttons use the full width of a column.
The grid is 3 for the buttons and 9 for other components.
Here's a visual. So basically the buttons should also occupy the space that's marked with red, they should just use the whole column of 3.
Here's App.js where I imported the component:
<div className="container-full padding-0" style={{overflow:'hidden', overflowY:'hidden'}}>
<div className="row">
<div className="col-sm-3" style={{borderRight:"1px solid #000"}}>
<div className="row no-gutters mt-auto">
<div className="col-sm-3">
<COMPONENT1/>
</div>
<div className="col-sm-9">
<COMPONENT2/>
</div>
</div>
<COMPONENT3 store={store} style={{overflow:'hidden'}}/>
<COMPONENT4/>
<BUTTONS/> --------------------------> Here are the buttons
</div>
<div className="col-sm-9" style={{paddingRight: 0, paddingLeft: 0}}>
<COMPONENT6 = {store} style={{overflow:'hidden'}}/>
<br/>
<COMPONENT7/>
<COMPONENT8 store={store} clicked={this.clicked}/>
</div>
</div>
</div>
And buttons component:
<div className="row no-gutters mt-auto" style={{paddingTop:10}}>
<div className="col-sm-4">
<Button variant="raised" style={buttonStyle}>A</Button>
</div>
<div className="col-sm-4">
<Button variant="raised" style={buttonStyle}>B</Button>
</div>
<div className="col-sm-4">
<Button variant="raised" style={buttonStyle}>C</Button>
</div>
</div>
And the css for the buttons:
const buttonStyle = {
fontSize: 20,
textAlign: 'center',
display:'inline-block',
width:'100%',
height:100
}
EDIT: Here's a quick pic of the UI
Can you please try the following method:
Give below css rules to row no-gutters mt-auto:
style={{ display: 'flex', flex: 1, flexDirection: 'row' }}
It will work for sure !
Thanks
I am trying to make a dashboard to represent a few charts and some numbers. I have a parent div which has a class for it. Inside this div their are divs for charts and numbers. Now if the div for charts inherits the class from the parent that is fine considering the size of the charts. However the divs which display number should be of smaller size and I have applied another class for it. But the divs for numbers always take the parents div style . Is their a way the child divs would not take the parents div class.
Below are the images on how I am getting it now and how I am trying to get to.
CURRENTLY :
HOW IT SHOULD BE:
Below is the code on how it is currently.
<div class="col-md-6 " style=" padding-bottom: 15px;" ng-repeat="obj in tab" ng-include="'chartstemplate'">
<div class="col-xs-3">
<div ng-if="charts_type =='Number'" class="block" style=" padding-bottom: 30px;font-size: 45px;font-weight: 700; margin-right: -70px;">
<!-- <div ng-if="charts_type =='Number'" style=" height: 70px;font-size: 45px;margin-top: 30px;font-weight: 700;margin-left:180px; width: 16.66667% !important;">-->
<dash-board ng-if="obj.chart_data" chart-data="obj.chart_data" />
</div>
</div>
<div class="svg-container" ng-if="charts_type =='Bar'" style="width: 440px; height: 430px;">
<bars-chart ng-if="obj.chart_data" chart-data="obj.chart_data" />
</div>
<div class="svg-container" ng-if="charts_type =='Bar'" style="width: 440px; height: 430px;">
<bars-chart ng-if="obj.chart_data" chart-data="obj.chart_data" />
</div>
<div class="svg-container" ng-if="charts_type =='Bar'" style="width: 440px; height: 430px;">
<bars-chart ng-if="obj.chart_data" chart-data="obj.chart_data" />
</div>
</div>
Either specifically override the inherited propert, or look into the :not() pseudo selector
I think there is a problem with your column structure. I can show you how your structure can be -
<div class="col-md-6">
*charts*
</div>
<div class="col-md-6">
<div class="row">
<div class="col-md-6">
*number*
</div>
<div class="col-md-6">
*number*
</div>
</div>
<div class="row">
<div class="col-md-6">
*number*
</div>
<div class="col-md-6">
*number*
</div>
</div>
</div>
I'm struggling on how I will code to create a two vertical images and is it possible to lessen the height of the larger image without lessen the width? because I need to fit it on col-md-8 any thoughts about this?
this is the image I need to make.
Click here
HTML and CSS code:
.img-big{ height: 100%;width: 100%; }
<div class="row col-md-8">
<img class="row img-big img-responsive" src="/assets/icons/people-crowd-child-kid-large.jpg"></div>
</div
the above code is what I've used to make the bigger image beside image 2 and 3. the dimension of the large image is 900x767
You can use the flexbox property to achieve what you want and set the image as background.
body, html {
margin: 0;
padding: 0;
color: white;
}
.container {
height: 767px;
display: flex;
}
.left {
background-image: url('http://i.imgur.com/AzeiaRY.jpg');
background-size: cover;
flex: 1;
}
.right {
display: flex;
flex-direction: column;
flex: 0 0 50%;
}
.one {
background-image: url('http://i.imgur.com/AzeiaRY.jpg');
background-size: cover;
flex: 50%;
}
.two {
background-image: url('http://i.imgur.com/AzeiaRY.jpg');
background-size: cover;
flex: 50%;
}
<div class="container">
<div class="left">Left image</div>
<div class="right">
<div class="one">First image</div>
<div class="two">Second image</div>
</div>
</div>
In Bootstrap 5, you can use d-grid gap-x. For example:
HTML
.content {
background-color: transparent;}
.content .left, .content .right {
float: left;}
.full-width-band-hd {
margin-top: -35px;}
.txt-yellow {
color: var(--bs-yellow);}
<section class="container-lg">
<div class="content row">
<h2 class="txt-yellow full-width-band-hd">Head</h2>
<!-- Left Side -->
<h6 class="text-yellow">H6 head</h6>
<h3 class="text-yellow">H3 head</h3>
</div>
<!-- style in content row will become a class later-->
<div class="content row" style="height: 642px;">
<div class="col-md-4 left d-grid gap-3">
<div class="">
<img src="image1" width="100%" height="auto" alt="fp1">
</div>
<div class="">
<img src="image2" width="100%" height="auto" alt="fp2">
</div>
</div>
<!-- End of Left Side -->
<div class="col-md-8 left">
<div class="">
<img src="image3" width="100%" height="auto" alt="fp3">
</div>
</div>
<!-- End of col-md-8 -->
</div><!-- content row -->
</section>
You should format your code like below:
<div class="row">
<div class="col-md-8">
<img class="img-big img-responsive" src="https://en.apkshki.com/storage/5/icon_5dcfce7f86906_5_w256.png"></div>
</div>
<div class="col-md-4">
<img src="https://en.apkshki.com/storage/5/icon_5dcfce7f86906_5_w256.png"></div>
<img src="https://en.apkshki.com/storage/5/icon_5dcfce7f86906_5_w256.png"></div>
</div>
</div>
As you can see the two images at the bottom in col-md-4 if you spread the width 100% the next image will drop below.
You shouldnt really have a class with both a row and a col-md in the class name. (See http://getbootstrap.com/css/)
With regards to reducing the height and not the width are you not able to crop the image down on Paint or Photoshop and upload the image with the correct height?
I trying to make uncommon layout with bootstrap, but pulls and pushes works in wierd way. Look at it:
http://jsfiddle.net/tfgdveop/1/
<div class="container" style="background: white">
<div class="row">
<div class="col-xs-3" style="background: red; height: 300px;">catalog</div>
<div class="col-xs-9" style="background: blue; height: 50px;">bNNER</div>
<div class="col-xs-3 col-xs-push-6" style="background: yellow; height: 500px;">News</div>
<div class="col-xs-6 col-xs-pull-3" style="background: green; height: 280px;">Catalog</div>
<div class="col-xs-6 col-xs-pull-6" style="background: pink; height: 100px;">Promo</div>
</div>
</div>
I need pink promo block 9 cols width, but if i made it wider 6, it fall under news block.
I changed order a bit and Yellow News to float to right. I also removed all unnnecessary pulls and pushes. Here is the result:
http://jsfiddle.net/tfgdveop/3/
<div class="container" style="background: white">
<div class="row">
<div class="col-xs-3" style="background: red; height: 300px;">catalog</div>
<div class="col-xs-9"style="background: blue; height: 50px;">bNNER</div>
<div class="col-xs-6"style="background: green; height: 280px;">Catalog</div>
<div class="col-xs-3 pull-right"style="background: yellow; height: 500px;">News</div>
<div class="col-xs-9" style="background: pink; height: 100px;">Promo</div>
</div>
</div>
Is this what you are looking for?