I'm trying to nest containers with Twitter Bootstrap to achieve the following in this screen shot. In the PSD the bubble image height is 404px. I need this to look good across all devices, so responsiveness is a must and should scale accordingly without overwhelming the screen.Could somebody please point me in the right direction to nail the CSS down for this?
I have added what I've done so far in Bootstrap to make this happen but it is off and need to get the containers right. I've read that containers in bootstrap shouldn't be nested but "can be".
I have nested containers but can't seem to achieve what is in the screen shots with Bootstrap.
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="css/style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<title>Page Title</title>
</head>
<body>
<div class=".container-fluid">
<div class="row">
<div class="col-lg-12 top">
TOP TRENDING STORY FOR AUGUST 21, 2019
</div>
</div>
<div class="row">
<div class="col-lg-12 bg-top">
<div class="container">
<div class="row">
<div class="col-md-6">
test 1
</div>
<div class="col-md-6">
Test 2
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
CSS
.top{
background-color: #d42222;
color:#FFFFFF;
font-size:23px;
text-align: center;
}
.bg-top{
background:transparent url('../images/background-top.png') no-repeat center center /cover;
}
This needs some styling to get what you want; You can take a look at the left and right margins which are inserted by Bootstrap .container and may want to override them; to get closer to the image you shared, I added some top and bottom margins myself;
Complete working snippet below:
.redBanner {
background: red;
}
.redBanner p {
margin-bottom: 0;
}
.myExternalContainer {
background-image: url("https://www.akberiqbal.com/Jumbo.jpg");
background-position: center;
background-repeat: no-repeat;
background-size: cover;
background-color: lightblue;
padding-bottom: 5%;
}
.myInternalContainer {
margin-top: 10%;
margin-bottom: 10%;
}
.innerMostContainer {
margin: 10%;
}
.innerMostContainer button {
width: 100%;
}
.container {
background: #fff
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<div class="container-fluid myExternalContainer">
<div class="row">
<div class="col-lg-12 top redBanner">
<p class="text-center">TOP TRENDING STORY FOR AUGUST 21, 2019</p>
</div>
</div>
<div class="container myInternalContainer">
<h3 class="text-center"> medicare</h3>
<div class="row">
<div class="innerMostContainer">
<div class="row">
<div class="col-lg-12 bg-top">
<img src='https://www.akberiqbal.com/src/images/LinkedIn4.png' class='img-fluid' />
<div class="row">
<div class="col-6">
Author Name
<br/> Published date
</div>
<div class="col-6">
<button type="button" class='btn btn-primary'>Read time</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Related
I have this order in my grid when it's a normal sized computer screen:
{1}{2}
{3}{4}
{5}{6}
When i make the screen smaller i want it to reorder, but it doesn't reorder correctly.
Actual:
{1}
{2}
{3}
{4}
{5}
{6}
Wanted:
{1}
{3}
{5}
{2}
{4}
{6}
What kind of CSS formatting do I have to use to achieve the wanted display of my elements.
Current CSS:
.general {
background-color: pink;
order: 1;
}
.anonymous{
background-color: aqua;
order:4;
}
.dead{
background-color: blue;
order: 2;
}
.dead-and-archived {
background-color: green;
order:5;
}
.created {
background-color: yellow;
order:3;
}
.private {
background-color: red;
order:6;
}
Current HTML:
<div class="container-fluid">
<div class="row">
<div class="general col-sm-4" >
General
</div>
<div class="anonymous col-md-8">
Anonymous
</div>
</div>
<div class="row">
<div class=" dead col-md-4">
Dead entities
</div>
<div class=" dead-and-archived col-md-8">
Dead and archived
</div>
</div>
<div class="row">
<div class="created col-md-4 ">
Created entities
</div>
<div class="private col-md-8">
private user repos
</div>
</div>
</div>
What you should do is just change the way you put your content in divs.
Unless your HTML is set in stone, the most obvious way to get what you want is to structure your HTML so that it facilitates what you want.
If you want
{{1},{4}}
{{2},{5}}
{{3},{6}}
You shouldn't do
{{1},{2}}
{{3},{4}}
{{5},{6}}
Change your html so that it looks like this at a structural level:
<div class="column">
<div class="row">
square 1
</div>
<div class="row">
square 2
</div>
<div class="row">
square 3
</div>
</div>
<div class="column">
...
</div>
Now use CSS to give the columns a width so that they are next to eachother, and when you use a mobile device, the right one is placed under the left one.
The alternative way to do this is to add responsive css rules that apply absolute positioning, but really, that is just a nasty way to accomplish what you want.
I hope this will be helpful:
N.B. feel free to change the classes value according with your needs
<html>
<head>
<meta content="width=device-width, initial-scale=1" name="viewport">
<meta charset="UTF-8">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</head>
<body>
<div class="container">
<div class="col-xs-12 col-sm-6">
<div class="col-xs-12">1</div>
<div class="col-xs-12">3</div>
<div class="col-xs-12">5</div>
</div>
<div class="col-xs-12 col-sm-6">
<div class="col-xs-12">2</div>
<div class="col-xs-12">4</div>
<div class="col-xs-12">6</div>
</div>
</div>
</body>
</html>
I am building a Tic-Tac-Toe interface, currently using HTML, CSS, and Bootstrap. I'm trying to get the board to be perfectly squared (1:1) but I'm getting nowhere.
The boxes have to be taller so they use up more space. I can playing with the height property using vw/vh units on the columns, but they won't keep the 1:1 ratio across all resolutions.
Tic Tac Toe
This other version has some "pads" on each side of the board and does the job but breaks on sizes smaller than tablets. Apart from that I lose too much space.
Tic Tac Toe with Pads
Now, here's the code for the Tic Tac Toe without pads:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Tic Tac Toe</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
<link rel="stylesheet" href="css/styles.css">
<script src="js/script.js"></script>
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-12 col-sm-2 ads"> "ads </div>
<div class="col-12 col-sm-6 content">
<div class="container-fluid tic-container">
<div class="row tic-row">
<div class="col-4 tic-box"> 1 </div>
<div class="col-4 tic-box"> 2 </div>
<div class="col-4 tic-box"> 3 </div>
</div>
<div class="row tic-row">
<div class="col-4 tic-box"> 4 </div>
<div class="col-4 tic-box"> 5 </div>
<div class="col-4 tic-box"> 6 </div>
</div>
<div class="row tic-row">
<div class="col-4 tic-box"> 7 </div>
<div class="col-4 tic-box"> 8 </div>
<div class="col-4 tic-box"> 9 </div>
</div>
</div>
</div>
<div class="col-12 col-sm-2 tic-panel"> PANEL-THINGY<br>Score:<br>Foo bar: stuff<br> Reset game and all that blah </div>
<div class="col-12 col-sm-2 ads"> ads </div>
</div>
</div>
</body>
</html>
.ads{
text-align: center;
margin: .4vw 0;
background: #F4CC70;
padding: .4vw;
}
.content{
margin: .4vw 0;
background: lightblue;
padding: .4vw;
}
.tic-panel{
border: solid 2px black;
margin: .4vw 0;
background: #66A5AD;
padding: .4vw;
}
.tic-box{
border: solid black 1px;
font-size: 5vw;
background: #6AB187;
text-align: center;
color: lavender;
}
.tic-box:hover{
background: #20948B;
}
Anyways, I would appreciate some pointers to what I'm doing wrong or what I should do. I guess I'm doing something wrong, not taking full advantage of bootstrap.
Also, I would love if you could tell me if I doing something against the principles of bootstrap, such as using rows or col where I shouldn't.
Add the following properties to the "tic-box" class:
.tic-box {
width: 85px;
height: 85px;
}
Then you will be able to delete the numbers and maintain the dimensions.
I'm working on learning Angular and Bootstrap for a possible job, so I'm making a simple demo page. I'm having trouble getting a new row to stack after the last div of the previous row when I resize. I have a page that looks like this when it's full-size:
Picture|Text|Btn|Btn <- Row 1
[ hidden div ]
| 12 point col | <- Row 2
Right now, the following happens when I resize down:
Picture
|Text12 p col|
Btn
Btn
I want the elements to stack like so:
Picture
Text
Btn
Btn
|12 pt col|
Please see code below. I'm sure there's something basic that I still don't know. I'm not too picky about the column type, I just want the stacking to work.
<div class="container-fluid" id="mainFrame" ng-controller="mainController">
<div class="row" id="row1">
<div class="col-sm-2">
<img src="img/blah.jpg">
</div>
<div class="col-sm-4" id="nameplate">
<p>Lorem Ipsum</p>
<p>sit amet dolor</p>
</br>
<p>Demo Page</p>
<p>Frameworks: Angular and Bootstrap</p>
</div>
<div class="col-sm-3"><div class="btn" id="bluebtn"><p>Push Me!</p></div></div>
<div class="col-sm-3"><div class="btn" id="redbtn"><p>Push Me!</p></div></div>
</div>
<!-----------------Top of hidden row-------------------------->
<div class="jumbotron container-fluid" ng-show="false"></div>
<!-----------------Top of row 3-------------------------->
<div class="col-sm-12"><p>Test</p><p>Blah</p><p>Blah</p></div>
</div>
And here's my CSS:
img
{
height:30vh;
padding:1vh 1vw;
position:relative;
top:8vh;
}
div
{
border: 1px solid black;
}
.row div
{
height:100%;
}
.row div div
{
height:30px;
}
#nameplate
{
vertical-align: bottom;
margin: auto;
text-align:center;
}
#nameplate p
{
margin:2vh 2vw;
}
#mainFrame
{
height: 100%;
}
Any help is appreciated! Thank you.
You need to add different column specification for different screen size. This is responsible for the responsive behavior. You can see the working code snippet below--
<!DOCTYPE>
<html>
<head>
<meta charset="UTF-8">
<title>Secure Login: Protected Page</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container-fluid" id="mainFrame" ng-controller="mainController">
<div class="row" id="row1">
<div class="col-sm-2 col-md-2 col-lg-2 ">
<img src="img/blah.jpg">
</div>
<div class="col-sm-4 col-md-4 col-lg-4" id="nameplate">
<p>Lorem Ipsum</p>
<p>sit amet dolor</p>
<p>Demo Page</p>
<p>Frameworks: Angular and Bootstrap</p>
</div>
<div class="col-sm-3 col-md-3 col-lg-3"><div class="btn" id="bluebtn"><p>Push Me!</p></div></div>
<div class="col-sm-3 col-md-3 col-lg-3"><div class="btn" id="redbtn"><p>Push Me!</p></div></div>
</div>
<!---Top of hidden row-->
<div class="jumbotron container-fluid" ng-show="false"></div>
<!---Top of row 3-->
<div class="col-sm-12 col-md-12 col-lg-12"><p>Test</p><p>Blah</p><p>Blah</p></div>
</div>
</body>
</html>
I am trying to change the background image of a jumbotron I have on one of my views and it just isnt working. I have looked at numerous posts on stack, and tried all of the suggested solutions but none of them are working for me.
HTML
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap -->
<link href="dist3/css/bootstrap.min.css" rel="stylesheet">
<link href="css/style.css" type="text/css" rel="stylesheet">
</head>
<body>
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<ul>
<li>About</li>
<li>Me</li>
</ul>
</div>
</nav>
<div class="content">
<div class="jumbotron">
<div class="container">
<h1>Allan Araujo</h1>
<p>Example paragraph</p>
</div>
</div>
<section class="pink">
<div class="container-fluid">
<div class="row">
<div class="col-xs-12"><h3>.container-fluid</h3></div>
</div>
<div class="row">
<div class="col-xs-6">Column one</div>
<div class="col-xs-6">Column one</div>
</div>
</div>
</section>
<section class="green">
<div class="container">
<div class="row">
<div class="col-xs-12"><h3>.container</h3></div>
</div>
<div class="row">
<div class="col-xs-6">Column one</div>
<div class="col-xs-6">Column one</div>
</div>
</div>
</section>
</div> <!--END CONTENT-->
</body>
</html>
CSS:
/* ============================================= JUMBOTRON ============================================= */
.jumbotron {
background: url('/img/congruent_pentagon.png') no-repeat center center !important;
background-size: cover;
}
.nav {
text-align: center;
padding: 0;
margin: 0;
background-color: red;
height: 10%;
}
.nav li {
display: inline-block;
margin-right: 5%;
margin-left: 5%;
}
.pink {
background-color: #f99;
}
.green {
background-color: #9f9;
}
section {
padding-bottom: 20px;
}
My folders are structured as follows:
FOLDER
--css
--style.css
--dist
--img
--congruent_pentagon.png
--header.php
--index.php
I have tried to change the url to go see if that was the issue, but that did not fix the problem either. The weird part is the the background right now is grey, but not displaying the image that I want it to.
EDIT: now displaying entire html/css doc. I am using php to load in nav bars but I just combined them here to make it easier to look at.
The issue is related to the url to your image, change it to /img/congruent_pentagon.png
Online example: http://jsfiddle.net/tthLjchm/1/
Css:
.jumbotron {
background: url('http://getbootstrap.com/assets/img/sass-less.png') no-repeat center center !important;
height: 50%;
margin-top: 10px;
color: black;
}
.jumbotron p, h1 {
text-align: center;
}
The issue was that the image had to be placed within my css folder.
I'm straggling with a simple layout issue:
Basically my goal is to create a toggled side menu. When the side menu is visible the main layout is 80% width, and when it is not visible the main layout would be 100% width, like so:
I'm using bootstrap 3 and would like to use their CSS markup, so I can add rows and columns to the main div (Lt-orange in the illustration).
Any help would be appreciated :)
EDIT:
Here is my progress so far:
<div class="container">
<div id="sidebar" style="border:solid 1px;width:20%;float:left">SIDEBAR</div>
<div style="border:solid 1px;width:100%">
<div style="border:solid 1px red">
<div class="row">
<div class="col-lg-6">Some Content</div>
<div class="col-lg-6">
<div class="row">
<div class="col-lg-12">Some content</div>
</div>
</div>
</div>
</div>
</div>
<button onclick="document.getElementById('sidebar').style.display = document.getElementById('sidebar').style.display == 'none' ? 'block':'none'">TOGGLE</button>
Demo
Actually, you can't use 20% because bootstrap grid size works with 12s. Which means 100%=12/12 so 1/12 is 8,33% is the smallest unit. What is closest to you is for the sidebar to be 3/12=25%. Giving you code for this:
<div class="row">
<div class="col-xs-12 col-sm-3">
sidebar content
</div>
<div class="col-xs-12 col-sm-9">
main content here
<div class="row">
<div class="col-xs-12">
your 100% main content here
</div>
</div
</div>
I assume the bottom photo shows how it will look on a mobile device..?
I was working on a similar kind of solution, below is the snippet of code that works for me
below is the file (test.php)
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Toggle Demo</title>
<link rel="stylesheet" type="text/css" href="PATH TO/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="PATH/demo.css">
<script type="text/javascript" src="PATH/respond.min.js"></script>
</head>
<body>
<div class="container">
<div class="row" >
<div class="col-sm-3 side20" > This is side content</div>
<div class="col-sm-9 main80">This is the main content.</div>
</div>
<button class="btn btn-default" role="button">Toggle</button>
<div class="row" >
<div class="col-sm-3 side20" >n</div>
<div class="col-sm-9 main80" >This is the main content</div>
</div>
<footer class="row">
<div class="col-xs-6 copyright">
© Toggle Demo - <?php echo date('Y');?>
</div>
<div class="col-xs-6 design">
<small>Designed by Learner</small>
</div>
</footer>
</div>
<!-- JavaScript -->
<script src="PATH TO/jquery-1.11.0.js"></script>
<script src="PATH TO/bootstrap.min.js"></script>
<script type="text/javascript" src="PATH TO/custom.js"></script>
</body>
</html>
The sample css is (demo.css)
.container{
width: 100%;
background: #0081c2;
}
.side20{
background: #3e8f3e;
}
.col-sm-3{
display: block;
background: #3e8f3e;
height: 200px;
border: solid 2px #000000;
}
.main80{
background: #8D0D19;
height: 200px;
border: solid 2px #000000;
}
.col-sm-12{
background: #8D0D19;
}
footer{
min-height: 50px;
background: #010102;
border-radius: 3px;
}
.copyright{
text-align: center;
line-height: 50px;
color: #fff;
}
.design{
text-align: right;
line-height: 50px;
color: #FFF4B9;
}
And the toggle function is achieved by the below jQuery script (custom.js)
$(".btn").on("click", function(){
$(".col-sm-3").toggle();
$(".main80").toggleClass("col-sm-12");
$(".main80").toggleClass("col-sm-9");
});
Hope this helps. Happy coding!!
Found a CSS only solution , basically I'm using table display:
HTML + CSS:
<div class="container">
<div style="display:table;width:100%;border:solid 1px red;height:100px">
<div style="display:table-row">
<div id="side" style="display:table-cell;background:#CCC;width:30%">SIDE</div>
<div style="display:table-cell">
<div class="row">
<div class="col-xs-6">6 col</div>
<div class="col-xs-6">6 col</div>
</div>
</div>
</div>
</div>
<button class="btn btn-primary" onclick="toggle()">TOGGLE</button>
here is a JS fiddle, that toggles the display of the cell