I have 7 columns(monday-sunday) using bootstrap.
Here is code in View
<div id="left3" style="padding-right: 140px;" >
<div class="row">
<div class="col-md-2">Mon</div>
<div class="col-md-2">Tue</div>
<div class="col-md-2">Wen</div>
<div class="col-md-2">Thu</div>
<div class="col-md-2">Fri</div>
<div class="col-md-1">Sat</div>
<div class="col-md-1">Sun</div>
</div>
<div class="row">
<div class="col-md-2">1</div>
<div class="col-md-2">2</div>
<div class="col-md-2">3</div>
<div class="col-md-2">4</div>
<div class="col-md-2">5</div>
<div class="col-md-1">6</div>
<div class="col-md-1">7</div>
</div>
</div>
And when I try to add border like this
style="border-style: solid; border-color: #1d69b4;border-radius: 10px;"
I got this
How I can center text in column and make it like on this design?
Related
SIMPLE CALCULATOR DESIGN WITG GRID (ALL CODE PASTED)
Trying hard but the last equal(=) is not working
<div class="calculator">
<div class="display-area"></div>
<div class="button-section">
<div class="rows">
<div class="first-row">
<div id="cancel">C</div>
<div id="divide">/</div>
<div id="multiply">*</div>
<div id="delete">Del</div>
</div>
<div class="second-row">
<div id="seven">7</div>
<div id="eight">8</div>
<div id="nine">9</div>
<div id="minus">-</div>
</div>
<div class="third-row">
<div id="four">4</div>
<div id="five">5</div>
<div id="six">6</div>
<div id="plus">+</div>
</div>
<div class="fourth-row">
<div id="one">1</div>
<div id="two">2</div>
<div id="three">3</div>
<div id="equal">=</div>
</div>
<div class="fifth-row">
<div id="percent">%</div>
<div id="zero">0</div>
<div id="dot">.</div>
</div>
</div>
</div>
</div>
</div>
This is the pic for css where the code not working properly. The last equal block is not working in grid-rows as i want it to move down till the last row
enter image description here
This is the result i got after many tries
enter image description here
im trying to split row (col-md-12 = full width of row) for 3 parts - col-md-8 + col-md-2 + col-md-2, but bootstrap class col doesn't work as it shoud and im getting 3x columns sticked 2 each other :(
<!-- Bootstrap 4 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<!-- Body -->
<body style="background-color:gray; margin: 0">
<div class="container-fluid" style="height: 5%; background-color: green;">
<div>
<div class="row form-inline">
<div class="col-md-8" style="display: inline-block">something</div>
<div class="col-md-2" style="display: inline-block">something2</div>
<div class="col-md-2" style="display: inline-block">something3</div>
</div>
</div>
</div>
</body>
What I'm getting:
What I want to get:
PS:
I know that i can use style width 70% + 15% + 15% but i think it s not the point of using bootstrap :/
Assuming based on your screenshot, it looks like your device width is less than 768px. If that is, therefore it works as expected in your screenshot since you're using col-md - Read more about bootstrap's responsive breakpoints here
If you do not want to make it responsive, then you should just use col-{n}. Read more about Bootstrap 4 grid options
E.g.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<h5> Current approach </h5>
<div class="container-fluid" style="height: 5%; background-color: #cfcfcf;">
<div>
<div class="row form-inline">
<div class="col-md-8" style="display: inline-block">col-md-8</div>
<div class="col-md-2" style="display: inline-block">col-md-2</div>
<div class="col-md-2" style="display: inline-block">col-md-2</div>
</div>
</div>
</div>
<br />
<br />
<h5> Expected approach </h5>
<div class="container-fluid" style="height: 5%; background-color: #a0a0a0;">
<div>
<div class="row form-inline">
<div class="col-8" style="display: inline-block">col-8</div>
<div class="col-2" style="display: inline-block">col-2</div>
<div class="col-2" style="display: inline-block">col-2</div>
</div>
</div>
</div>
How can I make my container to go down automatically of the page if it exceed the width of the page? The page background is in black if you look at the jsfiddle and it's size is 780px. All two credit cards are displaying over the page. Thanks.
My CSS as below:
<div style="width:780px;background:#000">
<div class="container">
<div class="sleeve">
<div class="credit-card">
<div class="card-company">West Frodo</div>
<div class="card-number">
<div class="digit-group">4141 7204 9012 0029</div>
</div>
<div class="card-expire"><span class="card-text">CVC</span> 321 <span class="card-text">Expires</span> 12/24</div>
<div class="card-holder">John P. Smith</div>
<div class="card-type">Debit card</div>
</div>
</div>
<div class="sleeve">
<div class="credit-card selected" style="background: #555">
<div class="card-company">West Frodo</div>
<div class="card-number">
<div class="digit-group">4234 1302 3798 0265</div>
</div>
<div class="card-expire"><span class="card-text">CVC</span> 321 <span class="card-text">Expires</span> 12/24</div>
<div class="card-holder">John P. Smith</div>
<div class="card-type">Debit card</div>
</div>
</div>
<div class="sleeve">
<div class="credit-card" style="background: #3B3">
<div class="card-company">West Frodo</div>
<div class="card-number">
<div class="digit-group">4812 0322 0517 2840</div>
</div>
<div class="card-expire"><span class="card-text">CVC</span> 321 <span class="card-text">Expires</span> 12/24</div>
<div class="card-holder">John P. Smith</div>
<div class="card-type">Debit card</div>
</div>
</div>
<div class="sleeve">
<div class="credit-card" style="background: #3B3">
<div class="card-company">West Frodo</div>
<div class="card-number">
<div class="digit-group">4812 0322 0517 2840</div>
</div>
<div class="card-expire"><span class="card-text">CVC</span> 321 <span class="card-text">Expires</span> 12/24</div>
<div class="card-holder">John P. Smith</div>
<div class="card-type">Debit card</div>
</div>
</div>
</div>
</div>
Here's my fiddle: http://jsfiddle.net/5gronvk1/1/
Update the following selectors in your CSS with the following:
.container {
height: 100%;
}
and
.sleeve {
display: inline-block;
margin: auto;
}
I'm having trouble style/adding a header above my navbar. I was able to add the header but the alignment is completely off.
I'm trying to have it align with the first navbar button. May I ask how do I create/edit my header such that it'll align with the navbar.
<div class="container" style="background-color: #00a3a3;">
<div class="row">
<div class="col-md-12">
<h2 class="pull-left" style="color: white">THE COMPANY NAME</h2>
</div>
</div>
</div>
http://codepen.io/anon/pen/RrwvNa
I was able to get it to align using this code
<nav class="navbar" style="background-color: #00a3a3;">
<div class="container-fluid col-sm-1">
</div>
<div class="col-sm-7">
<div>
<h2 class="pull-left" style="color: white">THE COMPANY NAME</h2>
</div>
</div>
</nav>
but there seems to be a space between the header and the nav bar.
Here is the solution. Take a look in Codepen
Change your container to container-fluid and use margin-left:8.5% in your h1 header.
<div class="container-fluid" style="background-color: #00a3a3;">
<div class="row">
<div class="col-md-12">
<h2 class="pull-left" style="margin-left:8.5%;color: white">THE COMPANY NAME</h2>
</div>
</div>
</div>
I need to make image positioned like on below picture:
I have code:
<footer>
<div class="stopka1">
<div class="container">
....................
</p>
</div>
</div>
</footer>
<div class="container">
<div class="row" style="padding-right:0; padding-left:0;padding-top:30px;padding-bottom:20px;">
<div class="col-md-6">
<div class="row">
<div class="col-xs-6"><img src="phone.png" style="vertical-align:middle !important;"> <span style="font-weight:lighter;color:rgb(10, 55, 110);font-size: 28px; vertical-align:middle !important;">22 213 18 31</span></div>
<div class="col-xs-6"><button class="col-cs-12 przycisk-pytanie" style="font-weight: bold;margin-top:0;">Zadaj pytanie</button></div>
</div>
</div>
<div class="col-md-6">
<div class="row">
<div class="col-xs-2"><img src="women.png" style=""></div>
<div class="col-xs-5">.. price ..</div>
<div class="col-xs-5"><button class="przycisk-rezerwuj-big" style="font-weight: bold;height:35px;">Rezerwuj teraz</button></div>
</div>
</div>
</div>
</div>
Have someone any idea how to get this effect? I have no idea how to force it to cover higher div.
You can do one of two options:
OPTION 1
img {margin-top:-20px;}
OPTION 2
img {position:relative; top:-20px;}