I'm building a webpage, the landing page has two portals. I would like to use jombotrons to be used as the portals. I would like to have two jumbotrons side by side. I thought if I put them inside a row div, and gave them col-mid-6 class this would give me the desired affect. However, they just span across the page, and then stack. Any help would be very much appreciated. I'm very new to css and bootstrap.
<div class="row">
<div class="container">
<div class="jumbotron text-center col-mid-6">
<h1>Become Awesome</h1>
<p>Here you will learn how to become awesome.</p>
<a class="btn btn-danger pull-right" href="{% url 'awesome_info' %}">More Info</a>
</div>
<div class="jumbotron text-center col-mid-6">
<h1>Here you will learn how to become super rad.</h1>
<p>Tubular dude.</p>
<a class="btn btn-success" href="{% url 'rad_info' %}" role="button">More Info</a>
</div>
</div>
</div>
The correct class is col-md-6.
With that your jumbotron will be equal widths like in here
If you want the height to be equal too, give your container class a css property such as:
.container{
display: flex
}
For the result to be like this
You have a typo in your divs. Bootstrap calls for a col-md-6 class, not a col-mid-6 class.
<div class="jumbotron text-center col-md-6"></div>
You should put your div.container into a div.row then, write this css property
.container{
display: flex
}
Related
Currently, I have a box which has some text inside it. Currently, the link is only applied to some text as below:
<div class="row text-banner-blocks">
<div class="col-sm-4 header-text-banner text-center">
<!-- gray-border -->
<div class="box">
<h3>Free delivery worldwide*</h3>
<a href="#">
*More info here
</a>
</div>
</div>
This is how it appears on the site:
https://snag.gy/sbC421.jpg
However, I want the whole link placed in the whole box and as with HTML I just place the tag inside the tag but I seem to lose all the styling and the padding goes I think? Code:
<div class="row text-banner-blocks">
<div class="col-sm-4 header-text-banner text-center">
<!-- gray-border -->
<a href="#">
<div class="box">
<h3>Free delivery worldwide*</h3>
<br/>
*More info here
</div>
</a>
</div>
This is how it looks after:
https://snag.gy/KZzSUv.jpg
Any help is greatly appreciated!
I think you are referencing the .box div using a css selector that requires the parent element to be a div
so you might have to change the css for the box element to something like
a > .box {
/* styles */
}
check this image for more info
Decided to do it with JavaScript inside using the below for the parameters of the div tag:
onclick="document.location='#'"
This solution is neater for what I am after and as I am using several style sheets it was difficult to spot the culprit.
<div class="container">
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-8">
<div v-for="job in job">
<div class="text-center">
<h1>{{ job.job_title }}</h1>
<p><strong>Google Inc. </strong> - {{ job.location }}</p>
<h2><u>Job Description</u></h2>
</div>
<p v-html="desc"></p>
<p class="text-center">Posted: {{ formatDate(job.date_created) }}</p>
<button v-on:click="applyResume()" id="apply-btn" class="btn btn-primary">{{ buttonText }}</button>
</div>
</div>
<div class="hidden-sm-down col-md-4"></div>
</div>
</div>
Can't figure out how to center this button. In BS 3 I would just use center-block but that's not an option in BS4. Any advice?
In Bootstrap 4 one should use the text-center class to align inline-blocks.
NOTE: text-align:center; defined in a custom class you apply to your parent element will work regardless of the Bootstrap version you are using. And that's exactly what .text-center applies.
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<div class="container">
<div class="row">
<div class="col text-center">
<button class="btn btn-default">Centered button</button>
</div>
</div>
</div>
If the content to be centered is block or flex (not inline-), one could use flexbox to center it:
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<div class="d-flex justify-content-center">
<button class="btn btn-default">Centered button</button>
</div>
... which applies display: flex; justify-content: center to parent.
Note: don't use .row.justify-content-center instead of .d-flex.justify-content-center, as .row applies negative margins on certain responsiveness intervals, which results into unexpected horizontal scrollbars (unless .row is a direct child of .container, which applies lateral padding to counteract the negative margin, on the correct responsiveness intervals). If you must use .row, for whatever reason, override its margin and padding with .m-0.p-0, in which case you end up with pretty much the same styles as .d-flex.
Important note: The second solution is problematic when the centered content (the button) exceeds the width of the parent (.d-flex) especially when the parent has viewport width, specifically because it makes it impossible to horizontally scroll to the start of the content (left-most).
So don't use it when the content to be centered could become wider than the available parent width and all content should be accessible.
Try this with bootstrap
CODE:
<div class="row justify-content-center">
<button type="submit" class="btn btn-primary">btnText</button>
</div>
LINK:
https://getbootstrap.com/docs/4.1/layout/grid/#variable-width-content
With the use of the bootstrap 4 utilities you could horizontally center an element itself by setting the horizontal margins to 'auto'.
To set the horizontal margins to auto you can use mx-auto . The m refers to margin and the x will refer to the x-axis (left+right) and auto will refer to the setting. So this will set the left margin and the right margin to the 'auto' setting. Browsers will calculate the margin equally and center the element. The setting will only work on block elements so the display:block needs to be added and with the bootstrap utilities this is done by d-block.
<button type="submit" class="btn btn-primary mx-auto d-block">Submit</button>
You can consider all browsers to fully support auto margin settings according to this answer Browser support for margin: auto so it's safe to use.
The bootstrap 4 class text-center is also a very good solution, however it needs a parent wrapper element. The benefit of using auto margin is that it can be done directly on the button element itself.
Here is the full HTML that I use to center by button in Bootsrap form
after closing form-group:
<div class="form-row text-center">
<div class="col-12">
<button type="submit" class="btn btn-primary">Submit</button>
</div>
</div>
Use text-center class in the parent container for Bootstrap 4
for a button in a collapsed navbar nothing above worked for me
so in my css file i did.....
.navbar button {
margin:auto;
}
and it worked!!
thing is you need to wrap your button in a parent element :
` <div class="text-center">
<a href="./templatemo_558_klassy_cafe/index.html" class="btn btn-
outline-light me-5 ">Lavande Restaurant PH</a>`
</div>
What worked for me was (adapt "css/style.css" to your css path):
Head HTML:
<link rel="stylesheet" type="text/css" href="css/style.css" media="screen" />
Body HTML:
<div class="container">
<div class="row">
<div class="mycentered-text">
<button class="btn btn-default"> Login </button>
</div>
</div>
</div>
Css:
.mycentered-text {
text-align:center
}
you can also just wrap with an H class or P class with a text-center attribute
Its Easy
<div class="align-self-center mx-auto">
<button type="button" class="btn btn-primary">
Click Me!
</button>
</div>
I want to make the whole view linkable.
This is my rewrite rule:
<div class="news_column_wrapper z-depth-1 card">
<div class="news_column_images card-image">[field_images]</div>
<div class="news_column_content_wrapper">
<div class="news_column_created"><i class="fa fa-clock-o"></i> [created]</div>
<div class="news_column_title">[title]</div>
</div>
</div>
This is my view field screenshoot, I want to make the whole box clickable:
I have tried with
<div class="news_column_wrapper z-depth-1 card">
<a href="[path]">
<div class="news_column_images card-image">[field_images]</div>
<div class="news_column_content_wrapper">
<div class="news_column_created"><i class="fa fa-clock-o"></i> [created]</div>
<div class="news_column_title">[title]</div>
</div>
</a>
</div>
but nothing happens. How can I achieve that?
I think it's more an HTML issue than a Drupal one.
The <a> tag is an inline tag, and you have placed <div> tags inside of it. The natural display of the <a> tag will make that, only the text will be clickable.
What you can do is use CSS to make the <a> a block element, therefore, making the clickable zone extend to the whole block.
First add a class to your link:
<a class='block_link'>
<h2>My title</h2>
<div>My content</div>
</a>
Then, in your CSS, make the <a> tag displaying like a block.
a {
display:block;
}
That should do the trick.
This is my current code
.tag-container.bottom-border.col-middle
h1.text-center {{ tag.name }}
button.btn.btn-follow.pull-right(ng-hide="hasFollowed" ng-click="tagArticles.followTag()") Follow
I want to make the tag.name in the middle, and the button in the right, but it didn't display correctly. How should I structure these two part? What css should I use?
Thanks.
Update
This is the simplified code about basic html
<row>
<div>
<h1> Tag name</h1>
</div>
<div class="pull-right">
<button>Follow</button>
</div>
</row>
Feel free to work on it. Thanks
If you want to stick to pure bootstrap styles, something like this would work:
<div class="row">
<div class="col-md-10 col-md-offset-1">
<h1 class="text-center">Tag name</h1>
</div>
<div class="col-md-1 text-center">
<button class="btn btn-follow " style="margin-top: 1.5em;">Follow</button>
</div>
</div>
You'll need some extra styling to vertically center the button (to replace the inline style adding 1.5em margin to the top).
Also that styling centers the button below the h1 in mobile breakpoints ... that may or may not be what you're after.
I'm trying to get full width container with jumbotron or something like this in full width:
<div class="container" style="margin: 0 auto;width: 100%;background-color: red">
<div class="jumbotron">
<h1>Full Width Layout</h1>
<p class="lead">The Bootstrap 3 grid is fluid only. This example shows how to use a custom container to create a fixed width layout.</p>
<p><a class="btn btn-large btn-success" href="http://bootply.com/tagged/bootstrap-3" target="ext">More
Examples</a>
</p>
</div>
</div>
currently i'm using : https://github.com/FezVrasta/bootstrap-material-design with Yii2.
I've tryied everything about this, but still the problem exist and it's not full width.
If you want full width
you don't have to use container in your page and remember to remove this class also from the layout you are using. (or you can define a layout without this class and set in your action $this->layout= "yourNewLayout"; before render the page) typically the default layout is located in /view/layouts/main.php
then you must remove this line:
class="container"
then you can see a full with yii2 web app.
and just a minor
you shuold use:
style="margin: 0 auto;width: 100%; background-color: red;">
To make the jumbotron full width, and without rounded corners, place
it outside all .containers and instead add a .container within.
<div class="jumbotron">
<div class="container">
...
</div>
</div>
See Docs
And since you're using Bootstrap-Material, you can use the built in classes to add color (this is dependent on the material-fullpalette.css, not material.css, See Docs)
See Working Example Snippets.
$.material.init()
/*ADD YOURSELF*/
.jumbotron.jumbo-red {
background: red;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-material-design/0.4.4/css/material-fullpalette.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-material-design/0.4.4/js/ripples.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-material-design/0.4.4/js/material.min.js"></script>
<div class="well">Your Own CSS for Color</div>
<div class="jumbotron jumbo-red">
<div class="container">
<h1>Full Width Layout</h1>
<p class="lead">The Bootstrap 3 grid is fluid only. This example shows how to use a custom container to create a fixed width layout.</p>
<p><a class="btn btn-large btn-success" href="#" target="ext">More
Examples</a>
</p>
</div>
</div>
<hr>
<div class="well">Material CSS for Color</div>
<div class="jumbotron jumbotron-material-red-A700">
<div class="container">
<h1>Full Width Layout</h1>
<p class="lead">The Bootstrap 3 grid is fluid only. This example shows how to use a custom container to create a fixed width layout.</p>
<p><a class="btn btn-large btn-material-green" href="#" target="ext">More
Examples</a>
</p>
</div>
</div>