CODEWITHSUNDEEP
htmlbootstrap-4
Lia
Lia

Reputation: 241

Use a border within row elements in bootstrap

I am using bootstrap/html and I am trying to border the three alerts in a row. How can I do that? It looks like this so far:

enter image description here

what I have so far is

<div class="container">		
<div class="row">
<div class="col-sm">
<div class="alert alert-primary"></div>
</div>
<div class="col-sm">
<div class="alert alert-primary"></div>
</div>
<div class="col-sm">
<div class="alert alert-primary"></div>
</div>
..

How can I surround this with a span?

Thank you all

Upvotes: 2

Views: 119

Answers (1)

E.H.
E.H.

Reputation: 11

sorry I'm just seeing your follow up question. You could add some padding with css. CSS can be added to HTML elements: Inline - by using the style attribute in HTML elements Internal - by using a element in the section

.alert-primary { padding: 30px; }

This would add just a simple border around each alert thru bootstrap As well as the below changes to the class of

<div class="alert alert-primary">

<style>
  .alert-primary {
    padding: 30px;
  }
</style>

<div class="container border border-dark">
  <div class="row">
    <div class="col-sm">
      <div class="alert alert-primary"></div>
    </div>
    <div class="col-sm">
      <div class="alert alert-primary"></div>
    </div>
    <div class="col-sm">
      <div class="alert alert-primary"></div>
    </div>

Upvotes: 1

Related Questions